Skip to content

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

ux: new page header design

parent 3d2d789c
Showing with 67 additions and 93 deletions
public/app/core/components/navbar/navbar.html
<div class="page-nav">
<div class="container">
<div class="page-breadcrumbs">
<a class="breadcrumb-item active" href="/">
<i class="fa fa-home"></i>
......@@ -8,7 +7,6 @@
{{::item.text}}
</a>
</div>
</div>
</div>
<dashboard-search></dashboard-search>
public/app/core/components/navbar/navbar.ts
......@@ -39,9 +39,9 @@ export function pageH1() {
return {
restrict: 'E',
template: `
<h1>
<i class="{{::model.node.icon}}" ng-if="::model.node.icon"></i>
<img ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
<h1 class="page-header__title">
<i class="page-header__icon {{::model.node.icon}}" ng-if="::model.node.icon"></i>
<img class="page-header__img" ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
{{model.node.text}}
</h1>
`,
......
public/app/features/plugins/partials/ds_edit.html
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header-canvas">
<div class="page-container">
<navbar model="ctrl.navModel"></navbar>
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
......@@ -9,20 +11,24 @@
<ul class="gf-tabs">
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
<i class="fa fa-sliders"></i>
Config
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
<i class="fa fa-th-large"></i>
Dashboards
</a>
</li>
</ul>
</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">
<div class="gf-form-group">
<div class="gf-form-inline">
......@@ -83,7 +89,7 @@
</form>
</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>
</div>
</div>
public/app/features/plugins/partials/plugin_edit.html
......@@ -28,7 +28,7 @@
</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 ng-bind-html="ctrl.readmeHtml" class="markdown-html">
</div>
......
public/sass/_old_responsive.scss
......@@ -29,8 +29,9 @@
.dashnav-action-icons {
display: none;
}
.page-container {
padding: ($spacer * 1) ($spacer * 2);
padding: 0 $spacer * 2;
}
.dash-row-menu-container {
......
public/sass/_variables.scss
......@@ -227,7 +227,5 @@ $dashboard-padding: $panel-margin * 2;
$panel-padding: 0px 10px 5px 10px;
// tabs
$tabs-padding-top: 0.6rem;
$tabs-padding-bottom: 0.4rem;
$tabs-top-margin: 0.5rem;
$tabs-padding: 8px 15px 11px;
public/sass/components/_tabbed_view.scss
......@@ -34,7 +34,7 @@
margin: 0;
background-color: transparent;
border: none;
padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
padding: $tabs-padding;
color: $text-color;
i {
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 {
@include clearfix();
float: left;
margin: $tabs-top-margin 0 0 0;
}
.gf-tabs-item {
......@@ -44,13 +9,17 @@
}
.gf-tabs-link {
padding: $tabs-padding-top $spacer $tabs-padding-bottom $spacer;
padding: $tabs-padding;
margin-right: $spacer/2;
border: 1px solid transparent;
position: relative;
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,
&:focus {
......@@ -60,20 +29,11 @@
&.active,
&.active:hover,
&.active:focus {
@include border-radius(3px);
border-color: rgba(216, 131, 40, 0.77);
border-bottom: 1px solid $page-bg;
border-color: $orange $dark-4 transparent;
background: $page-bg;
color: $link-color;
position: relative;
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 @@
.page-container {
@extend .container;
padding: $spacer $spacer $spacer $spacer*3;
padding: 0 $spacer * 2;
}
.scroll-canvas {
......@@ -31,11 +31,15 @@
}
.page-body {
padding-top: $spacer*2;
&--with-sidebar {
@include media-breakpoint-up(md) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
}
.page-content-with-sidebar {
......@@ -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 {
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;
margin-left: $spacer;
margin-left: 1rem;
// better align icons
.fa {
......@@ -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 {
font-size: 1.25rem;
......@@ -123,7 +133,7 @@
.page-breadcrumbs {
display: flex;
padding: 10px 25px;
padding: 10px 0;
line-height: 0.5;
}
......@@ -136,6 +146,8 @@
}
.breadcrumb-item {
@include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
text-decoration: none;
outline: none;
display: block;
......@@ -143,7 +155,6 @@
font-size: 12px;
line-height: 30px;
padding: 0 7px 0 37px;
@include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
position: relative;
box-shadow: $card-shadow;
......@@ -197,12 +208,12 @@
// 5px - for rounded arrows and
// 50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px;
}
}
// we dont need an arrow after the last link
&:last-child:after {
// we dont need an arrow after the last link
&:last-child:after {
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