ux: fixed navbar and sidemenu z-index issue and improved responsive rules

pkg/cmd/grafana-server/main.go

@@ -30,7 +30,7 @@ import (
 	_ "github.com/grafana/grafana/pkg/tsdb/testdata"
 	_ "github.com/grafana/grafana/pkg/tsdb/testdata"
 )
 )
 
 
-var version = "4.6.0"
+var version = "5.0.0"
 var commit = "NA"
 var commit = "NA"
 var buildstamp string
 var buildstamp string
 var build_date string
 var build_date string

public/sass/components/_navbar.scss

 
 
 .navbar {
 .navbar {
   position: relative;
   position: relative;
-  padding-left: $side-menu-width;
+  margin-left: 40px;
   // box-shadow: $navbarShadow;
   // box-shadow: $navbarShadow;
   z-index: $zindex-navbar-fixed;
   z-index: $zindex-navbar-fixed;
   // background: $navbarBackground;
   // background: $navbarBackground;
@@ -11,12 +11,6 @@
   flex-grow: 1;
   flex-grow: 1;
 }
 }
 
 
-.sidemenu-open {
-  .navbar {
-    padding-left: 15px;
-  }
-}
-
 .navbar-page-btn {
 .navbar-page-btn {
   text-overflow: ellipsis;
   text-overflow: ellipsis;
   overflow: hidden;
   overflow: hidden;
@@ -44,6 +38,8 @@
     line-height: 8px;
     line-height: 8px;
     opacity: 0.75;
     opacity: 0.75;
     margin-right: 8px;
     margin-right: 8px;
+    // icon hidden on smaller screens
+    display: none;
   }
   }
 }
 }
 
 
@@ -111,3 +107,22 @@
     }
     }
   }
   }
 }
 }
+
+@include media-breakpoint-up(sm) {
+  .navbar {
+    margin-left: 50px;
+  }
+
+  .sidemenu-open {
+    .navbar {
+      margin-left: 15px;
+    }
+  }
+
+  .navbar-page-btn {
+    .gicon {
+      display: inline-block;
+    }
+  }
+}
+

public/sass/components/_sidemenu.scss

@@ -16,7 +16,6 @@
   .sidemenu__close {
   .sidemenu__close {
     display: none;
     display: none;
   }
   }
-
 }
 }
 
 
 // body class that hides sidemenu
 // body class that hides sidemenu
@@ -191,12 +190,6 @@ li.sidemenu-org-switcher {
 }
 }
 
 
 @include media-breakpoint-down(xs) {
 @include media-breakpoint-down(xs) {
-  .sidemenu-open {
-    .navbar {
-      padding-left: 60px !important;
-    }
-  }
-
   .sidemenu-open--xs {
   .sidemenu-open--xs {
     .sidemenu {
     .sidemenu {
       width: 100%;
       width: 100%;
@@ -227,7 +220,7 @@ li.sidemenu-org-switcher {
     }
     }
 
 
     .sidemenu__logo_small_breakpoint {
     .sidemenu__logo_small_breakpoint {
-      padding: 12px 10px 26px;
+      padding: 16px 10px 26px;
       display: flex;
       display: flex;
       flex-direction: row;
       flex-direction: row;
       justify-content: space-between;
       justify-content: space-between;