From ff4dbea19d269791d0169e99c7b6a6125b60fc2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 7 Feb 2016 12:28:06 +0100 Subject: [PATCH] ux(navbar): worked on responsive breakpoints for navbar --- public/app/core/directives/body_class.js | 8 + .../features/dashboard/dashnav/dashnav.html | 8 +- .../dashboard/timepicker/timepicker.html | 8 +- public/less/grafana-responsive.less | 86 ++++++-- public/less/grafana.less | 8 +- public/less/navbar.less | 12 +- public/less/timepicker.less | 10 +- public/vendor/bootstrap/less/navbar.less | 193 +----------------- 8 files changed, 112 insertions(+), 221 deletions(-) diff --git a/public/app/core/directives/body_class.js b/public/app/core/directives/body_class.js index 73426c60e00..dcf04a0bfd6 100644 --- a/public/app/core/directives/body_class.js +++ b/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; diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 765c68c7ee4..67c98520bd3 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -1,6 +1,6 @@ -
+
{{dashboard.title}} @@ -8,7 +8,7 @@
-
+
@@ -18,7 +18,7 @@
-
    +
      -
    • +
    • Back to dashboard diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html index 66093110700..10a1d6820a3 100644 --- a/public/app/features/dashboard/timepicker/timepicker.html +++ b/public/app/features/dashboard/timepicker/timepicker.html @@ -1,13 +1,13 @@
        -
      • +
      • Zoom Out
        • -
      • - +
      • + @@ -21,7 +21,7 @@
        • -
      • +
      • diff --git a/public/less/grafana-responsive.less b/public/less/grafana-responsive.less index 8ddbee920dd..2ebf8d02264 100644 --- a/public/less/grafana-responsive.less +++ b/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; } -} - -.back-to-dashboard-link { - display: none; -} - -@media (min-width: 990px) { - .back-to-dashboard-link { - display: block; + .dashnav-dashboards-btn a { + max-width: 200px; } - .sidemenu-open { - .back-to-dashboard-link { + .gf-timepicker-nav-btn { + max-width: 120px; + } + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; + } +} + +@media @breakpoint-sm-up { + .dashnav-dashboards-btn a { + max-width: 200px; + } + .gf-timepicker-nav-btn { + max-width: 120px; + } + .panel-in-fullscreen { + .dashnav-action-icons { display: none; } + + .dashnav-back-to-dashboard { + display: block; + } } } -@media (min-width: 1210px) { - .back-to-dashboard-link { +@media @breakpoint-md-up { + .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; + } +} diff --git a/public/less/grafana.less b/public/less/grafana.less index d33db98376b..a4872942331 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -45,11 +45,11 @@ } .playlist-active { - .grafana-menu-zoom-out, .add-row-panel-hint, - .grafana-menu-refresh, - .top-nav-dash-actions { - display:none; + .dashnav-refresh-action, + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; } .grafana-menu-stop-playlist { diff --git a/public/less/navbar.less b/public/less/navbar.less index 8dd78e95b14..f4a405ad25c 100644 --- a/public/less/navbar.less +++ b/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 { diff --git a/public/less/timepicker.less b/public/less/timepicker.less index 7910d18c23c..3eabb32bb1e 100644 --- a/public/less/timepicker.less +++ b/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; diff --git a/public/vendor/bootstrap/less/navbar.less b/public/vendor/bootstrap/less/navbar.less index 93d09bcad03..40b9a96490b 100644 --- a/public/vendor/bootstrap/less/navbar.less +++ b/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