Fixed navbar responsiveness (#3510)

* Fixed navbar responsiveness * Adjustments so that logo should never hide
getredash · Feb 28, 2019 · 6e3b9c2 · 6e3b9c2
1 parent 34e03b0
commit 6e3b9c2
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 28 deletions.
diff --git a/client/app/assets/less/inc/navbar.less b/client/app/assets/less/inc/navbar.less
@@ -1,6 +1,5 @@
 a.navbar-brand {
   padding: 5px 5px 0px 0px;
-  margin-left: 0px !important;
 }
 
 .navbar .fa {

diff --git a/client/app/assets/less/redash/query.less b/client/app/assets/less/redash/query.less
@@ -652,10 +652,6 @@ nav .rg-bottom {
     }
   }
 
-  a.navbar-brand {
-    display: none;
-  }
-
   .datasource-small {
     visibility: visible;
   }
@@ -666,10 +662,6 @@ nav .rg-bottom {
     display: none;
   }
 
-  a.navbar-brand {
-    display: block;
-  }
-
   .filter-container {
     padding-right: 0;
   }

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
@@ -636,11 +636,6 @@ body {
   background: #fff;
   margin-bottom: 10px;
 
-  a.navbar-brand {
-    padding: 4px 0px 0px 0px;
-    margin-left: -3px !important;
-  }
-
   .btn-group.open .dropdown-toggle {
     -webkit-box-shadow: none;
     box-shadow: none;
@@ -651,6 +646,17 @@ body {
   }
 }
 
+.navbar-link-ANGULAR_REMOVE_ME {
+  line-height: 18px;
+  padding: 10px 15px;
+  display: block;
+
+  @media (min-width: 768px) {
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+}
+
 .navbar-link-ANGULAR_REMOVE_ME,
 .navbar-default .navbar-nav > li > a {
   color: #000;
@@ -671,12 +677,6 @@ body {
   //border-radius: 0;
 }
 
-.navbar-link-ANGULAR_REMOVE_ME {
-  line-height: 18px;
-  padding: 16px 15px;
-  display: block;
-}
-
 .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
   background-color: fade(@redash-gray, 15%);
   color: #111;
@@ -725,11 +725,10 @@ body {
 
 .navbar-brand {
   position: absolute;
-  left: 49%;
-  margin-left: -50px !important;
+  left: 50%;
+  margin-left: -25px !important; // center
   display: block;
   zoom: 0.9;
-  margin-top: 3px;
 }
 
 .va-top {
@@ -849,6 +848,7 @@ text.slicetext {
 
   .navbar-brand {
     left: 2%;
+    margin-left: 0 !important;
   }
 
   //Fix navbar collapse
@@ -889,13 +889,28 @@ text.slicetext {
   }
 }
 
-@media (min-width: 768px) and (max-width: 850px) {
-  .menu-search {
-    width: 175px;
+@media (min-width: 768px) {
+  @media (max-width: 880px) {
+    .navbar-link-ANGULAR_REMOVE_ME,
+    .navbar-default .navbar-nav > li > a,
+    .navbar-form {
+      padding-left: 10px !important;
+      padding-right: 10px !important;
+    }
+
+    a.navbar-brand {
+      margin-left: -15px !important;
+    }
   }
 
-  a.navbar-brand {
-    display: none !important;
+  @media (max-width: 810px) {
+    .menu-search {
+      width: 175px;
+    }
+
+    a.navbar-brand {
+      margin-left: 13px !important;
+    }
   }
 }