tweak styling of local store/database view mode, #238

* reduce folder items height (by making its height equal to the mail item height)
vladimiry · Jan 27, 2020 · 3ad4de5 · 3ad4de5
1 parent 2600ee9
commit 3ad4de5
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/src/web/browser-window/app/_db-view/db-view-folder.component.html b/src/web/browser-window/app/_db-view/db-view-folder.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex flex-grow-1 mr-2 type-{{folder.folderType}}">
+<div class="d-flex flex-grow-1 type-{{folder.folderType}}">
     <i class="fa mr-2"></i>
     <span class="mr-1">{{ folder.name }}</span>
     <span *ngIf="folder.size">({{ folder.size }})</span>

diff --git a/src/web/browser-window/app/_db-view/db-view-mail-tab.component.scss b/src/web/browser-window/app/_db-view/db-view-mail-tab.component.scss
@@ -22,6 +22,10 @@
             }
         }
 
+        .list-group-item {
+            padding: $app-db-view-mail-padding-y $app-db-view-mail-padding-x;
+        }
+
         .list-group-item:not(.list-group-item-warning) {
             background-color: $app-db-view-color-bg-mail;
         }

diff --git a/src/web/browser-window/app/_db-view/db-view-mail.component.scss b/src/web/browser-window/app/_db-view/db-view-mail.component.scss
@@ -6,15 +6,12 @@
     $state-line-draft: #febe5e;
     $state-line-with: 4px;
     $state-line-margin: 3px;
-    $border-color: $list-group-border-color;
-    $padding-y: $list-group-item-padding-y * 0.5;
-    $padding-x: $list-group-item-padding-x * 0.5;
 
     background-color: $app-db-view-color-bg-mail;
     border: 1px solid $list-group-border-color;
     display: flex;
     flex-direction: column;
-    padding: $padding-y $padding-x;
+    padding: $app-db-view-mail-padding-y $app-db-view-mail-padding-x;
     position: relative;
 
     .r {
@@ -97,7 +94,7 @@
 
     .fa {
         font-size: 85%;
-        line-height: 1.8;
+        align-self: center;
     }
 
     .conversation-size,
@@ -115,7 +112,7 @@
 
     .b {
         border: 1px solid darken($app-db-view-color-border, 2%);
-        padding: $badge-padding-y $badge-padding-x;
+        padding: ($badge-padding-y * 0.5) $badge-padding-x;
         border-radius: $badge-border-radius;
     }
 

diff --git a/src/web/variables.scss b/src/web/variables.scss
@@ -32,6 +32,8 @@ $app-db-view-color-bg-body: lighten(#eeeff1, 1%);
 $app-db-view-color-bg-mail: lighten(#d1d7dc, 1%);
 $app-db-view-color-bg: lighten($app-db-view-color-bg-mail, 7%);
 $app-db-view-color-border: $list-group-border-color;
+$app-db-view-mail-padding-x: $list-group-item-padding-x * 0.5;
+$app-db-view-mail-padding-y: $list-group-item-padding-y * 0.5;
 
 @mixin app-dropdown-toggle-split {
     padding-left: $btn-padding-x * 1.1;