ux: updated dashboard nav

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>

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: 240px;
-  }
-}
-
-@include media-breakpoint-down(md) {
-  .navbar-buttons--zoom {
-    display: none;
+    max-width: 200px;
   }
 }
 
-@include media-breakpoint-down(sm) {
-  body {
-    padding: 0;
+@include media-breakpoint-up(md) {
+  .navbar-buttons--actions {
+    display: flex;
   }
-  .page-dashboard .navbar-page-btn {
-    max-width: 200px;
+  .navbar-page-btn {
+    max-width: 325px;
   }
   .gf-timepicker-nav-btn {
-    max-width: 120px;
-  }
-  .navbar-buttons--actions {
-    display: none;
+    max-width: 240px;
   }
 }
 
-@include media-breakpoint-down(xs) {
-  .page-dashboard .navbar-page-btn {
-    max-width: 250px;
+@include media-breakpoint-up(lg) {
+  .navbar-buttons--zoom {
+    display: flex;
   }
-}
-
-// form styles
-@include media-breakpoint-up(md) {
-  .page-dashboard .navbar-page-btn {
-    max-width: 280px;
+  .navbar-page-btn {
+    max-width: none;
   }
-
   .gf-timepicker-nav-btn {
-    max-width: 120px;
+    max-width: none;
   }
 }

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;