ux(): clean / simplify markup and css for navbar button

public/app/core/components/navbar/navbar.html

@@ -1,19 +1,16 @@
 <div class="navbar-inner">
-	<div class="top-nav-btn top-nav-menu-btn">
-		<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
-			<span class="top-nav-logo-background">
-				<img class="logo-icon" src="public/img/grafana_icon.svg"></img>
-			</span>
-			<i class="icon-gf icon-gf-grafana_wordmark"></i>
-			<i class="fa fa-caret-down"></i>
-		</a>
-	</div>
+	<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
+		<span class="navbar-brand-btn-background">
+			<img src="public/img/grafana_icon.svg"></img>
+		</span>
+		<i class="icon-gf icon-gf-grafana_wordmark"></i>
+		<i class="fa fa-caret-down"></i>
+	</a>
 
-
-	<div ng-if="ctrl.title">
-		<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}">
-		</nav-button>
-	</div>
+	<a href="{{::ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">
+		<i class="{{::ctrl.icon}}"></i>
+		{{::ctrl.title}}
+	</a>
 
 	<div ng-transclude></div>
 </div>

public/app/core/components/navbar/navbar.ts

@@ -30,28 +30,5 @@ export function navbarDirective() {
   };
 }
 
-var navButtonTemplate = `
-<div class="top-nav-btn dashnav-dashboards-btn">
-  <a href="{{::titleUrl}}">
-    <i class="{{::icon}}"></i>
-    <span class="dashboard-title">{{::title}}</span>
-  </a>
-</div>
-`;
-
-function navButton() {
-  return {
-    restrict: 'E',
-    template: navButtonTemplate,
-    scope: {
-      title: "@",
-      titleUrl: "@",
-    },
-    link: function(scope, elem, attrs, ctrl) {
-      scope.icon = attrs.icon;
-    }
-  };
-}
-
 coreModule.directive('navbar', navbarDirective);
 coreModule.directive('navButton', navButton);

public/app/features/dashboard/dashnav/dashnav.html

@@ -1,12 +1,10 @@
 <navbar>
 
-<div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
-	<a class="pointer" ng-click="openSearch()">
-		<i class="icon-gf icon-gf-dashboard"></i>
-		<span class="dashboard-title">{{dashboard.title}}</span>
-		<i class="fa fa-caret-down"></i>
-	</a>
-</div>
+<a class="pointer navbar-page-btn" ng-show="!dashboardMeta.isSnapshot" ng-click="openSearch()">
+	<i class="icon-gf icon-gf-dashboard"></i>
+	<span>{{dashboard.title}}</span>
+	<i class="fa fa-caret-down"></i>
+</a>
 
 <div class="top-nav-btn dashnav-dashboards-btn" ng-if="dashboardMeta.isSnapshot">
 	<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom" ng-click="openSearch()">

public/sass/_old_responsive.scss

@@ -17,7 +17,7 @@
   body {
     padding: 0;
   }
