mirror of
https://github.com/grafana/grafana.git
synced 2025-02-09 23:16:16 -06:00
ux: new page header design
This commit is contained in:
Torkel Ödegaard
parent
3d2d789ca2
commit
47f11c26c0
@ -1,13 +1,11 @@
|
||||
<div class="page-nav">
|
||||
<div class="container">
|
||||
<div class="page-breadcrumbs">
|
||||
<a class="breadcrumb-item active" href="/">
|
||||
<i class="fa fa-home"></i>
|
||||
</a>
|
||||
<a class="breadcrumb-item" ng-href="{{::item.url}}" ng-repeat="item in ctrl.model.breadcrumbs">
|
||||
{{::item.text}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="page-breadcrumbs">
|
||||
<a class="breadcrumb-item active" href="/">
|
||||
<i class="fa fa-home"></i>
|
||||
</a>
|
||||
<a class="breadcrumb-item" ng-href="{{::item.url}}" ng-repeat="item in ctrl.model.breadcrumbs">
|
||||
{{::item.text}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -39,10 +39,10 @@ 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>
|
||||
{{model.node.text}}
|
||||
<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>
|
||||
`,
|
||||
scope: {
|
||||
|
||||
@ -1,28 +1,34 @@
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
<div class="page-header-canvas">
|
||||
<div class="page-container">
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
|
||||
<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">
|
||||
<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}">
|
||||
Config
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
|
||||
Dashboards
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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-tabs" ng-show="ctrl.hasDashboards">
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -29,8 +29,9 @@
|
||||
.dashnav-action-icons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: ($spacer * 1) ($spacer * 2);
|
||||
padding: 0 $spacer * 2;
|
||||
}
|
||||
|
||||
.dash-row-menu-container {
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -1,41 +1,6 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
.page-container {
|
||||
@extend .container;
|
||||
padding: $spacer $spacer $spacer $spacer*3;
|
||||
padding: 0 $spacer * 2;
|
||||
}
|
||||
|
||||
.scroll-canvas {
|
||||
@ -31,10 +31,14 @@
|
||||
}
|
||||
|
||||
.page-body {
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding-top: $spacer*2;
|
||||
|
||||
&--with-sidebar {
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -196,13 +207,13 @@
|
||||
|
||||
// 5px - for rounded arrows and
|
||||
// 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
|
||||
&:last-child:after {
|
||||
content: none;
|
||||
}
|
||||
// we dont need an arrow after the last link
|
||||
&:last-child:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user