From dae5110db08e9b155befc3ea80902a559fdf3371 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sat, 2 Dec 2017 15:35:59 +0100
Subject: [PATCH 1/2] ux: updated dashboard nav

---
 .../features/dashboard/dashnav/dashnav.html   | 12 ++--
 public/sass/_old_responsive.scss              | 66 +++++++++----------
 public/sass/components/_navbar.scss           | 11 ++--
 3 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html
index 260a3783a67..62974fb77dd 100644
--- a/public/app/features/dashboard/dashnav/dashnav.html
+++ b/public/app/features/dashboard/dashnav/dashnav.html
@@ -1,10 +1,12 @@
 <div class="navbar">
 
-	<a class="navbar-page-btn" ng-click="ctrl.showSearch()">
-		<i class="gicon gicon-dashboard"></i>
-		{{ctrl.dashboard.title}}
-		<i class="fa fa-caret-down"></i>
-	</a>
+	<div>
+		<a class="navbar-page-btn" ng-click="ctrl.showSearch()">
+			<i class="gicon gicon-dashboard"></i>
+			{{ctrl.dashboard.title}}
+			<i class="fa fa-caret-down"></i>
+		</a>
+	</div>
 
 	<ul class="nav dash-playlist-actions" ng-if="ctrl.playlistSrv.isPlaying">
 		<li>
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss
index 912ad653f37..72f4332a51e 100644
--- a/public/sass/_old_responsive.scss
+++ b/public/sass/_old_responsive.scss
@@ -1,54 +1,52 @@
 
-.dashnav-back-to-dashboard  {
+.navbar-buttons--zoom {
+  display: none;
+}
+
+.navbar-page-btn {
+  max-width: 200px;
+}
+
+.gf-timepicker-nav-btn {
+  max-width: 120px;
+}
+
+.navbar-buttons--actions {
   display: none;
 }
 
 // Media queries
 // ---------------------
 
-@include media-breakpoint-down(lg) {
+@include media-breakpoint-up(sm) {
   .navbar-page-btn {
-    max-width: 290px;
+    max-width: 250px;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: 200px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .navbar-buttons--actions {
+    display: flex;
+  }
+  .navbar-page-btn {
+    max-width: 325px;
   }
   .gf-timepicker-nav-btn {
     max-width: 240px;
   }
 }
 
-@include media-breakpoint-down(md) {
+@include media-breakpoint-up(lg) {
   .navbar-buttons--zoom {
-    display: none;
+    display: flex;
   }
-}
-
-@include media-breakpoint-down(sm) {
-  body {
-    padding: 0;
-  }
-  .page-dashboard .navbar-page-btn {
-    max-width: 200px;
+  .navbar-page-btn {
+    max-width: none;
   }
   .gf-timepicker-nav-btn {
-    max-width: 120px;
-  }
-  .navbar-buttons--actions {
-    display: none;
-  }
-}
-
-@include media-breakpoint-down(xs) {
-  .page-dashboard .navbar-page-btn {
-    max-width: 250px;
-  }
-}
-
-// form styles
-@include media-breakpoint-up(md) {
-  .page-dashboard .navbar-page-btn {
-    max-width: 280px;
-  }
-
-  .gf-timepicker-nav-btn {
-    max-width: 120px;
+    max-width: none;
   }
 }
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index 05315439ad4..c6416421be4 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -2,12 +2,13 @@
 .navbar {
   position: relative;
   padding-left: $side-menu-width;
-  box-shadow: $navbarShadow;
+  // box-shadow: $navbarShadow;
   z-index: $zindex-navbar-fixed;
-  background: $navbarBackground;
+  // background: $navbarBackground;
   height: $navbarHeight;
   padding-right: $spacer;
   display: flex;
+  flex-grow: 1;
 }
 
 .sidemenu-open {
@@ -77,7 +78,7 @@
 
   display: inline-block;
   font-weight: $btn-font-weight;
-  padding: 5px 10px;
+  padding: 8px 11px;
   line-height: 16px;
   color: $text-muted;
   border: 1px solid #151515;
@@ -93,7 +94,7 @@
   }
 
   &--add-panel {
-    padding: 2px 8px;
+    padding: 5px 10px;
 
     .gicon {
       font-size: 22px;
@@ -101,7 +102,7 @@
   }
 
   &--tight {
-    padding: 6px 4px;
+    padding: 9px 4px;
 
     .fa {
       font-size: 14px;

From a98b0024fcd39aaf75ef6a2f46bc6c9e0838f7e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sat, 2 Dec 2017 15:40:38 +0100
Subject: [PATCH 2/2] tweaks to add panel panels

---
 public/sass/components/_panel_add_panel.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss
index bc275e573f2..be645574342 100644
--- a/public/sass/components/_panel_add_panel.scss
+++ b/public/sass/components/_panel_add_panel.scss
@@ -27,7 +27,7 @@
 }
 
 .add-panel__items {
-  padding: 3px 0;
+  padding: 3px 8px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -41,7 +41,7 @@
   background: $card-background;
   box-shadow: $card-shadow;
 
-  border: $panel-border;
+  border-radius: 3px;
   padding: $spacer/3 $spacer;
   width: 31%;
   height: 60px;