Skip to content

N
nexpie-grafana-theme
Commit 47f11c26 by Torkel Ödegaard
Options

ux: new page header design

parent 3d2d789c
Showing with 97 additions and 123 deletions
public/app/core/components/navbar/navbar.html
<div class="page-nav"> <div class="page-nav">
<div class="container"> <div class="page-breadcrumbs">
<div class="page-breadcrumbs"> <a class="breadcrumb-item active" href="/">
<a class="breadcrumb-item active" href="/"> <i class="fa fa-home"></i>
<i class="fa fa-home"></i> </a>
</a> <a class="breadcrumb-item" ng-href="{{::item.url}}" ng-repeat="item in ctrl.model.breadcrumbs">
<a class="breadcrumb-item" ng-href="{{::item.url}}" ng-repeat="item in ctrl.model.breadcrumbs"> {{::item.text}}
{{::item.text}} </a>
</a>
</div>
</div> </div>
</div> </div>
......
public/app/core/components/navbar/navbar.ts
...@@ -39,10 +39,10 @@ export function pageH1() { ...@@ -39,10 +39,10 @@ export function pageH1() {
return { return {
restrict: 'E', restrict: 'E',
template: ` template: `
<h1> <h1 class="page-header__title">
<i class="{{::model.node.icon}}" ng-if="::model.node.icon"></i> <i class="page-header__icon {{::model.node.icon}}" ng-if="::model.node.icon"></i>
<img ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i> <img class="page-header__img" ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
{{model.node.text}} {{model.node.text}}
</h1> </h1>
`, `,
scope: { scope: {
......
public/app/features/plugins/partials/ds_edit.html
<navbar model="ctrl.navModel"></navbar> <div class="page-header-canvas">
<div class="page-container"> <div class="page-container">
<div class="page-header"> <navbar model="ctrl.navModel"></navbar>
<page-h1 model="ctrl.navModel"></page-h1>
<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div> <div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
<div class="page-header-tabs" ng-show="ctrl.hasDashboards"> <div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
<ul class="gf-tabs">
<li class="gf-tabs-item"> <div class="page-header-tabs" ng-show="ctrl.hasDashboards">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}"> <ul class="gf-tabs">
Config <li class="gf-tabs-item">
</a> <a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
</li> <i class="fa fa-sliders"></i>
<li class="gf-tabs-item"> Config
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}"> </a>
Dashboards </li>
</a> <li class="gf-tabs-item">
</li> <a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
</ul> <i class="fa fa-th-large"></i>
Dashboards
</a>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div>
<div ng-if="ctrl.tabIndex === 0" class="tab-content"> <div class="page-container page-body">
<div ng-if="ctrl.tabIndex === 0">
<form name="ctrl.editForm" ng-if="ctrl.current"> <form name="ctrl.editForm" ng-if="ctrl.current">
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
...@@ -83,7 +89,7 @@ ...@@ -83,7 +89,7 @@
</form> </form>
</div> </div>
<div ng-if="ctrl.tabIndex === 1" class="tab-content"> <div ng-if="ctrl.tabIndex === 1">
<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list> <dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
</div> </div>
</div> </div>
public/app/features/plugins/partials/plugin_edit.html
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</div> </div>
<div class="page-body"> <div class="page-body page-body--with-sidebar">
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'"> <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
<div ng-bind-html="ctrl.readmeHtml" class="markdown-html"> <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
</div> </div>
......
public/sass/_old_responsive.scss
...@@ -29,8 +29,9 @@ ...@@ -29,8 +29,9 @@
.dashnav-action-icons { .dashnav-action-icons {
display: none; display: none;
} }
.page-container { .page-container {
padding: ($spacer * 1) ($spacer * 2); padding: 0 $spacer * 2;
} }
.dash-row-menu-container { .dash-row-menu-container {
......
public/sass/_variables.scss
...@@ -227,7 +227,5 @@ $dashboard-padding: $panel-margin * 2; ...@@ -227,7 +227,5 @@ $dashboard-padding: $panel-margin * 2;
$panel-padding: 0px 10px 5px 10px; $panel-padding: 0px 10px 5px 10px;
// tabs // tabs
$tabs-padding-top: 0.6rem; $tabs-padding: 8px 15px 11px;
$tabs-padding-bottom: 0.4rem;
$tabs-top-margin: 0.5rem;
public/sass/components/_tabbed_view.scss
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
margin: 0; margin: 0;
background-color: transparent; background-color: transparent;
border: none; border: none;
padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom; padding: $tabs-padding;
color: $text-color; color: $text-color;
i { i {
font-size: 120%; font-size: 120%;
......
public/sass/components/_tabs.scss
.nav-tabs-alt {
& > li > a {
color: darken($link-color, 20%);
}
li > a:hover {
border-bottom: none;
}
li.active > a,
li.active > a:focus,
li.active > a:hover {
@include border-radius(3px);
border: 1px solid $divider-border-color;
background-color: transparent;
border-bottom: 1px solid $page-bg;
color: $link-color;
}
li.disabled > a {
color: $text-color;
}
.open .dropdown-toggle {
background-color: #060606;
border-color: transparent;
}
.tab-content {
padding: 10px;
background-color: $panel-bg;
}
}
.gf-tabs { .gf-tabs {
@include clearfix(); @include clearfix();
float: left; float: left;
margin: $tabs-top-margin 0 0 0;
} }
.gf-tabs-item { .gf-tabs-item {
...@@ -44,13 +9,17 @@ ...@@ -44,13 +9,17 @@
} }
.gf-tabs-link { .gf-tabs-link {
padding: $tabs-padding-top $spacer $tabs-padding-bottom $spacer; padding: $tabs-padding;
margin-right: $spacer/2; margin-right: $spacer/2;
border: 1px solid transparent;
position: relative; position: relative;
display: block; display: block;
border: solid transparent;
border-width: 2px 1px 1px;
border-radius: 3px 3px 0 0;
@include border-radius(2px 2px 0 0); i {
padding-right: 5px;
}
&:hover, &:hover,
&:focus { &:focus {
...@@ -60,20 +29,11 @@ ...@@ -60,20 +29,11 @@
&.active, &.active,
&.active:hover, &.active:hover,
&.active:focus { &.active:focus {
@include border-radius(3px); border-color: $orange $dark-4 transparent;
border-color: rgba(216, 131, 40, 0.77); background: $page-bg;
border-bottom: 1px solid $page-bg;
color: $link-color; color: $link-color;
position: relative; position: relative;
top: 1px; top: 1px;
} }
} }
.form-tabs-wrapper {
@include brand-bottom-border();
@include clearfix();
}
.form-tabs-content {
padding: $spacer*2 $spacer;
}
public/sass/layout/_page.scss
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
.page-container { .page-container {
@extend .container; @extend .container;
padding: $spacer $spacer $spacer $spacer*3; padding: 0 $spacer * 2;
} }
.scroll-canvas { .scroll-canvas {
...@@ -31,10 +31,14 @@ ...@@ -31,10 +31,14 @@
} }
.page-body { .page-body {
@include media-breakpoint-up(md) { padding-top: $spacer*2;
display: flex;
flex-direction: row; &--with-sidebar {
flex-wrap: wrap; @include media-breakpoint-up(md) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
} }
} }
...@@ -49,31 +53,18 @@ ...@@ -49,31 +53,18 @@
} }
} }
.page-header-canvas {
background: linear-gradient(90deg, #292a2d, black);
box-shadow: inset 0px -4px 14px #2d2d2d;
bottom-border: 1px solid $dark-4;
}
.page-header { .page-header {
padding: 2rem 0 0 0; padding: 2rem 0 0 0;
margin-bottom: 2rem;
@include brand-bottom-border();
@include clearfix();
h1 {
font-size: $font-size-h2;
flex-grow: 1;
display: inline-block;
margin-bottom: 1rem;
img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 0.5rem;
position: relative;
top: -3px;
}
}
a, button { .btn {
float: right; float: right;
margin-left: $spacer; margin-left: 1rem;
// better align icons // better align icons
.fa { .fa {
...@@ -83,7 +74,26 @@ ...@@ -83,7 +74,26 @@
} }
} }
.page-header__title {
font-size: $font-size-h2;
flex-grow: 1;
display: inline-block;
margin-bottom: 2.5rem;
}
.page-header__img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 1rem;
position: relative;
top: -3px;
}
.page-header__icon {
font-size: 150%;
margin-right: 1rem;
}
.page-heading { .page-heading {
font-size: 1.25rem; font-size: 1.25rem;
...@@ -123,7 +133,7 @@ ...@@ -123,7 +133,7 @@
.page-breadcrumbs { .page-breadcrumbs {
display: flex; display: flex;
padding: 10px 25px; padding: 10px 0;
line-height: 0.5; line-height: 0.5;
} }
...@@ -136,6 +146,8 @@ ...@@ -136,6 +146,8 @@
} }
.breadcrumb-item { .breadcrumb-item {
@include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
text-decoration: none; text-decoration: none;
outline: none; outline: none;
display: block; display: block;
...@@ -143,7 +155,6 @@ ...@@ -143,7 +155,6 @@
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
padding: 0 7px 0 37px; padding: 0 7px 0 37px;
@include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
position: relative; position: relative;
box-shadow: $card-shadow; box-shadow: $card-shadow;
...@@ -196,13 +207,13 @@ ...@@ -196,13 +207,13 @@
// 5px - for rounded arrows and // 5px - for rounded arrows and
// 50px - to prevent hover glitches on the border created using shadows*/ // 50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px; border-radius: 0 5px 0 50px;
} }
// we dont need an arrow after the last link // we dont need an arrow after the last link
&:last-child:after { &:last-child:after {
content: none; content: none;
} }
} }
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