-  .dashnav-dashboards-btn a {
+  .page-dashboard .navbar-page-btn {
     max-width: 200px;
   }
   .gf-timepicker-nav-btn {
@@ -34,7 +34,7 @@
 
 // form styles
 @include media-breakpoint-up(md) {
-  .dashnav-dashboards-btn a {
+  .page-dashboard .navbar-page-btn {
     max-width: 180px;
   }
   .gf-timepicker-nav-btn {
@@ -51,7 +51,7 @@
 }
 
 @include media-breakpoint-up(lg) {
-  .dashnav-dashboards-btn a {
+  .page-dashboard .navbar-page-btn {
     max-width: 290px;
   }
   .gf-timepicker-nav-btn {

public/sass/_variables.scss

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

public/sass/components/_dashboard.scss

@@ -58,7 +58,7 @@
 
 .row-open {
   margin-top: 5px;
-  left: -28px;
+  left: -30px;
   position: absolute;
   z-index: 100;
   transition: .10s left;

public/sass/components/_navbar.scss

@@ -56,52 +56,30 @@
   background-color: $navbarLinkBackgroundActive;
 }
 
-
-.fa.top-nav-breadcrumb-icon {
-  margin: 18px 0 6px 5px;
-  float: left;
-  font-size: 120%;
-  color: $text-color;
-}
-
-.top-nav-btn {
+.navbar-brand-btn {
   display: block;
   position: relative;
   float: left;
   margin: 0;
-  font-size: 1.4em;
   border-right: 1px solid $tight-form-border;
+  background-color: $navbarButtonBackground;
+  padding: 0.6rem 1.0rem 0.5rem 1rem;
 
   .fa-caret-down {
-    font-size: 55%;
-    position: absolute;
-    right: 8px;
-    top: 23px;
-    margin-right: 2px;
+    font-size: 70%;
   }
 
-  a {
-    color: darken($link-color, 5%);
-    background-color: $navbarButtonBackground;
-    display: inline-block;
-    &:hover {
-      background: $navbarButtonBackgroundHighlight;
-      color: $link-color;
-      // border-bottom: 1px solid $blue;
-    }
+  &:hover {
+    background: $navbarButtonBackgroundHighlight;
   }
-}
 
-.top-nav-menu-btn {
-  a {
-     padding: 7px 20px 6px 13px;
-  }
   img {
     width: 30px;
     position: relative;
     top: -2px;
   }
-  .top-nav-logo-background {
+
+  .navbar-brand-btn-background {
     display: inline-block;
     border: 1px solid $body-bg;
     padding: 4px;
@@ -110,6 +88,7 @@
     width: 40px;
     height: 40px;
   }
+
   .icon-gf-grafana_wordmark {
     font-size: 21px;
     position: relative;
@@ -119,13 +98,28 @@
   }
 }
 
-.dashnav-dashboards-btn {
-  a {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    display: block;
-    padding: 11px 17px 12px 13px;
+.navbar-page-btn {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  float: left;
+  display: block;
+  margin: 0;
+  font-size: 1.4em;
+  border-right: 1px solid $tight-form-border;
+  color: darken($link-color, 5%);
+  background-color: $navbarButtonBackground;
+  font-size: $font-size-lg;
+  padding: 1rem 0.8rem;
+
+  &:hover {
+    background: $navbarButtonBackgroundHighlight;
+    color: $link-color;
+  }
+
+  .fa-caret-down {
+    font-size: 60%;
+    padding-left: 0.2rem;
   }
 
   .fa-th-large {
@@ -141,32 +135,3 @@
   }
 }
 
-.dashboard-title {
-  padding: 0 0.4rem 0 0.5rem;
-  font-size: $font-size-lg;
-}
-
-.top-nav-icon {
-  margin: 5px 0px 0 11px;
-  line-height: 41px;
-  float: left;
-}
-
-.top-nav-section {
-  display: block;
-  float: left;
-  padding: 19px 9px 8px 0;
-  font-weight: bold;
-  i {
-    padding-left: 8px;
-  }
-}
-
-.top-nav-title {
-  display: block;
-  float: left;
-  font-size: 17px;
-  padding: 18px 10px 10px 13px;
-  color: $link-color;
-}
-

public/sass/components/_sidemenu.scss

@@ -30,16 +30,15 @@
     min-height: calc(100% - 54px);
   }
   .dashboard-container {
-    padding-left: $side-menu-width;
+    padding-left: $side-menu-width + 0.2rem;
   }
   .page-container {
     margin-left: $side-menu-width;
   }
-  .top-nav-menu-btn {
-    a {
-      background-color: $page-bg;
-      width: $side-menu-width;
-    }
+  .navbar-brand-btn {
+    background-color: $page-bg;
+    width: $side-menu-width;
+
     .icon-gf-grafana_wordmark  {
       display: inline-block;
     }
@@ -47,9 +46,6 @@
       display: none;
     }
   }
-  .sidemenu-org {
-    box-shadow: none;
-  }
   .search-container {
     left: auto;
   }
@@ -176,7 +172,7 @@
 .sidemenu .fa-caret-right {
   position: absolute;
   top: 38%;
-  right: 25px;
+  right: 6px;
   font-size: 14px;
   color: $link-color;
 }