浏览代码

Fix dashboard menu overlapping (#10044)

* dashboard menu: fix overlap by singlestat and panel link icon

* refactor: navbar z-index

* hide grafana icon in solo panel mode
Alexander Zobnin 8 年之前
父节点
当前提交
8bd3d106a2

+ 4 - 0
public/sass/_variables.scss

@@ -201,6 +201,10 @@ $zindex-tooltip:           1020;
 $zindex-navbar-fixed:      1030;
 $zindex-modal-backdrop:    1040;
 $zindex-modal:             1050;
+$zindex-typeahead:         1060;
+$zindex-sidemenu : $zindex-navbar-fixed + 5;
+
+
 
 // Buttons
 //

+ 1 - 1
public/sass/components/_dropdown.scss

@@ -299,7 +299,7 @@
 // Typeahead
 // ---------
 .typeahead {
-  z-index: 1051;
+  z-index: $zindex-typeahead;
   margin-top: 2px; // give it some space to breathe
 }
 

+ 1 - 1
public/sass/components/_navbar.scss

@@ -5,7 +5,7 @@
   position: relative;
   padding-left: $side-menu-width;
   box-shadow: $navbarShadow;
-  z-index: 1;
+  z-index: $zindex-navbar-fixed;
   background: $navbarBackground;
 }
 

+ 3 - 4
public/sass/components/_sidemenu.scss

@@ -5,8 +5,7 @@
   flex-direction: column;
   width: $side-menu-width;
   background: $navbarBackground;
-  z-index: 10;
-
+  z-index: $zindex-sidemenu;
   a:focus {
     text-decoration: none;
   }
@@ -19,7 +18,7 @@
     height: auto;
     box-shadow: $side-menu-shadow;
     position: relative;
-    z-index: 2;
+    z-index: $zindex-sidemenu;
   }
   .sidemenu__top,
   .sidemenu__bottom {
@@ -56,7 +55,7 @@
       // again by the mouse getting outside the hover space
       left: $side-menu-width - 2px;
       @include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
-      z-index: 1;
+      z-index: $zindex-sidemenu;
     }
   }
 }

+ 3 - 2
public/sass/pages/_dashboard.scss

@@ -19,6 +19,7 @@ div.flot-text {
   &--solo {
     .panel-container {
       border: none;
+      z-index: $zindex-sidemenu + 1
     }
   }
 }
@@ -144,14 +145,14 @@ div.flot-text {
   width: 27px;
   height: 27px;
   top: 0;
-  z-index: 10;
+  z-index: 1;
 
   .fa {
     position: relative;
     top: -4px;
     left: -6px;
     font-size: 75%;
-    z-index: 1000;
+    z-index: 1;
   }
 
   &--info {