From add641d0c9f7ae3b8e14dd2470544e6de3059024 Mon Sep 17 00:00:00 2001
From: Steve Howell <showell@zulip.com>
Date: Wed, 27 May 2020 20:21:32 +0000
Subject: [PATCH] css: Use vars for header-size related values.

The header is 40px tall, with a 10px gutter
below it, which means the top of our sidebars
are 50px from the top of the viewport.

Now all the places that share these values
use `$header_right` and related values.

This is pretty easy to test out by just doubling
or tripling the two numbers at the top of the
file.

The section for `@media (max-width: 500px)` seems
to have its own smaller values for things like
the `height` of `.header`, so I left it alone.
---
 static/styles/zulip.scss | 65 ++++++++++++++++++++++++++++++----------
 1 file changed, 49 insertions(+), 16 deletions(-)

diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss
index 90a1ba844e..36d46a12c8 100644
--- a/static/styles/zulip.scss
+++ b/static/styles/zulip.scss
@@ -1,3 +1,23 @@
+/*
+This is the header, aka the navbar.
+*/
+$header_height: 40px;
+
+/*
+We have a 10px gutter below the header,
+which often needs to be respected by both
+the elements above it and below it on
+the y-axis, due to absolute positioning.
+*/
+$header_padding_bottom: 10px;
+
+/*
+Our sidebars (and anything that top-align
+with them such as floating recipient bars)
+go beneath the header.
+*/
+$sidebar_top: calc($header_height + $header_padding_bottom);
+
 body,
 html {
     width: 100%;
@@ -210,8 +230,8 @@ p.n-margin {
     position: fixed;
     z-index: 102; /* Needs to be higher than .alert-bar-container */
     width: 100%;
-    height: 40px;
-    padding-bottom: 10px;
+    height: $header_height;
+    padding-bottom: $header_padding_bottom;
     background-color: inherit;
 }
 
@@ -322,7 +342,7 @@ p.n-margin {
     .column-left .left-sidebar,
     .column-right .right-sidebar {
         position: fixed;
-        margin-top: 50px;
+        margin-top: $sidebar_top;
         z-index: 100;
     }
 
@@ -1440,14 +1460,14 @@ div.focused_table {
     text-overflow: ellipsis;
     float: left;
     letter-spacing: normal;
-    height: 40px;
+    height: $header_height;
     #tab_list {
         display: flex;
         align-content: flex-start;
         flex-wrap: nowrap;
         margin: 0px 0px 0px 0px;
-        height: 40px;
-        line-height: 40px;
+        height: $header_height;
+        line-height: $header_height;
         font-size: 16px;
         border: none;
         white-space: nowrap;
@@ -1598,7 +1618,7 @@ div.focused_table {
 #searchbox,
 #searchbox_legacy {
     width: 100%;
-    height: 40px;
+    height: $header_height;
 
     .navbar-search:not(.expanded) {
         display: none;
@@ -1637,7 +1657,7 @@ div.focused_table {
     #search_query {
         width: 100%;
         font-size: 16px;
-        height: 40px;
+        height: $header_height;
         padding: 0px;
         padding-left: 5px;
         padding-right: 20px;
@@ -1645,7 +1665,7 @@ div.focused_table {
         border-radius: 0px;
         font-family: 'Source Sans Pro';
         font-weight: 300;
-        line-height: 40px;
+        line-height: $header_height;
     }
 
     #search_arrows:focus {
@@ -1726,8 +1746,8 @@ div.focused_table {
 #tab_bar_underpadding {
     position: absolute;
     width: 100%;
-    top: 40px;
-    height: 10px;
+    top: $header_height;
+    height: $header_padding_bottom;
     z-index: 99;
 }
 
@@ -1927,7 +1947,7 @@ div.floating_recipient {
 }
 
 #floating_recipient_bar {
-    top: 50px;
+    top: $sidebar_top;
 }
 
 #bottom_whitespace {
@@ -2476,8 +2496,16 @@ select.inline_select_topic_edit {
                 background-color: hsla(0, 0%, 100%, 1.0);
                 box-shadow: 0px -2px 3px 0px hsla(0, 0%, 0%, 0.1);
                 border-left: 1px solid hsl(0, 0%, 87%);
-                margin-top: 40px;
-                padding: 10px 15px 0px 15px;
+
+                // We use both margin and padding to
+                // hide little artifacts from showing up in
+                // the gutter below the navbar.
+                margin-top: $header_height;
+                padding-top: $header_padding_bottom;
+
+                padding-bottom: 0px;
+                padding-left: 15px;
+                padding-right: 15px;
                 height: 100%;
                 right: 0px;
             }
@@ -2548,8 +2576,13 @@ select.inline_select_topic_edit {
                 background-color: hsla(0, 0%, 100%, 1.0);
                 box-shadow: 0px 2px 3px 0px hsla(0, 0%, 0%, 0.1);
                 border-right: 1px solid hsl(0, 0%, 87%);
-                margin-top: 40px;
-                padding-top: 10px;
+
+                // We use both margin and padding to
+                // hide little artifacts from showing up in
+                // the gutter below the navbar.
+                margin-top: $header_height;
+                padding-top: $header_padding_bottom;
+
                 height: 100%;
                 padding-left: 10px;
                 width: 250px;