Skip to content

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

ux: testing fixed sidemenu and breadcrumbs

parent 097fa743
Showing with 73 additions and 59 deletions
public/app/core/components/navbar/navbar.html
<div class="page-nav container">
<div class="page-nav">
<div class="container">
<div class="page-breadcrumb">
<div class="page-breadcrumb__item dropdown" ng-repeat="item in ctrl.model.items">
<a class="pointer" ng-href="{{::item.url}}" data-toggle="dropdown" ng-if="::item.items">
......@@ -20,7 +20,7 @@
</ul>
</div>
</div>
</div>
</div>
<dashboard-search></dashboard-search>
public/app/features/plugins/partials/ds_edit.html
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="scroll-canvas">
<div class="page-container">
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-datasources"></i>
......@@ -89,5 +90,6 @@
<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
</div>
</div>
</div>
public/app/features/plugins/partials/ds_list.html
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="scroll-canvas">
<div class="page-container">
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-datasources"></i>
......@@ -48,4 +49,5 @@
<div ng-if="ctrl.datasources.length === 0">
<em>No data sources defined</em>
</div>
</div>
</div>
public/sass/_variables.dark.scss
......@@ -162,7 +162,7 @@ $btn-drag-image: '../img/grab_dark.svg';
// Forms
// -------------------------
$input-bg: $dark-4;
$input-bg: $black;
$input-bg-disabled: $dark-3;
$input-color: $gray-4;
......
public/sass/_variables.scss
......@@ -65,7 +65,7 @@ $container-max-widths: (
sm: 576px,
md: 720px,
lg: 940px,
xl: 1140px
xl: 1080px
) !default;
// Grid columns
......
public/sass/base/_reboot.scss
......@@ -79,6 +79,8 @@ body {
// By default, `<body>` has no `background-color` so we set one as a best practice.
background-color: $body-bg;
height: 100%;
width: 100%;
position: absolute;
}
// Suppress the focus outline on elements that cannot be accessed via keyboard.
......
public/sass/components/_gf-form.scss
......@@ -53,6 +53,7 @@ $gf-form-margin: 0.25rem;
padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
flex-shrink: 0;
font-weight: $font-weight-semi-bold;
background-color: $input-label-bg;
display: block;
......
public/sass/components/_navbar.scss
......@@ -57,9 +57,7 @@
.navbar-brand-btn {
display: block;
position: relative;
float: left;
margin: 0;
margin-bottom: 3rem;
background-color: $side-menu-bg;
padding: 0.4rem 1.0rem 0.4rem 1rem;
min-height: $navbarHeight;
......@@ -68,10 +66,6 @@
font-size: 70%;
}
.fa-chevron-left{
display: none;
}
&:hover {
background: $navbarButtonBackgroundHighlight;
}
......
public/sass/layout/_page.scss
.grafana-app {
height: 100%;
display: flex;
align-items: stretch;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.main-view {
position: relative;
flex-grow: 1;
background: linear-gradient(180deg,#282020 0,#1e0f05);
background: inear-gradient(180deg, #1b1d25 0, #210d0d);
}
.page-container {
@extend .container;
padding: $spacer $spacer $spacer $spacer*3;
}
padding: $spacer;
min-height: calc(100% - 54px);
padding-bottom: $spacer * 5;
.scroll-canvas {
position: absolute;
width: 100%;
height: calc(100% - 54px);
overflow: scroll;
}
.page-header-inner {
......@@ -96,15 +104,20 @@
margin-bottom: $spacer*2;
}
$breadcrumb-hover-hl: #111;
$page-nav-bg: black;
// .page-nav {
// background: $page-nav-bg;
// }
.page-breadcrumb {
display: flex;
margin-bottom: $spacer;
padding: 0 $spacer;
}
$breadcrumb-hover-hl: #111;
.page-breadcrumb__item {
background: black;
background: $page-nav-bg;
> a {
color: $text-color-weak;
......@@ -124,7 +137,7 @@ $breadcrumb-hover-hl: #111;
border-right-width: 0;
border-left-width: 41px;
z-index: 2;
border-left-color: black;
border-left-color: $page-nav-bg;
}
}
......
public/views/index.html
......@@ -40,41 +40,41 @@
<div class="main-view">
<div ng-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>
<!-- <footer class="footer"> -->
<!-- <div class="row text&#45;center"> -->
<!-- <ul> -->
<!-- <li> -->
<!-- <a href="http://docs.grafana.org" target="_blank"> -->
<!-- <i class="fa fa&#45;file&#45;code&#45;o"></i> -->
<!-- Docs -->
<!-- </a> -->
<!-- </li> -->
<!-- <li> -->
<!-- <a href="https://grafana.com/services/support" target="_blank"> -->
<!-- <i class="fa fa&#45;support"></i> -->
<!-- Support Plans -->
<!-- </a> -->
<!-- </li> -->
<!-- <li> -->
<!-- <a href="https://community.grafana.com/" target="_blank"> -->
<!-- <i class="fa fa&#45;comments&#45;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&#45;tooltip="'[[.NewGrafanaVersion]]'"> -->
<!-- New version available! -->
<!-- </a> -->
<!-- </li> -->
<!-- [[end]] -->
<!-- </ul> -->
<!-- </div> -->
<!-- </footer> -->
</div>
</grafana-app>
......
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