mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-27 12:36:14 +01:00
styling updates
This commit is contained in:
Kyle Spearrin
parent
42f34e4185
commit
b1ac825eba
@ -2,12 +2,14 @@
|
|||||||
class="box-content-row box-content-row-flex">
|
class="box-content-row box-content-row-flex">
|
||||||
<div class="row-main">
|
<div class="row-main">
|
||||||
<app-vault-icon [cipher]="c"></app-vault-icon>
|
<app-vault-icon [cipher]="c"></app-vault-icon>
|
||||||
<span class="text">
|
<div class="row-main-content">
|
||||||
{{c.name}}
|
<span class="text">
|
||||||
<i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
|
{{c.name}}
|
||||||
<i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
|
<i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
|
||||||
</span>
|
<i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
|
||||||
<span class="detail">{{c.subTitle}}</span>
|
</span>
|
||||||
|
<span class="detail">{{c.subTitle}}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<app-action-buttons [cipher]="c" [showView]="showView" (onView)="viewCipher(c)"
|
<app-action-buttons [cipher]="c" [showView]="showView" (onView)="viewCipher(c)"
|
||||||
class="action-buttons"></app-action-buttons>
|
class="action-buttons"></app-action-buttons>
|
||||||
|
|||||||
@ -58,12 +58,15 @@ export const authService = new AuthService(getBgService<CryptoService>('cryptoSe
|
|||||||
getBgService<I18nService>('i18n2Service')(), getBgService<PlatformUtilsService>('platformUtilsService')(),
|
getBgService<I18nService>('i18n2Service')(), getBgService<PlatformUtilsService>('platformUtilsService')(),
|
||||||
getBgService<ConstantsService>('constantsService')(), messagingService);
|
getBgService<ConstantsService>('constantsService')(), messagingService);
|
||||||
|
|
||||||
export function initFactory(i18nService: I18nService, storageService: StorageService): Function {
|
export function initFactory(i18nService: I18nService, storageService: StorageService,
|
||||||
|
popupUtilsService: PopupUtilsService): Function {
|
||||||
return async () => {
|
return async () => {
|
||||||
if (window.screen.availHeight < 600) {
|
if (!popupUtilsService.inPopup(window)) {
|
||||||
window.document.body.classList.add('xs');
|
window.document.body.classList.add('body-full');
|
||||||
|
} else if (window.screen.availHeight < 600) {
|
||||||
|
window.document.body.classList.add('body-xs');
|
||||||
} else if (window.screen.availHeight <= 800) {
|
} else if (window.screen.availHeight <= 800) {
|
||||||
window.document.body.classList.add('sm');
|
window.document.body.classList.add('body-sm');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (i18nService != null) {
|
if (i18nService != null) {
|
||||||
@ -120,7 +123,7 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer
|
|||||||
{
|
{
|
||||||
provide: APP_INITIALIZER,
|
provide: APP_INITIALIZER,
|
||||||
useFactory: initFactory,
|
useFactory: initFactory,
|
||||||
deps: [I18nService, StorageService],
|
deps: [I18nService, StorageService, PopupUtilsService],
|
||||||
multi: true,
|
multi: true,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@ -39,37 +39,41 @@
|
|||||||
<span class="flex-right">4</span>
|
<span class="flex-right">4</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content single-line">
|
<div class="box-content single-line">
|
||||||
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
|
<a href="#" class="box-content-row" appStopClick appBlurClick
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-globe"></i></div>
|
(click)="selectType(cipherType.Login)">
|
||||||
{{'typeLogin' | i18n}}
|
<div class="row-main">
|
||||||
<div class="flex-right">
|
<div class="icon"><i class="fa fa-fw fa-lg fa-globe"></i></div>
|
||||||
<span class="row-sub-label">{{typeCounts.get(cipherType.Login) || 0}}</span>
|
<span class="text">{{'typeLogin' | i18n}}</span>
|
||||||
<i class="fa fa-chevron-right fa-lg"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span class="row-sub-label">{{typeCounts.get(cipherType.Login) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
|
<a href="#" class="box-content-row" appStopClick appBlurClick
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-credit-card"></i></div>
|
(click)="selectType(cipherType.Card)">
|
||||||
{{'typeCard' | i18n}}
|
<div class="row-main">
|
||||||
<div class="flex-right">
|
<div class="icon"><i class="fa fa-fw fa-lg fa-credit-card"></i></div>
|
||||||
<span class="row-sub-label">{{typeCounts.get(cipherType.Card) || 0}}</span>
|
<span class="text">{{'typeCard' | i18n}}</span>
|
||||||
<i class="fa fa-chevron-right fa-lg"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span class="row-sub-label">{{typeCounts.get(cipherType.Card) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
|
<a href="#" class="box-content-row" appStopClick appBlurClick
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-id-card-o"></i></div>
|
(click)="selectType(cipherType.Identity)">
|
||||||
{{'typeIdentity' | i18n}}
|
<div class="row-main">
|
||||||
<div class="flex-right">
|
<div class="icon"><i class="fa fa-fw fa-lg fa-id-card-o"></i></div>
|
||||||
<span class="row-sub-label">{{typeCounts.get(cipherType.Identity) || 0}}</span>
|
<span class="text">{{'typeIdentity' | i18n}}</span>
|
||||||
<i class="fa fa-chevron-right fa-lg"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span class="row-sub-label">{{typeCounts.get(cipherType.Identity) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)">
|
<a href="#" class="box-content-row" appStopClick appBlurClick
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-sticky-note-o"></i></div>
|
(click)="selectType(cipherType.SecureNote)">
|
||||||
{{'typeSecureNote' | i18n}}
|
<div class="row-main">
|
||||||
<div class="flex-right">
|
<div class="icon"><i class="fa fa-fw fa-lg fa-sticky-note-o"></i></div>
|
||||||
<span class="row-sub-label">{{typeCounts.get(cipherType.SecureNote) || 0}}</span>
|
<span class="text">{{'typeSecureNote' | i18n}}</span>
|
||||||
<i class="fa fa-chevron-right fa-lg"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span class="row-sub-label">{{typeCounts.get(cipherType.SecureNote) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -79,16 +83,17 @@
|
|||||||
<span class="flex-right">{{folderCount}}</span>
|
<span class="flex-right">{{folderCount}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content single-line">
|
<div class="box-content single-line">
|
||||||
<a *ngFor="let f of folders" href="#" class="box-content-row" appStopClick appBlurClick
|
<a *ngFor="let f of folders" href="#" class="box-content-row"
|
||||||
(click)="selectFolder(f)">
|
appStopClick appBlurClick (click)="selectFolder(f)">
|
||||||
<div class="icon">
|
<div class="row-main">
|
||||||
<i class="fa fa-fw fa-lg" [ngClass]="{'fa-folder-open': f.id, 'fa-folder-open-o': !f.id}"></i>
|
<div class="icon">
|
||||||
</div>
|
<i class="fa fa-fw fa-lg"
|
||||||
{{f.name}}
|
[ngClass]="{'fa-folder-open': f.id, 'fa-folder-open-o': !f.id}"></i>
|
||||||
<div class="flex-right">
|
</div>
|
||||||
<span class="row-sub-label">{{folderCounts.get(f.id) || 0}}</span>
|
<span class="text">{{f.name}}</span>
|
||||||
<i class="fa fa-chevron-right fa-lg"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span class="row-sub-label">{{folderCounts.get(f.id) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -98,14 +103,14 @@
|
|||||||
<span class="flex-right">{{collections.length}}</span>
|
<span class="flex-right">{{collections.length}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content single-line">
|
<div class="box-content single-line">
|
||||||
<a *ngFor="let c of collections" href="#" class="box-content-row" appStopClick appBlurClick
|
<a *ngFor="let c of collections" href="#" class="box-content-row"
|
||||||
(click)="selectCollection(c)">
|
appStopClick appBlurClick (click)="selectCollection(c)">
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
|
<div class="row-main">
|
||||||
{{c.name}}
|
<div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
|
||||||
<div class="flex-right">
|
<span class="text">{{c.name}}</span>
|
||||||
<span class="row-sub-label">{{collectionCounts.get(c.id) || 0}}</span>
|
|
||||||
<i class="fa fa-chevron-right fa-lg"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span class="row-sub-label">{{collectionCounts.get(c.id) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -20,15 +20,20 @@ body {
|
|||||||
height: 600px !important;
|
height: 600px !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&.sm {
|
&.body-sm {
|
||||||
width: 375px !important;
|
width: 375px !important;
|
||||||
height: 500px !important;
|
height: 500px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.xs {
|
&.body-xs {
|
||||||
width: 375px !important;
|
width: 375px !important;
|
||||||
height: 300px !important;
|
height: 300px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.body-full {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
@ -254,7 +259,8 @@ content {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
overflow: auto;
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
background-color: $background-color;
|
background-color: $background-color;
|
||||||
|
|
||||||
&.no-header {
|
&.no-header {
|
||||||
|
|||||||
@ -247,9 +247,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
float: left;
|
min-width: 34px;
|
||||||
height: 36px;
|
height: 100%;
|
||||||
width: 34px;
|
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
color: $text-muted;
|
color: $text-muted;
|
||||||
|
|
||||||
@ -326,17 +325,6 @@
|
|||||||
background-color: initial;
|
background-color: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.single-line {
|
|
||||||
.box-content-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
height: initial;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-footer {
|
.box-footer {
|
||||||
@ -373,10 +361,20 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.row-main {
|
||||||
|
display: flex;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
.row-main-content {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.single-line {
|
&.single-line {
|
||||||
.box-content-row {
|
.box-content-row {
|
||||||
|
display: flex;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -105,3 +105,7 @@ app-password-generator .password-block {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
app-vault-icon {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user