fix css gallery bug

also reduce the gallery margin/padding a bit. and refactor a minor thing (turn the navbar size into an sass var)
deltachat · Mar 10, 2020 · eadd487 · eadd487
1 parent 53b54cf
commit eadd487
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 10 deletions.
diff --git a/scss/_global.scss b/scss/_global.scss
@@ -18,8 +18,8 @@ body {
 }
 
 .window {
-  height: calc(100vh - 50px);
-  margin-top: 50px;
+  height: $content-height;
+  margin-top: $nav-bar-height;
   display: flex;
   flex-direction: column;
   flex-grow: 1;

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -5,6 +5,8 @@ $roboto: Roboto, $emojifonts, 'Helvetica Neue', Arial, Helvetica, NotoMono,
 $roboto-light: Roboto-Light, $emojifonts, 'Helvetica Neue', Arial, Helvetica,
   NotoMono, sans-serif;
 
+$nav-bar-height: 50px;
+$content-height: calc(100vh - #{$nav-bar-height});
 /* Theming Colors */
 
 // Belongs to stuff we plan to remove / change anyway

diff --git a/scss/chat/_chat-list.scss b/scss/chat/_chat-list.scss
@@ -1,13 +1,13 @@
 .chat-list {
   width: 30%;
-  height: calc(100vh - 50px);
+  height: $content-height;
   float: left;
   overflow-y: auto;
   border-right: var(--outlineProperties);
   box-shadow: 0 0 4px 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0),
     0 1px 1px rgba(16, 22, 26, 0.2);
   user-select: none;
-  margin-top: 50px;
+  margin-top: $nav-bar-height;
 }
 
 .chatlist-item-skeleton {

diff --git a/scss/gallery/_media.scss b/scss/gallery/_media.scss
@@ -1,13 +1,15 @@
+$tab-height: 46px;
+
 .media-view {
   width: 70%;
   background-color: var(--galleryBg);
   float: right;
-  padding: 0 10px;
-  margin-top: 50px;
+  padding-left: 10px;
+  margin-top: $nav-bar-height;
 
   & .gallery {
     overflow: scroll;
-    padding-top: 20px;
+    height: calc(100vh - #{$tab-height} - #{$nav-bar-height});
 
     & > .item {
       float: left;
@@ -19,4 +21,8 @@
     text-align: center;
     margin-top: 5rem;
   }
+
+  .bp3-tab-panel {
+    margin-top: 0;
+  }
 }
diff --git a/scss/main_screen/_main_screen.scss b/scss/main_screen/_main_screen.scss
@@ -21,7 +21,7 @@
   .no-chat-selected-screen {
     width: 70%;
     float: right;
-    height: calc(100vh - 50px);
+    height: $content-height;
     margin-top: 50px;
     text-align: center;
   }

diff --git a/scss/message/_message-list.scss b/scss/message/_message-list.scss
@@ -3,8 +3,8 @@
   float: right;
   display: grid;
   grid-template-columns: auto;
-  height: calc(100vh - 50px);
-  margin-top: 50px;
+  height: $content-height;
+  margin-top: $nav-bar-height;
   background-image: var(--chatViewBgImgPath);
   background-size: cover;
   background-color: var(--chatViewBg);