From b1ac825eba204433b2cd30818c7ca7f7c50f2e81 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Mon, 9 Apr 2018 22:25:03 -0400 Subject: [PATCH] styling updates --- .../components/ciphers-list.component.html | 14 +-- src/popup2/services/services.module.ts | 13 +-- src/popup2/vault/groupings.component.html | 85 ++++++++++--------- src/scss/base.scss | 12 ++- src/scss/box.scss | 26 +++--- src/scss/misc.scss | 4 + 6 files changed, 86 insertions(+), 68 deletions(-) diff --git a/src/popup2/components/ciphers-list.component.html b/src/popup2/components/ciphers-list.component.html index 9cb80ac204..8b2f8827e8 100644 --- a/src/popup2/components/ciphers-list.component.html +++ b/src/popup2/components/ciphers-list.component.html @@ -2,12 +2,14 @@ class="box-content-row box-content-row-flex">
- - {{c.name}} - - - - {{c.subTitle}} +
+ + {{c.name}} + + + + {{c.subTitle}} +
diff --git a/src/popup2/services/services.module.ts b/src/popup2/services/services.module.ts index 0357b4e823..cbdac193ea 100644 --- a/src/popup2/services/services.module.ts +++ b/src/popup2/services/services.module.ts @@ -58,12 +58,15 @@ export const authService = new AuthService(getBgService('cryptoSe getBgService('i18n2Service')(), getBgService('platformUtilsService')(), getBgService('constantsService')(), messagingService); -export function initFactory(i18nService: I18nService, storageService: StorageService): Function { +export function initFactory(i18nService: I18nService, storageService: StorageService, + popupUtilsService: PopupUtilsService): Function { return async () => { - if (window.screen.availHeight < 600) { - window.document.body.classList.add('xs'); + if (!popupUtilsService.inPopup(window)) { + 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) { - window.document.body.classList.add('sm'); + window.document.body.classList.add('body-sm'); } if (i18nService != null) { @@ -120,7 +123,7 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer { provide: APP_INITIALIZER, useFactory: initFactory, - deps: [I18nService, StorageService], + deps: [I18nService, StorageService, PopupUtilsService], multi: true, }, ], diff --git a/src/popup2/vault/groupings.component.html b/src/popup2/vault/groupings.component.html index a8bdb0dc33..81dd438090 100644 --- a/src/popup2/vault/groupings.component.html +++ b/src/popup2/vault/groupings.component.html @@ -39,37 +39,41 @@ 4
- -
- {{'typeLogin' | i18n}} -
- {{typeCounts.get(cipherType.Login) || 0}} - + +
+
+ {{'typeLogin' | i18n}}
+ {{typeCounts.get(cipherType.Login) || 0}} + - -
- {{'typeCard' | i18n}} -
- {{typeCounts.get(cipherType.Card) || 0}} - + +
+
+ {{'typeCard' | i18n}}
+ {{typeCounts.get(cipherType.Card) || 0}} + - -
- {{'typeIdentity' | i18n}} -
- {{typeCounts.get(cipherType.Identity) || 0}} - + +
+
+ {{'typeIdentity' | i18n}}
+ {{typeCounts.get(cipherType.Identity) || 0}} + - -
- {{'typeSecureNote' | i18n}} -
- {{typeCounts.get(cipherType.SecureNote) || 0}} - + +
+
+ {{'typeSecureNote' | i18n}}
+ {{typeCounts.get(cipherType.SecureNote) || 0}} +
@@ -79,16 +83,17 @@ {{folderCount}}
- -
- -
- {{f.name}} -
- {{folderCounts.get(f.id) || 0}} - + +
+
+ +
+ {{f.name}}
+ {{folderCounts.get(f.id) || 0}} +
@@ -98,14 +103,14 @@ {{collections.length}}
- -
- {{c.name}} -
- {{collectionCounts.get(c.id) || 0}} - + +
+
+ {{c.name}}
+ {{collectionCounts.get(c.id) || 0}} +
diff --git a/src/scss/base.scss b/src/scss/base.scss index fdd9d844f4..ab334f0a83 100644 --- a/src/scss/base.scss +++ b/src/scss/base.scss @@ -20,15 +20,20 @@ body { height: 600px !important; overflow: hidden; - &.sm { + &.body-sm { width: 375px !important; height: 500px !important; } - &.xs { + &.body-xs { width: 375px !important; height: 300px !important; } + + &.body-full { + width: 100% !important; + height: 100% !important; + } } h1, h2, h3, h4, h5, h6 { @@ -254,7 +259,8 @@ content { bottom: 0; left: 0; right: 0; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; background-color: $background-color; &.no-header { diff --git a/src/scss/box.scss b/src/scss/box.scss index 80158155e7..8a48b5b8f1 100644 --- a/src/scss/box.scss +++ b/src/scss/box.scss @@ -247,9 +247,8 @@ display: flex; justify-content: center; align-items: center; - float: left; - height: 36px; - width: 34px; + min-width: 34px; + height: 100%; margin-left: -5px; color: $text-muted; @@ -326,17 +325,6 @@ background-color: initial; } } - - &.single-line { - .box-content-row { - display: flex; - - .icon { - height: initial; - text-align: center; - } - } - } } .box-footer { @@ -373,10 +361,20 @@ overflow: hidden; text-overflow: ellipsis; } + + .row-main { + display: flex; + min-width: 0; + + .row-main-content { + min-width: 0; + } + } } &.single-line { .box-content-row { + display: flex; padding-top: 10px; padding-bottom: 10px; } diff --git a/src/scss/misc.scss b/src/scss/misc.scss index eb35292d7e..b6e2ffe483 100644 --- a/src/scss/misc.scss +++ b/src/scss/misc.scss @@ -105,3 +105,7 @@ app-password-generator .password-block { text-align: center; margin: 20px; } + +app-vault-icon { + display: flex; +}