Explorar el Código

ux(): minor tweaks

Torkel Ödegaard hace 9 años
padre
commit
ac1648c946

+ 2 - 0
public/sass/_variables.scss

@@ -220,3 +220,5 @@ $btn-padding-y-lg:               .75rem !default;
 
 
 $btn-border-radius:              1px;
 $btn-border-radius:              1px;
 
 
+// sidemenu
+$side-menu-width:  15rem;

+ 5 - 9
public/sass/components/_sidemenu.scss

@@ -1,5 +1,3 @@
-$sideMenuWidth:  220px;
-
 .sidemenu-canvas {
 .sidemenu-canvas {
   position: relative;
   position: relative;
 }
 }
@@ -8,7 +6,7 @@ $sideMenuWidth:  220px;
   position: absolute;
   position: absolute;
   top: 52px;
   top: 52px;
   left: 0;
   left: 0;
-  width: $sideMenuWidth;
+  width: $side-menu-width;
   background-color: $body-bg;
   background-color: $body-bg;
   z-index: 101;
   z-index: 101;
   transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
@@ -32,17 +30,15 @@ $sideMenuWidth:  220px;
     min-height: calc(100% - 54px);
     min-height: calc(100% - 54px);
   }
   }
   .dashboard-container {
   .dashboard-container {
-    padding-left: $sideMenuWidth;
+    padding-left: $side-menu-width;
   }
   }
   .page-container {
   .page-container {
-    margin-left: 195px;
-    padding-left: 77px;
+    margin-left: $side-menu-width;
   }
   }
   .top-nav-menu-btn {
   .top-nav-menu-btn {
     a {
     a {
       background-color: $page-bg;
       background-color: $page-bg;
-      padding-right: 67px;
-      padding-left: 22px;
+      width: $side-menu-width;
     }
     }
     .icon-gf-grafana_wordmark  {
     .icon-gf-grafana_wordmark  {
       display: inline-block;
       display: inline-block;
@@ -71,7 +67,7 @@ $sideMenuWidth:  220px;
       .dropdown-menu {
       .dropdown-menu {
         display: block;
         display: block;
         top: 0px;
         top: 0px;
-        left: $sideMenuWidth;
+        left: $side-menu-width;
         background-color: $body-bg;
         background-color: $body-bg;
       }
       }
     }
     }

+ 3 - 7
public/sass/layout/_page.scss

@@ -4,15 +4,11 @@
 }
 }
 
 
 .dashboard-container {
 .dashboard-container {
-  padding: 5px 5px;
+  padding: $spacer / 2;
   width: 100%;
   width: 100%;
-  box-sizing: border-box;
 }
 }
 
 
 .main-view {
 .main-view {
-  // background-image: url(/img/grafana_pattern.png);
-  // background-position: 100% -550px;
-  // background-repeat: no-repeat;
   height: 100%;
   height: 100%;
 }
 }
 
 
@@ -33,7 +29,7 @@
 }
 }
 
 
 .page-header {
 .page-header {
-  padding: $spacer 0;
+  padding: $spacer 0 $spacer/2 0;
 
 
   display: flex;
   display: flex;
   justify-content: flex-end;
   justify-content: flex-end;
@@ -59,7 +55,7 @@
 .page-heading {
 .page-heading {
   font-size: 1.25rem;
   font-size: 1.25rem;
   margin-top: 0;
   margin-top: 0;
-  margin-bottom: $spacer * 0.6;
+  margin-bottom: $spacer * 0.7;
 }
 }
 
 
 .admin-page {
 .admin-page {