mirror of
https://github.com/grafana/grafana.git
synced 2025-01-15 11:12:50 -06:00
ux: use flexbox for sidenav, put logo in sidenav
This commit is contained in:
Torkel Ödegaard
parent
1dab313ca3
commit
f02be0251b
@ -1,9 +1,4 @@
|
||||
<div class="navbar-inner">
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<div ng-if="::!ctrl.hasMenu">
|
||||
<a href="{{::ctrl.section.url}}" class="navbar-page-btn">
|
||||
|
||||
@ -1,71 +1,77 @@
|
||||
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<ul class="sidemenu">
|
||||
<li>
|
||||
<a class="sidemenu-item" ng-click="ctrl.search()">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="sidemenu-item" ng-click="ctrl.search()">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
|
||||
<a href="{{::item.url}}" class="sidemenu-item" target="{{::item.target}}">
|
||||
<span class="icon-circle sidemenu-icon">
|
||||
<i class="{{::item.icon}}" ng-show="::item.icon"></i>
|
||||
<img ng-src="{{::item.img}}" ng-show="::item.img">
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
|
||||
<li class="side-menu-header">
|
||||
<span class="sidemenu-item-text">{{::item.text}}</span>
|
||||
</li>
|
||||
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
|
||||
<a href="{{::child.url}}">
|
||||
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
|
||||
{{::child.text}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
|
||||
<a href="{{::item.url}}" class="sidemenu-item" target="{{::item.target}}">
|
||||
<span class="icon-circle sidemenu-icon">
|
||||
<i class="{{::item.icon}}" ng-show="::item.icon"></i>
|
||||
<img ng-src="{{::item.img}}" ng-show="::item.img">
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
|
||||
<li class="side-menu-header">
|
||||
<span class="sidemenu-item-text">{{::item.text}}</span>
|
||||
</li>
|
||||
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
|
||||
<a href="{{::child.url}}">
|
||||
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
|
||||
{{::child.text}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li ng-show="::!ctrl.isSignedIn">
|
||||
<a href="{{ctrl.loginUrl}}" class="sidemenu-item" target="_self">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
|
||||
<span class="sidemenu-item-text">Sign in</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li ng-show="::!ctrl.isSignedIn">
|
||||
<a href="{{ctrl.loginUrl}}" class="sidemenu-item" target="_self">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
|
||||
<span class="sidemenu-item-text">Sign in</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
|
||||
<a class="sidemenu-item" href="profile">
|
||||
<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
|
||||
<img ng-src="{{::ctrl.user.gravatarUrl}}">
|
||||
<span class="sidemenu-org-avatar--missing">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
|
||||
<li class="side-menu-header">
|
||||
<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
|
||||
<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
|
||||
</li>
|
||||
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
|
||||
<span ng-show="::menuItem.section">{{::menuItem.section}}</span>
|
||||
<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
|
||||
<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
|
||||
{{::menuItem.text}}
|
||||
</a>
|
||||
</li>
|
||||
<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
|
||||
<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
|
||||
<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
|
||||
</li>
|
||||
<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
|
||||
<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
|
||||
<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
|
||||
{{::orgItem.text}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
|
||||
<a class="sidemenu-item" href="profile">
|
||||
<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
|
||||
<img ng-src="{{::ctrl.user.gravatarUrl}}">
|
||||
<span class="sidemenu-org-avatar--missing">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
|
||||
<li class="side-menu-header">
|
||||
<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
|
||||
<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
|
||||
</li>
|
||||
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
|
||||
<span ng-show="::menuItem.section">{{::menuItem.section}}</span>
|
||||
<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
|
||||
<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
|
||||
{{::menuItem.text}}
|
||||
</a>
|
||||
</li>
|
||||
<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
|
||||
<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
|
||||
<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
|
||||
</li>
|
||||
<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
|
||||
<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
|
||||
<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
|
||||
{{::orgItem.text}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<h1>Data Sources</h1>
|
||||
@ -44,5 +42,4 @@
|
||||
<div ng-if="ctrl.datasources.length === 0">
|
||||
<em>No data sources defined</em>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,47 +1,16 @@
|
||||
.sidemenu-canvas {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidemenu-wrapper {
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
left: 0;
|
||||
//border-top: 1px solid $tight-form-border;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: $side-menu-width;
|
||||
background-color: $side-menu-bg;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-open {
|
||||
.sidemenu-wrapper {
|
||||
visibility: visible;
|
||||
//transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-pinned {
|
||||
.sidemenu-wrapper {
|
||||
min-height: calc(100% - 54px);
|
||||
}
|
||||
.dashboard-container {
|
||||
padding-left: $side-menu-width + 8px;
|
||||
}
|
||||
.page-container {
|
||||
margin-left: $side-menu-width;
|
||||
}
|
||||
.search-container {
|
||||
left: $side-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
.grafana-app {
|
||||
display: block;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-view {
|
||||
// height: 100%; REMOVED FOR FOOTER TRW
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
@extend .container;
|
||||
background-color: $page-bg;
|
||||
padding: ($spacer * 2) ($spacer * 4);
|
||||
max-width: 1060px;
|
||||
min-height: calc(100% - 54px);
|
||||
padding-bottom: $spacer * 5;
|
||||
background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%)
|
||||
|
||||
@ -25,9 +25,7 @@
|
||||
<body ng-cloak>
|
||||
<grafana-app class="grafana-app">
|
||||
|
||||
<aside class="sidemenu-wrapper">
|
||||
<sidemenu ng-if="contextSrv.sidemenu"></sidemenu>
|
||||
</aside>
|
||||
<sidemenu class="sidemenu-wrapper"></sidemenu>
|
||||
|
||||
<div class="page-alert-list">
|
||||
<div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert">
|
||||
@ -39,77 +37,80 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-view class="main-view"></div>
|
||||
<footer class="footer">
|
||||
<div class="row text-center">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://docs.grafana.org" target="_blank">
|
||||
<i class="fa fa-file-code-o"></i>
|
||||
Docs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://grafana.com/services/support" target="_blank">
|
||||
<i class="fa fa-support"></i>
|
||||
Support Plans
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://community.grafana.com/" target="_blank">
|
||||
<i class="fa fa-comments-o"></i>
|
||||
Community
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://grafana.com" target="_blank">Grafana</a>
|
||||
<span>v[[.BuildVersion]] (commit: [[.BuildCommit]])</span>
|
||||
</li>
|
||||
[[if .NewGrafanaVersionExists]]
|
||||
<li>
|
||||
<a href="https://grafana.com/get" target="_blank" bs-tooltip="'[[.NewGrafanaVersion]]'">
|
||||
New version available!
|
||||
</a>
|
||||
</li>
|
||||
[[end]]
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</grafana-app>
|
||||
<div class="main-view">
|
||||
<div ng-view></div>
|
||||
|
||||
<script>
|
||||
window.grafanaBootData = {
|
||||
user:[[.User]],
|
||||
settings: [[.Settings]],
|
||||
mainNavLinks: [[.MainNavLinks]]
|
||||
};
|
||||
</script>
|
||||
<footer class="footer">
|
||||
<div class="row text-center">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://docs.grafana.org" target="_blank">
|
||||
<i class="fa fa-file-code-o"></i>
|
||||
Docs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://grafana.com/services/support" target="_blank">
|
||||
<i class="fa fa-support"></i>
|
||||
Support Plans
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://community.grafana.com/" target="_blank">
|
||||
<i class="fa fa-comments-o"></i>
|
||||
Community
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://grafana.com" target="_blank">Grafana</a>
|
||||
<span>v[[.BuildVersion]] (commit: [[.BuildCommit]])</span>
|
||||
</li>
|
||||
[[if .NewGrafanaVersionExists]]
|
||||
<li>
|
||||
<a href="https://grafana.com/get" target="_blank" bs-tooltip="'[[.NewGrafanaVersion]]'">
|
||||
New version available!
|
||||
</a>
|
||||
</li>
|
||||
[[end]]
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</grafana-app>
|
||||
|
||||
<!-- build:js [[.AppSubUrl]]/public/app/boot.js -->
|
||||
<script src="[[.AppSubUrl]]/public/vendor/npm/es6-shim/es6-shim.js"></script>
|
||||
<script src="[[.AppSubUrl]]/public/vendor/npm/systemjs/dist/system.src.js"></script>
|
||||
<script src="[[.AppSubUrl]]/public/app/system.conf.js"></script>
|
||||
<script src="[[.AppSubUrl]]/public/app/boot.js"></script>
|
||||
<!-- endbuild -->
|
||||
<script>
|
||||
window.grafanaBootData = {
|
||||
user:[[.User]],
|
||||
settings: [[.Settings]],
|
||||
mainNavLinks: [[.MainNavLinks]]
|
||||
};
|
||||
</script>
|
||||
|
||||
[[if .GoogleTagManagerId]]
|
||||
<script>
|
||||
dataLayer = [{
|
||||
'IsSignedIn': '[[.User.IsSignedIn]]',
|
||||
'Email': '[[.User.Email]]',
|
||||
'Name': '[[.User.Name]]',
|
||||
'UserId': '[[.User.Id]]',
|
||||
'OrgId': '[[.User.OrgId]]',
|
||||
'OrgName': '[[.User.OrgName]]',
|
||||
}];
|
||||
</script>
|
||||
<!-- Google Tag Manager -->
|
||||
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=[[.GoogleTagManagerId]]" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','[[.GoogleTagManagerId]]');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
[[end]]
|
||||
<!-- build:js [[.AppSubUrl]]/public/app/boot.js -->
|
||||
<script src="[[.AppSubUrl]]/public/vendor/npm/es6-shim/es6-shim.js"></script>
|
||||
<script src="[[.AppSubUrl]]/public/vendor/npm/systemjs/dist/system.src.js"></script>
|
||||
<script src="[[.AppSubUrl]]/public/app/system.conf.js"></script>
|
||||
<script src="[[.AppSubUrl]]/public/app/boot.js"></script>
|
||||
<!-- endbuild -->
|
||||
|
||||
</body>
|
||||
[[if .GoogleTagManagerId]]
|
||||
<script>
|
||||
dataLayer = [{
|
||||
'IsSignedIn': '[[.User.IsSignedIn]]',
|
||||
'Email': '[[.User.Email]]',
|
||||
'Name': '[[.User.Name]]',
|
||||
'UserId': '[[.User.Id]]',
|
||||
'OrgId': '[[.User.OrgId]]',
|
||||
'OrgName': '[[.User.OrgName]]',
|
||||
}];
|
||||
</script>
|
||||
<!-- Google Tag Manager -->
|
||||
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=[[.GoogleTagManagerId]]" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','[[.GoogleTagManagerId]]');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
[[end]]
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user