ux(navbar): worked on responsive breakpoints for navbar

public/app/core/directives/body_class.js

@@ -12,6 +12,14 @@ function (_, $, coreModule) {
 
         var lastHideControlsVal;
 
+        $scope.onAppEvent('panel-fullscreen-enter', function() {
+          elem.toggleClass('panel-in-fullscreen', true);
+        });
+
+        $scope.onAppEvent('panel-fullscreen-exit', function() {
+          elem.toggleClass('panel-in-fullscreen', false);
+        });
+
         $scope.$watch('dashboard.hideControls', function() {
           if (!$scope.dashboard) {
             return;

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

@@ -1,6 +1,6 @@
 <navbar>
 
-<div class="top-nav-btn top-nav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
+<div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
 	<a class="pointer" ng-click="openSearch()">
 		<i class="fa fa-th-large"></i>
 		<span class="dashboard-title">{{dashboard.title}}</span>
@@ -8,7 +8,7 @@
 	</a>
 </div>
 
-<div class="top-nav-btn top-nav-dashboards-btn" ng-if="dashboardMeta.isSnapshot">
+<div class="top-nav-btn dashnav-dashboards-btn" ng-if="dashboardMeta.isSnapshot">
 	<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom" ng-click="openSearch()">
 		<i class="icon-gf icon-gf-snapshot"></i>
 		<span class="dashboard-title">
@@ -18,7 +18,7 @@
 	</a>
 </div>
 
-<ul class="nav pull-left top-nav-dash-actions">
+<ul class="nav pull-left dashnav-action-icons">
 	<li ng-show="dashboardMeta.canStar">
 		<a class="pointer" ng-click="starDashboard()">
 			<i class="fa" ng-class="{'fa-star-o': !dashboardMeta.isStarred, 'fa-star': dashboardMeta.isStarred}" style="color: orange;"></i>
@@ -70,7 +70,7 @@
 </ul>
 
 <ul class="nav pull-right">
-	<li ng-show="dashboard.meta.fullscreen" class="back-to-dashboard-link">
+	<li ng-show="dashboard.meta.fullscreen" class="dashnav-back-to-dashboard">
 		<a ng-click="exitFullscreen()">
 			Back to dashboard
 		</a>

public/app/features/dashboard/timepicker/timepicker.html

@@ -1,13 +1,13 @@
 <ul class="nav gf-timepicker-nav">
 
-	<li class="grafana-menu-zoom-out">
+	<li class="dashnav-zoom-out">
 		<a class='small' ng-click='ctrl.zoom(2)'>
 			Zoom Out
 		</a>
 	</li>
 
-	<li ng-class="{'gf-timepicker-open': ctrl.isOpen}">
+	<li>
-		<a bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()">
+		<a bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()" class="gf-timepicker-nav-btn">
 			<i class="fa fa-clock-o"></i>
 			<span ng-bind="ctrl.rangeString"></span>
 			<span ng-show="ctrl.isUtc" class="gf-timepicker-utc">
@@ -21,7 +21,7 @@
 		</a>
 	</li>
 
-	<li class="grafana-menu-refresh">
+	<li class="dashnav-refresh-action">
 		<a ng-click="ctrl.timeSrv.refreshDashboard()">
 			<i class="fa fa-refresh"></i>
 		</a>

public/less/grafana-responsive.less

@@ -22,36 +22,94 @@
 @fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
 @fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);
 
+@screen-xs: 480px;
+@screen-sm: 768px;
+@screen-md: 992px;
+@screen-lg: 1200px;
+
+@screen-xs-max: (@screen-sm - 1);
+@screen-sm-max: (@screen-md - 1);
+@screen-md-max: (@screen-lg - 1);
+
+@breakpoint-xs-up:         ~"only screen and (min-width: @{screen-xs})";
+@breakpoint-xs:            ~"only screen and (min-width: @{screen-xs}) and (max-width: @{screen-xs-max})";
+@breakpoint-sm-up:         ~"only screen and (min-width: @{screen-sm})";
+@breakpoint-sm:            ~"only screen and (min-width: @{screen-sm}) and (max-width: @{screen-sm-max})";
+@breakpoint-md-up:         ~"only screen and (min-width: @{screen-md})";
+@breakpoint-md:            ~"only screen and (min-width: @{screen-md}) and (max-width: @{screen-md-max})";
+@breakpoint-lg:            ~"only screen and (min-width: @{screen-lg})";
+
+.dashnav-back-to-dashboard  {
+  display: none;
+}
 
 // Media queries
 // ---------------------
-@media (max-width: 767px) {
+@media @breakpoint-xs {
   div.panel {
     width: 100% !important;
     padding: 0px !important;
   }
+  .panel-margin {
+    margin-right: 0;
+    margin-left: 0;
+  }
   body {
     padding: 0;
   }
+  .dashnav-dashboards-btn a {
+    max-width: 200px;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: 120px;
+  }
+  .dashnav-zoom-out,
+  .dashnav-action-icons {
+    display: none;
+  }
 }
 
-.back-to-dashboard-link  {
+@media @breakpoint-sm-up {
-  display: none;
+  .dashnav-dashboards-btn a {
-}
+    max-width: 200px;
-
-@media (min-width: 990px) {
-  .back-to-dashboard-link  {
-    display: block;
   }
-  .sidemenu-open {
+  .gf-timepicker-nav-btn {
-    .back-to-dashboard-link  {
+    max-width: 120px;
+  }
+  .panel-in-fullscreen {
+    .dashnav-action-icons {
       display: none;
     }
+
+    .dashnav-back-to-dashboard  {
+      display: block;
+    }
   }
 }
 
-@media (min-width: 1210px) {
+@media @breakpoint-md-up {
-  .back-to-dashboard-link  {
+  .dashnav-dashboards-btn a {
+    max-width: 290px;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: 250px;
+  }
+  .dashnav-zoom-out {
     display: block;
   }
 }
+
+@media @breakpoint-lg {
+  .panel-in-fullscreen {
+    .dashnav-action-icons {
+      display: block;
+    }
+  }
+
+  .dashnav-dashboards-btn a {
+    max-width: none;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: none;
+  }
+}

public/less/grafana.less

@@ -45,11 +45,11 @@
 }
 
 .playlist-active {
-  .grafana-menu-zoom-out,
   .add-row-panel-hint,
-  .grafana-menu-refresh,
+  .dashnav-refresh-action,
-  .top-nav-dash-actions {
+  .dashnav-zoom-out,
-    display:none;
+  .dashnav-action-icons {
+    display: none;
   }
 
   .grafana-menu-stop-playlist {

public/less/navbar.less

@@ -10,7 +10,7 @@
 }
 
 .navbar .nav>li>a {
-  padding: 17px 15px 13px;
+  padding: 17px 13px 13px;
   .fa { font-size: 115%; }
 }
 
@@ -50,7 +50,7 @@
 
 .top-nav-menu-btn {
   a {
-    padding: 6px 20px 6px 13px;
+     padding: 6px 20px 6px 13px;
   }
   img {
     width: 30px;
@@ -74,9 +74,13 @@
   }
 }
 
-.top-nav-dashboards-btn {
+.dashnav-dashboards-btn {
   a {
-    padding: 16px 17px 14px 13px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: block;
+    padding: 16px 17px 15px 13px;
   }
 
   .fa-th-large {

public/less/timepicker.less

@@ -6,6 +6,12 @@
   font-weight: normal;
 }
 
+.gf-timepicker-nav-btn {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .gf-timepicker-dropdown {
   margin: -5px -10px 10px 5px;
   padding: 10px 20px;
@@ -14,10 +20,6 @@
   .box-shadow(@navbarDropdownShadow);
 }
 
-li.gf-timepicker-open a {
-  background-color: @grafanaPanelBackground;
-}
-
 .gf-timepicker-absolute-section {
   width: 300px;
   float: left;

public/vendor/bootstrap/less/navbar.less

@@ -22,10 +22,8 @@
   min-height: @navbarHeight;
   padding-left:  20px;
   padding-right: 20px;
-  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
+  background-color: @navbarBackground;
   border: 1px solid @navbarBorder;
-  .border-radius(@baseBorderRadius);
-  .box-shadow(0 1px 4px rgba(0,0,0,.065));
 
   // Prevent floats from breaking the navbar
   .clearfix();
@@ -37,199 +35,20 @@
   width: auto;
 }
 
-// Override the default collapsed state
-.nav-collapse.collapse {
-  height: auto;
-  overflow: visible;
-}
-
-
-// Brand: website or project name
-// -------------------------
-.navbar .brand {
-  float: left;
-  display: block;
-  // Vertically center the text given @navbarHeight
-  padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
-  margin-left: -20px; // negative indent to left-align the text down the page
-  font-size: 20px;
-  font-weight: 200;
-  color: @navbarBrandColor;
-  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
-  &:hover,
-  &:focus {
-    text-decoration: none;
-  }
-}
-
-// Plain text in topbar
-// -------------------------
-.navbar-text {
-  margin-bottom: 0;
-  line-height: @navbarHeight;
-  color: @navbarText;
-}
-
-// Janky solution for now to account for links outside the .nav
-// -------------------------
-.navbar-link {
-  color: @navbarLinkColor;
-  &:hover,
-  &:focus {
-    color: @navbarLinkColorHover;
-  }
-}
-
-// Dividers in navbar
-// -------------------------
-.navbar .divider-vertical {
-  height: @navbarHeight;
-  margin: 0 9px;
-  border-left: 1px solid @navbarBackground;
-  border-right: 1px solid @navbarBackgroundHighlight;
-}
-
-// Buttons in navbar
-// -------------------------
-.navbar .btn,
-.navbar .btn-group {
-  .navbarVerticalAlign(30px); // Vertically center in navbar
-}
-.navbar .btn-group .btn,
-.navbar .input-prepend .btn,
-.navbar .input-append .btn,
-.navbar .input-prepend .btn-group,
-.navbar .input-append .btn-group {
-  margin-top: 0; // then undo the margin here so we don't accidentally double it
-}
-
-// Navbar forms
-// -------------------------
-.navbar-form {
-  margin-bottom: 0; // remove default bottom margin
-  .clearfix();
-  input,
-  select,
-  .radio,
-  .checkbox {
-    .navbarVerticalAlign(30px); // Vertically center in navbar
-  }
-  input,
-  select,
-  .btn {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-  input[type="image"],
-  input[type="checkbox"],
-  input[type="radio"] {
-    margin-top: 3px;
-  }
-  .input-append,
-  .input-prepend {
-    margin-top: 5px;
-    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
-    input {
-      margin-top: 0; // remove the margin on top since it's on the parent
-    }
-  }
-}
-
-// Navbar search
-// -------------------------
-.navbar-search {
-  position: relative;
-  float: left;
-  .navbarVerticalAlign(30px); // Vertically center in navbar
-  margin-bottom: 0;
-  .search-query {
-    margin-bottom: 0;
-    padding: 4px 14px;
-    #font > .sans-serif(13px, normal, 1);
-    .border-radius(15px); // redeclare because of specificity of the type attribute
-  }
-}
-
-
-
-// Static navbar
-// -------------------------
-
-.navbar-static-top {
-  position: static;
-  margin-bottom: 0; // remove 18px margin for default navbar
-  .navbar-inner {
-    .border-radius(0);
-  }
-}
-
-
-
-// Fixed navbar
-// -------------------------
-
-// Shared (top/bottom) styles
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: @zindexFixedNavbar;
-  margin-bottom: 0; // remove 18px margin for default navbar
-}
-.navbar-fixed-top .navbar-inner,
-.navbar-static-top .navbar-inner {
-  border-width: 0 0 1px;
-}
-.navbar-fixed-bottom .navbar-inner {
-  border-width: 1px 0 0;
-}
-.navbar-fixed-top .navbar-inner,
-.navbar-fixed-bottom .navbar-inner {
-  padding-left:  0;
-  padding-right: 0;
-  .border-radius(0);
-}
-
-// Reset container width
-// Required here as we reset the width earlier on and the grid mixins don't override early enough
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
-  #grid > .core > .span(@gridColumns);
-}
-
-// Fixed to top
-.navbar-fixed-top {
-  top: 0;
-}
-.navbar-fixed-top,
-.navbar-static-top {
-  .navbar-inner {
-    .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
-  }
-}
-
-// Fixed to bottom
-.navbar-fixed-bottom {
-  bottom: 0;
-  .navbar-inner {
-    .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
-  }
-}
-
-
-
 // NAVIGATION
 // ----------
 
 .navbar .nav {
   position: relative;
   left: 0;
-  display: block;
   float: left;
   margin: 0 10px 0 0;
 }
+
+.nav {
+  display: block;
+}
+
 .navbar .nav.pull-right {
   float: right; // redeclare due to specificity
   margin-right: 0; // remove margin on float right nav