IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-15 19:22:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: use flexbox for sidenav, put logo in sidenav

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-08-14 12:26:24 +02:00
parent 1dab313ca3
commit f02be0251b
6 changed files with 151 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/core/components/navbar/navbar.html
View File

@ -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">

8
public/app/core/components/sidemenu/sidemenu.html
View File

@ -1,5 +1,11 @@
<ul class="sidemenu">
<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>

3
public/app/features/plugins/partials/ds_list.html
View File

@ -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>

37
public/sass/components/_sidemenu.scss
View File

@ -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;

8
public/sass/layout/_page.scss
View File

@ -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%)

9
public/views/index.html
View File

@ -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,7 +37,9 @@
</div>
</div>
<div ng-view class="main-view"></div>
<div class="main-view">
<div ng-view></div>
<footer class="footer">
<div class="row text-center">
<ul>
@ -75,6 +75,7 @@
</ul>
</div>
</footer>
</div>
</grafana-app>
<script>