mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(navbar): worked on responsive breakpoints for navbar
This commit is contained in:
Torkel Ödegaard
parent
89ef019b7c
commit
ff4dbea19d
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}">
|
||||
<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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
193
public/vendor/bootstrap/less/navbar.less
vendored
193
public/vendor/bootstrap/less/navbar.less
vendored
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user