Skip to content

N
nexpie-grafana-theme
Commit ff4dbea1 by Torkel Ödegaard
Options

ux(navbar): worked on responsive breakpoints for navbar

parent 89ef019b
Showing with 110 additions and 219 deletions
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
<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
<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}">
<a bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()">
<li>
<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 {
display: none;
}
@media (min-width: 990px) {
.back-to-dashboard-link {
display: block;
@media @breakpoint-sm-up {
.dashnav-dashboards-btn a {
max-width: 200px;
}
.sidemenu-open {
.back-to-dashboard-link {
.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;
}
}
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 {
......
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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment