apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux: updating header design for pages

Browse Source
pull/10063/head
Torkel Ödegaard 8 years ago
parent 47f11c26c0
commit 645f49eda4
20 changed files with 373 additions and 270 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      pkg/api/index.go
  2. 6
      public/app/core/components/navbar/navbar.ts
  3. 22
      public/app/core/nav_model_srv.ts
  4. 15
      public/app/features/admin/partials/configuration_home.html
  5. 3
      public/app/features/alerting/alert_list_ctrl.ts
  6. 1
      public/app/features/alerting/notifications_list_ctrl.ts
  7. 65
      public/app/features/alerting/partials/alert_list.html
  8. 35
      public/app/features/alerting/partials/notifications_list.html
  9. 14
      public/app/features/org/partials/profile.html
  10. 11
      public/app/features/plugins/partials/ds_edit.html
  11. 25
      public/app/features/plugins/partials/ds_list.html
  12. 157
      public/app/features/plugins/partials/plugin_edit.html
  13. 119
      public/app/features/plugins/partials/plugin_list.html
  14. 1
      public/sass/_grafana.scss
  15. 2
      public/sass/_variables.scss
  16. 4
      public/sass/base/_icons.scss
  17. 2
      public/sass/components/_footer.scss
  18. 61
      public/sass/components/_page_header.scss
  19. 6
      public/sass/components/_tabs.scss
  20. 86
      public/sass/layout/_page.scss

4
pkg/api/index.go
Unescape View File

@ -140,8 +140,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) { if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) {
alertChildNavs := []*dtos.NavLink{ alertChildNavs := []*dtos.NavLink{
{Text: "Alert List", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"}, {Text: "Alert Rules", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"},
{Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"}, {Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "gicon gicon-alert-notification-channel"},
} }
data.NavTree = append(data.NavTree, &dtos.NavLink{ data.NavTree = append(data.NavTree, &dtos.NavLink{

6
public/app/core/components/navbar/navbar.ts
Unescape View File

@ -40,9 +40,9 @@ export function pageH1() {
restrict: 'E', restrict: 'E',
template: ` template: `
<h1 class="page-header__title"> <h1 class="page-header__title">
<i class="page-header__icon {{::model.node.icon}}" ng-if="::model.node.icon"></i> <i class="page-header__icon {{::model.header.icon}}" ng-if="::model.header.icon"></i>
<img class="page-header__img" ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i> <img class="page-header__img" ng-src="{{::model.header.img}}" ng-if="::model.header.img"></i>
{{model.node.text}} {{model.header.text}}
</h1> </h1>
`, `,
scope: { scope: {

22
public/app/core/nav_model_srv.ts
Unescape View File

@ -5,15 +5,24 @@ import config from 'app/core/config';
import _ from 'lodash'; import _ from 'lodash';
export interface NavModelItem { export interface NavModelItem {
title: string; text: string;
url: string; url: string;
icon?: string; icon?: string;
iconUrl?: string; img?: string;
} }
export interface NavModel { export class NavModel {
section: NavModelItem; breadcrumbs: NavModelItem[];
menu: NavModelItem[]; header: NavModelItem;
node: NavModelItem;
constructor() {
this.breadcrumbs = [];
}
setPageHeaderIndex(index: number) {
this.header = this.breadcrumbs[index];
}
} }
export class NavModelSrv { export class NavModelSrv {
@ -31,12 +40,13 @@ export class NavModelSrv {
getNav(...args) { getNav(...args) {
var children = this.navItems; var children = this.navItems;
var nav = {breadcrumbs: [], node: null}; var nav = new NavModel();
for (let id of args) { for (let id of args) {
let node = _.find(children, {id: id}); let node = _.find(children, {id: id});
nav.breadcrumbs.push(node); nav.breadcrumbs.push(node);
nav.node = node; nav.node = node;
nav.header = node;
children = node.children; children = node.children;
} }

15
public/app/features/admin/partials/configuration_home.html
Unescape View File

@ -1,9 +1,14 @@
<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>
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
</div>
</div>
</div>
<div class="page-container page-body">
<section class="card-section card-list-layout-grid"> <section class="card-section card-list-layout-grid">
<ol class="card-list"> <ol class="card-list">
<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children"> <li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">

3
public/app/features/alerting/alert_list_ctrl.ts
Unescape View File

@ -23,7 +23,8 @@ export class AlertListCtrl {
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, private $location, navModelSrv) { constructor(private backendSrv, private $location, navModelSrv) {
this.navModel = navModelSrv.getNav('alerting'); this.navModel = navModelSrv.getNav('alerting', 'alert-list');
this.navModel.setPageHeaderIndex(0);
var params = $location.search(); var params = $location.search();
this.filters.state = params.state || null; this.filters.state = params.state || null;

1
public/app/features/alerting/notifications_list_ctrl.ts
Unescape View File

@ -10,6 +10,7 @@ export class AlertNotificationsListCtrl {
constructor(private backendSrv, navModelSrv) { constructor(private backendSrv, navModelSrv) {
this.loadNotifications(); this.loadNotifications();
this.navModel = navModelSrv.getNav('alerting', 'channels'); this.navModel = navModelSrv.getNav('alerting', 'channels');
this.navModel.setPageHeaderIndex(0);
} }
loadNotifications() { loadNotifications() {

65
public/app/features/alerting/partials/alert_list.html
Unescape View File

@ -1,29 +1,52 @@
<navbar model="ctrl.navModel"></navbar> <div class="page-header-canvas">
<div class="page-container" >
<navbar model="ctrl.navModel"></navbar>
<div class="page-container" > <div class="page-header">
<div class="page-header"> <page-h1 model="ctrl.navModel" class="page-header__heading"></page-h1>
<page-h1 model="ctrl.navModel"></page-h1>
<a class="btn btn-secondary" ng-click="ctrl.openHowTo()"> <ul class="gf-tabs">
<i class="fa fa-info-circle"></i> <li class="gf-tabs-item">
How to add an alert <a class="gf-tabs-link active" href="alerting">
</a> <i class="fa fa-fw fa-list-ul"></i>
<a class="btn btn-inverse" href="alerting/notifications" > Alert Rules
<i class="fa fa-bell"></i> </a>
Notification channels </li>
</a> <li class="gf-tabs-item">
</div> <a class="gf-tabs-link" href="alerting/notifications">
<i class="gicon gicon-alert-notification-channel"></i>
Notification channels
</a>
</li>
</ul>
<div class="gf-form-group"> </div>
<div class="gf-form-inline"> </div>
<div class="gf-form"> </div>
<label class="gf-form-label">Filter by state</label>
<div class="gf-form-select-wrapper width-13"> <div class="page-container page-body">
<select class="gf-form-input" ng-model="ctrl.filters.state" ng-options="f.value as f.text for f in ctrl.stateFilters" ng-change="ctrl.filtersChanged()">
</select> <div class="page-action-bar">
</div> <div class="gf-form">
<label class="gf-form-label">Filter by state</label>
<div class="gf-form-select-wrapper width-13">
<select class="gf-form-input" ng-model="ctrl.filters.state" ng-options="f.value as f.text for f in ctrl.stateFilters" ng-change="ctrl.filtersChanged()">
</select>
</div> </div>
</div> </div>
<div class="page-action-bar__spacer">
</div>
<a class="btn btn-secondary" ng-click="ctrl.openHowTo()">
<i class="fa fa-info-circle"></i>
How to add an alert
</a>
<!-- <a class="btn btn&#45;inverse" href="alerting/notifications" > -->
<!-- <i class="fa fa&#45;bell"></i> -->
<!-- Notification channels -->
<!-- </a> -->
</div> </div>
<section class="card-section card-list-layout-list"> <section class="card-section card-list-layout-list">

35
public/app/features/alerting/partials/notifications_list.html
Unescape View File

@ -1,10 +1,35 @@
<navbar model="ctrl.navModel"></navbar> <div class="page-header-canvas">
<div class="page-container" >
<navbar model="ctrl.navModel"></navbar>
<div class="page-container" > <div class="page-header">
<div class="page-header"> <page-h1 model="ctrl.navModel" class="page-header__heading"></page-h1>
<page-h1 model="ctrl.navModel"></page-h1>
<a href="alerting/notification/new" class="btn btn-success pull-right"> <ul class="gf-tabs">
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="alerting">
<i class="fa fa-fw fa-list-ul"></i>
Alert Rules
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link active" href="alerting/notifications">
<i class="gicon gicon-alert-notification-channel"></i>
Notification channels
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="page-container page-body">
<div class="page-action-bar">
<div class="page-action-bar__spacer">
</div>
<a href="alerting/notification/new" class="btn btn-success">
<i class="fa fa-plus"></i>
New Channel New Channel
</a> </a>
</div> </div>

14
public/app/features/org/partials/profile.html
Unescape View File

@ -1,10 +1,14 @@
<navbar model="ctrl.navModel"></navbar> <div class="page-header-canvas">
<div class="page-container">
<navbar model="ctrl.navModel"></navbar>
<div class="page-container"> <div class="page-header">
<div class="page-header"> <page-h1 model="ctrl.navModel"></page-h1>
<page-h1 model="ctrl.navModel"></page-h1> </div>
</div> </div>
</div>
<div class="page-container page-body">
<form name="ctrl.userForm" class="gf-form-group"> <form name="ctrl.userForm" class="gf-form-group">
<h3 class="page-heading">Information</h3> <h3 class="page-heading">Information</h3>

11
public/app/features/plugins/partials/ds_edit.html
Unescape View File

@ -3,9 +3,7 @@
<navbar model="ctrl.navModel"></navbar> <navbar model="ctrl.navModel"></navbar>
<div class="page-header"> <div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1> <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-tabs" ng-show="ctrl.hasDashboards"> <div class="page-header-tabs" ng-show="ctrl.hasDashboards">
<ul class="gf-tabs"> <ul class="gf-tabs">
@ -28,6 +26,13 @@
</div> </div>
<div class="page-container page-body"> <div class="page-container page-body">
<div class="page-action-bar">
<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>
<div ng-if="ctrl.tabIndex === 0"> <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">

25
public/app/features/plugins/partials/ds_list.html
Unescape View File

@ -1,16 +1,25 @@
<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>
<a class="page-header__cta btn btn-success" href="datasources/new"> <div class="page-header">
Add data source <page-h1 model="ctrl.navModel"></page-h1>
</a>
</div>
</div>
</div>
<div class="page-container page-body">
<div class="page-action-bar">
<div class="page-action-bar__spacer"></div>
<a class="page-header__cta btn btn-success" href="datasources/new">
<i class="fa fa-plus"></i>
Add data source
</a>
</div> </div>
<section class="card-section" layout-mode> <section class="card-section" layout-mode>
<layout-selector></layout-selector> <layout-selector></layout-selector>
<ol class="card-list"> <ol class="card-list">
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources"> <li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
<a class="card-item" href="datasources/edit/{{ds.id}}/"> <a class="card-item" href="datasources/edit/{{ds.id}}/">

157
public/app/features/plugins/partials/plugin_edit.html
Unescape View File

@ -1,93 +1,94 @@
<navbar model="ctrl.navModel"></navbar> <div class="page-header-canvas">
<div class="page-container" ng-init="ctrl.init()">
<navbar model="ctrl.navModel"></navbar>
<div class="page-container" ng-init="ctrl.init()"> <div class="page-header">
<div class="page-header"> <div class="plugin-header">
<div class="plugin-header"> <span class="plugin-header-logo">
<span class="plugin-header-logo"> <img ng-src="{{ctrl.model.info.logos.large}}">
<img ng-src="{{ctrl.model.info.logos.large}}"> </span>
</span>
<div class="plugin-header-info-block"> <div class="plugin-header-info-block">
<h1 class="plugin-header-name">{{ctrl.model.name}}</h1> <h1 class="plugin-header-name">{{ctrl.model.name}}</h1>
<div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div> <div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div>
<div class="plugin-header-stamps"> <div class="plugin-header-stamps">
<span class="plugin-header-stamps-type"> <span class="plugin-header-stamps-type">
<i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}} <i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}}
</span> </span>
</div>
</div> </div>
</div> </div>
</div>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ctrl.tabs">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = $index" ng-class="{active: ctrl.tabIndex === $index}">
{{::tab}}
</a>
</li>
</ul>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ctrl.tabs">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = $index" ng-class="{active: ctrl.tabIndex === $index}">
{{::tab}}
</a>
</li>
</ul>
</div>
</div> </div>
</div>
<div class="page-body page-body--with-sidebar"> <div class="page-container 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> </div>
</div>
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'"> <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'">
<div ng-if="ctrl.model.id"> <div ng-if="ctrl.model.id">
<plugin-component type="app-config-ctrl"></plugin-component> <plugin-component type="app-config-ctrl"></plugin-component>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button> <button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
<button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button> <button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
<button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button> <button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
</div>
</div> </div>
</div> </div>
</div>
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'"> <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'">
<dashboard-import-list plugin="ctrl.model"></dashboard-import-list> <dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
</div>
<aside class="page-sidebar">
<section class="page-sidebar-section">
<h4>Version</h4>
<span>{{ctrl.model.info.version}}</span>
<div ng-show="ctrl.model.hasUpdate">
<a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
</div>
</section>
<section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
<h5>Includes</h4>
<ul class="ui-list plugin-info-list">
<li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item">
<i class="{{plug.icon}}"></i>
{{plug.name}}
</li>
</ul>
</section>
<section class="page-sidebar-section">
<h5>Dependencies</h4>
<ul class="ui-list plugin-info-list">
<li class="plugin-info-list-item">
<img src="public/img/grafana_icon.svg"></img>
Grafana {{ctrl.model.dependencies.grafanaVersion}}
</li>
<li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item">
<i class="{{plugDep.icon}}"></i>
{{plugDep.name}} {{plugDep.version}}
</li>
</ul>
</section>
<section class="page-sidebar-section">
<h5>Links</h4>
<ul class="ui-list">
<li ng-repeat="link in ctrl.model.info.links">
<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
</li>
</ul>
</section>
</aside>
</div> </div>
<aside class="page-sidebar">
<section class="page-sidebar-section">
<h4>Version</h4>
<span>{{ctrl.model.info.version}}</span>
<div ng-show="ctrl.model.hasUpdate">
<a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
</div>
</section>
<section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
<h5>Includes</h4>
<ul class="ui-list plugin-info-list">
<li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item">
<i class="{{plug.icon}}"></i>
{{plug.name}}
</li>
</ul>
</section>
<section class="page-sidebar-section">
<h5>Dependencies</h4>
<ul class="ui-list plugin-info-list">
<li class="plugin-info-list-item">
<img src="public/img/grafana_icon.svg"></img>
Grafana {{ctrl.model.dependencies.grafanaVersion}}
</li>
<li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item">
<i class="{{plugDep.icon}}"></i>
{{plugDep.name}} {{plugDep.version}}
</li>
</ul>
</section>
<section class="page-sidebar-section">
<h5>Links</h4>
<ul class="ui-list">
<li ng-repeat="link in ctrl.model.info.links">
<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
</li>
</ul>
</section>
</aside>
</div> </div>

119
public/app/features/plugins/partials/plugin_list.html
Unescape View File

@ -1,63 +1,68 @@
<navbar model="ctrl.navModel"></navbar>
<div class="page-container"> <div class="page-header-canvas">
<div class="page-header"> <div class="page-container">
<h1> <navbar model="ctrl.navModel"></navbar>
<i class="icon-gf icon-gf-apps"></i>
Plugins <span class="muted small">(currently installed)</span>
</h1>
<div class="page-header-tabs"> <div class="page-header">
<ul class="gf-tabs"> <page-h1 model="ctrl.navModel"></page-h1>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
Panels
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
Data sources
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
Apps
</a>
</li>
</ul>
<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> <div class="page-header-tabs">
Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com <ul class="gf-tabs">
</a> <li class="gf-tabs-item">
</div> <a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
</div> <i class="icon-gf icon-gf-panel"></i>
Panels
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
<i class="gicon gicon-datasources"></i>
Data sources
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
<i class="icon-gf icon-gf-apps"></i>
Apps
</a>
</li>
</ul>
<section class="card-section" layout-mode> <a class="get-more-plugins-link pull-right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
<layout-selector></layout-selector> Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
</a>
</div>
</div>
</div>
</div>
<div class="page-container page-body">
<section class="card-section" layout-mode>
<layout-selector></layout-selector>
<ol class="card-list" > <ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins"> <li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
<a class="card-item" href="plugins/{{plugin.id}}/edit"> <a class="card-item" href="plugins/{{plugin.id}}/edit">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-item-type"> <div class="card-item-type">
<i class="icon-gf icon-gf-{{plugin.type}}"></i> <i class="icon-gf icon-gf-{{plugin.type}}"></i>
{{plugin.type}} {{plugin.type}}
</div> </div>
<div class="card-item-notice" ng-show="plugin.hasUpdate"> <div class="card-item-notice" ng-show="plugin.hasUpdate">
<span bs-tooltip="plugin.latestVersion">Update available!</span> <span bs-tooltip="plugin.latestVersion">Update available!</span>
</div> </div>
</div> </div>
<div class="card-item-body"> <div class="card-item-body">
<figure class="card-item-figure"> <figure class="card-item-figure">
<img ng-src="{{plugin.info.logos.small}}"> <img ng-src="{{plugin.info.logos.small}}">
</figure> </figure>
<div class="card-item-details"> <div class="card-item-details">
<div class="card-item-name">{{plugin.name}}</div> <div class="card-item-name">{{plugin.name}}</div>
<div class="card-item-sub-name">By {{plugin.info.author.name}}</div> <div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
</div> </div>
</div> </div>
</a> </a>
</li> </li>
</ol> </ol>
</section> </section>
</div> </div>

1
public/sass/_grafana.scss
Unescape View File

@ -85,6 +85,7 @@
@import "components/code_editor"; @import "components/code_editor";
@import "components/dashboard_grid"; @import "components/dashboard_grid";
@import "components/dashboard_list"; @import "components/dashboard_list";
@import "components/page_header";
// PAGES // PAGES

2
public/sass/_variables.scss
Unescape View File

@ -227,5 +227,5 @@ $dashboard-padding: $panel-margin * 2;
$panel-padding: 0px 10px 5px 10px; $panel-padding: 0px 10px 5px 10px;
// tabs // tabs
$tabs-padding: 8px 15px 11px; $tabs-padding: 10px 15px 10px;

4
public/sass/base/_icons.scss
Unescape View File

@ -43,5 +43,9 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg');
} }
.gicon-alert-notification-channel {
background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg');
}

2
public/sass/components/_footer.scss
Unescape View File

@ -5,7 +5,7 @@
.footer { .footer {
color: $footer-link-color; color: $footer-link-color;
padding: 5rem 0 1rem 0; padding: 5rem 0 1rem 0;
font-size: $font-size-xs; font-size: $font-size-sm;
width: 98%; /* was causing horiz scrollbars - need to examine */ width: 98%; /* was causing horiz scrollbars - need to examine */
a { a {

61
public/sass/components/_page_header.scss
Unescape View File

@ -0,0 +1,61 @@
.page-header-canvas {
background: linear-gradient(90deg, #292a2d, black);
box-shadow: inset 0px -4px 14px #2d2d2d;
border-bottom: 1px solid $dark-4;
}
.page-header {
padding: 2rem 0 0 0;
.btn {
float: right;
margin-left: 1rem;
// better align icons
.fa {
position: relative;
top: 1px;
}
}
}
.page-header__title {
font-size: $font-size-h2;
flex-grow: 1;
margin-bottom: 2.5rem;
line-height: 50px;
}
.page-header__img {
border-radius: 50%;
margin-right: 0.5rem;
position: relative;
top: -3px;
width: 50px;
height: 50px;
}
.page-header__icon {
font-size: 150%;
margin-right: 0.5rem;
width: 50px;
height: 50px;
position: relative;
&.fa {
top: 3px;
}
&.icon-gf {
top: 3px;
}
}
.page-heading {
font-size: 1.25rem;
margin-top: 0;
margin-bottom: $spacer * 0.7;
}

6
public/sass/components/_tabs.scss
Unescape View File

@ -1,6 +1,8 @@
.gf-tabs { .gf-tabs {
@include clearfix(); @include clearfix();
float: left; float: left;
position: relative;
top: 1px;
} }
.gf-tabs-item { .gf-tabs-item {
@ -18,7 +20,7 @@
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
i { i {
padding-right: 5px; margin-right: 5px;
} }
&:hover, &:hover,
@ -32,8 +34,6 @@
border-color: $orange $dark-4 transparent; border-color: $orange $dark-4 transparent;
background: $page-bg; background: $page-bg;
color: $link-color; color: $link-color;
position: relative;
top: 1px;
} }
} }

86
public/sass/layout/_page.scss
Unescape View File

@ -42,6 +42,17 @@
} }
} }
.page-action-bar {
margin-bottom: $spacer * 2;
display: flex;
align-items: flex-start;
}
.page-action-bar__spacer {
width: $spacer * 2;
flex-grow: 1;
}
.page-content-with-sidebar { .page-content-with-sidebar {
width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
} }
@ -53,68 +64,6 @@
} }
} }
.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;
.btn {
float: right;
margin-left: 1rem;
// better align icons
.fa {
position: relative;
top: 1px;
}
}
}
.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;
margin-top: 0;
margin-bottom: $spacer * 0.7;
}
.admin-page {
max-width: 800px;
margin-left: 10px;
h2 {
margin-left: 15px;
margin-bottom: 0px;
font-size: $font-size-lg;
color: $text-color;
i {
padding-right: 6px;
}
}
}
.page-sidebar { .page-sidebar {
color: $text-color-weak; color: $text-color-weak;
h4 { h4 {
@ -207,13 +156,12 @@
// 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;
} }
} }

Write Preview
Loading…
Cancel
Save