Skip to content

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

ux(): worked more on new tabs view

parents a414dd02 a3e22091
Showing with 447 additions and 549 deletions
pkg/api/dataproxy.go
......@@ -64,20 +64,12 @@ func NewReverseProxy(ds *m.DataSource, proxyPath string, targetUrl *url.URL) *ht
return &httputil.ReverseProxy{Director: director}
}
var dsMap map[int64]*m.DataSource = make(map[int64]*m.DataSource)
func getDatasource(id int64, orgId int64) (*m.DataSource, error) {
// ds, exists := dsMap[id]
// if exists && ds.OrgId == orgId {
// return ds, nil
// }
query := m.GetDataSourceByIdQuery{Id: id, OrgId: orgId}
if err := bus.Dispatch(&query); err != nil {
return nil, err
}
dsMap[id] = &query.Result
return &query.Result, nil
}
......
public/app/features/dashboard/dashnav/dashnav.ts
......@@ -12,6 +12,8 @@ export class DashNavCtrl {
$scope.init = function() {
$scope.onAppEvent('save-dashboard', $scope.saveDashboard);
$scope.onAppEvent('delete-dashboard', $scope.deleteDashboard);
$scope.onAppEvent('export-dashboard', $scope.snapshot);
$scope.onAppEvent('quick-snapshot', $scope.quickSnapshot);
$scope.showSettingsMenu = $scope.dashboardMeta.canEdit || $scope.contextSrv.isEditor;
......@@ -52,6 +54,10 @@ export class DashNavCtrl {
});
};
$scope.quickSnapshot = function() {
$scope.shareDashboard(1);
};
$scope.openSearch = function() {
$scope.appEvent('show-dash-search');
};
......
public/app/features/dashboard/keybindings.js
......@@ -60,6 +60,14 @@ function(angular, $) {
scope.appEvent('zoom-out', evt);
}, { inputDisabled: true });
keyboardManager.bind('ctrl+e', function(evt) {
scope.appEvent('export-dashboard', evt);
}, { inputDisabled: true });
keyboardManager.bind('ctrl+i', function(evt) {
scope.appEvent('quick-snapshot', evt);
}, { inputDisabled: true });
keyboardManager.bind('esc', function() {
var popups = $('.popover.in');
if (popups.length > 0) {
......
public/app/features/dashboard/partials/graphiteImport.html
<div ng-controller="GraphiteImportCtrl" ng-init="init()">
<div ng-if="datasources.length > 0">
<h2 style="margin-top: 30px;">Load dashboard from Graphite-Web</h2>
<h2 class="page-heading">Load dashboard from Graphite-Web</h2>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Data source</span>
</div>
<div class="gf-form width-30">
<div class="gf-form">
<div class="gf-form-select-wrapper">
<select type="text" ng-model="options.sourceName" class="gf-form-input max-width-10" ng-options="f for f in datasources">
<select type="text" ng-model="options.sourceName" class="gf-form-input gf-size-auto" ng-options="f for f in datasources">
</select>
</div>
</div>
<div class="gf-form">
<button class="btn btn-inverse pull-right" ng-click="listAll()">List dashboards</button>
<button class="btn btn-success pull-right" ng-click="listAll()">List dashboards</button>
</div>
</div>
</div>
......
public/app/features/dashboard/partials/shareModal.html
......@@ -35,53 +35,30 @@
<div ng-include src="'shareLinkOptions.html'"></div>
<div class="gf-form">
<div class="gf-form-row">
<span class="gf-fluid-input">
<textarea rows="5" data-share-panel-url class="input" ng-model='iframeHtml'></textarea>
</span>
<div class="gf-form-group position-center">
<div class="gf-form width-30" >
<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea>
</div>
</div>
<div class="gf-form-group">
<div class="gf-form position-center">
<button class="btn btn-inverse" data-clipboard-text="{{iframeHtml}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
</div>
<button class="btn btn-inverse" data-clipboard-text="{{iframeHtml}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
</div>
</script>
<script type="text/ng-template" id="shareLinkOptions.html">
<div class="editor-row" style="margin: 11px 20px 33px 20px">
<div class="section">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 170px;">
<label class="checkbox-label" for="options.forCurrent">Current time range</label>
</li>
<li class="tight-form-item last">
<input class="cr1" id="options.forCurrent" type="checkbox" ng-model="options.forCurrent" ng-checked="options.forCurrent" ng-change="buildUrl()">
<label for="options.forCurrent" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 170px">
<label class="checkbox-label" for="options.includeTemplateVars">Include template variables</label>
</li>
<li class="tight-form-item last">
<input class="cr1" id="options.includeTemplateVars" type="checkbox" ng-model="options.includeTemplateVars" ng-checked="options.includeTemplateVars" ng-change="buildUrl()">
<label for="options.includeTemplateVars" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 170px">
Theme
</li>
<li>
<select class="input-small tight-form-input last" style="width: 211px" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-group position-center">
<div class="gf-form">
<editor-checkbox text="Current time range" model="options.forCurrent" change="updated()"></editor-checkbox>
</div>
<div class="gf-form">
<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="updated()"></editor-checkbox>
</div>
<div class="gf-form">
<span class="gf-form-label">Theme</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
</div>
</div>
</div>
......@@ -93,14 +70,19 @@
</div>
<div ng-include src="'shareLinkOptions.html'"></div>
<div class="gf-form">
<div class="gf-form-row">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
<span class="gf-fluid-input">
<input type="text" data-share-panel-url class="input" ng-model='shareUrl'></input>
</span>
<div class="gf-form-group position-center">
<div class="gf-form-inline">
<div class="gf-form width-30">
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
</div>
<div class="gf-form pull-right">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
</div>
</div>
<div class="editor-row" style="margin-top: 5px;" ng-show="modeSharePanel">
</div>
<div class="gf-form-group">
<div class="gf-form position-center" ng-show="modeSharePanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div>
</div>
......@@ -132,57 +114,44 @@
</p>
</div>
<div class="editor-row share-modal-options" style="">
<div class="section" ng-if="step === 1">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 110px;">
Snapshot name
</li>
<li>
<input type="text" ng-model="snapshot.name" class="input-large tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 110px">
Expire
</li>
<li>
<select class="input-small tight-form-input last" style="width: 211px" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-group share-modal-options position-center">
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Snapshot name</span>
<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
</div>
<div class="gf-form">
<span class="gf-form-label width-12">Expire</span>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
</div>
</div>
<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
<div class="gf-form-row">
<a href="{{snapshotUrl}}" class="large share-snapshot-link" target="_blank">
<i class="fa fa-external-link-square"></i>
{{snapshotUrl}}
</a>
<br>
<button class="btn btn-inverse btn-large" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button>
<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
<div class="gf-form-row">
<a href="{{snapshotUrl}}" class="large share-snapshot-link" target="_blank">
<i class="fa fa-external-link-square"></i>
{{snapshotUrl}}
</a>
<br>
<button class="btn btn-inverse btn-large" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button>
</div>
</div>
</div>
</div>
<div ng-if="step === 1">
<button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-disabled="loading">
<i class="fa fa-save"></i>
Local Snapshot
</button>
<button class="btn btn-primary btn-large" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
<i class="fa fa-cloud-upload"></i>
{{sharingButtonText}}
</button>
</div>
<div ng-if="step === 1" class="gf-form-buttons-row">
<button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-disabled="loading">
<i class="fa fa-save"></i>
Local Snapshot
</button>
<button class="btn btn-primary btn-large" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
<i class="fa fa-cloud-upload"></i>
{{sharingButtonText}}
</button>
</div>
<div class="pull-right" ng-if="step === 2" style="padding: 5px">
Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
<div class="pull-right" ng-if="step === 2" style="padding: 5px">
Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
</div>
</div>
</div>
......
public/app/features/dashboard/submenu/submenu.html
<div class="submenu-controls">
<div class="tight-form borderless">
<ul ng-if="ctrl.dashboard.templating.list.length > 0">
<li ng-repeat="variable in ctrl.variables" class="submenu-item">
<span class="submenu-item-label template-variable " ng-show="!variable.hideLabel">
{{variable.label || variable.name}}:
</span>
<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
</li>
</ul>
<ul class="tight-form-list" ng-if="ctrl.dashboard.templating.list.length > 0">
<li ng-repeat="variable in ctrl.variables" class="submenu-item">
<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
{{variable.label || variable.name}}:
</span>
<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
</li>
</ul>
<ul ng-if="ctrl.dashboard.annotations.list.length > 0">
<li ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
<a ng-click="ctrl.disableAnnotation(annotation)">
<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
{{annotation.name}}
<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
<label for="hideYAxis" class="cr1"></label>
</a>
</li>
</ul>
<ul class="tight-form-list" ng-if="ctrl.dashboard.annotations.list.length > 0">
<li ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
<a ng-click="ctrl.disableAnnotation(annotation)">
<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
{{annotation.name}}
<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
<label for="hideYAxis" class="cr1"></label>
</a>
</li>
</ul>
<ul class="pull-right" ng-if="ctrl.dashboard.links.length > 0">
<dash-links-container links="ctrl.dashboard.links"></dash-links-container>
</ul>
<ul class="tight-form-list pull-right" ng-if="ctrl.dashboard.links.length > 0">
<dash-links-container links="ctrl.dashboard.links"></dash-links-container>
</ul>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
public/app/features/dashboard/timepicker/settings.html
<div class="editor-row">
<div class="section">
<div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 118px">
Auto-refresh
</li>
<li>
<input type="text" class="input-xlarge tight-form-input last" style="width: 450px" ng-model="ctrl.panel.refresh_intervals" array-join>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 118px">
Now delay
</li>
<li class="tight-form-item">
now-
</li>
<li>
<input type="text" class="input-mini tight-form-input last"
ng-model="ctrl.panel.nowDelay" placeholder="0m"
valid-time-span
bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
data-placement="right">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">Auto-refresh</span>
<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.refresh_intervals" array-join>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Now delay now-</span>
<input type="text" class="gf-form-input max-width-25"
ng-model="ctrl.panel.nowDelay" placeholder="0m"
valid-time-span
bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
data-placement="right">
</div>
</div>
public/app/features/dashlinks/editor.html
<div class="editor-row">
<h5>Links and Dash Navigation</h5>
<h5 class="page-heading">Links and Dash Navigation</h5>
<div ng-repeat="link in dashboard.links" style="margin-top: 10px;">
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li class="tight-form-item">
<i ng-click="moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
<i ng-click="moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-fw fa-arrow-down"></i>
</li>
<li class="tight-form-item last">
<i class="fa fa-remove pointer" ng-click="deleteLink($index)"></i>
</li>
</ul>
<div ng-repeat="link in dashboard.links">
<div class="gf-form-group" style="/*background: #292929; border-bottom: 2px solid #1f1d1d; padding: 10px; margin-bottom: 5px;*/">
<div class="gf-form-inline pull-right">
<div class="gf-form-buttons-row">
<button class="btn btn-inverse btn-mini" ng-hide="$first"><i ng-click="moveLink($index, -1)" class="fa fa-arrow-up"></i></button>
<button class="btn btn-inverse btn-mini" ng-hide="$last"><i ng-click="moveLink($index, 1)" class="fa fa-arrow-down"></i></button>
<button class="btn btn-inverse btn-mini"><i class="fa fa-remove" ng-click="deleteLink($index)"></i></button>
</div>
</div>
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink"></i>
</li>
</div>
<li class="tight-form-item">Type</li>
<li>
<select class="input-medium tight-form-input" style="width: 150px;" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
</li>
<div class="gf-form">
<span class="gf-form-label width-6">Type</span>
<div class="gf-form-select-wrapper width-10">
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
</div>
</div>
<li class="tight-form-item" ng-show="link.type === 'dashboards'">With tags</li>
<li ng-show="link.type === 'dashboards'">
<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags">
</bootstrap-tagsinput>
</li>
<li class="tight-form-item" ng-show="link.type === 'dashboards'">
<div class="gf-form" ng-show="link.type === 'dashboards'">
<span class="gf-form-label">With tags</span>
<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags"></bootstrap-tagsinput>
</div>
<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
<span class="gf-form-label width-6">Title</span>
<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
</div>
<div class="gf-form" ng-show="link.type === 'dashboards'">
<editor-checkbox text="As dropdown" model="link.asDropdown" change="updated()"></editor-checkbox>
</li>
<li class="tight-form-item" ng-show="link.type === 'dashboards' && link.asDropdown">
Title
</li>
<li ng-show="link.type === 'dashboards' && link.asDropdown">
<input type="text" ng-model="link.title" class="input-medium tight-form-input" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 51px">Url</li>
<li ng-show="link.type === 'link'">
<input type="text" ng-model="link.url" class="input-xlarge tight-form-input" style="width: 302px;" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'">
</div>
<div class="gf-form" ng-show="link.type === 'link'">
<li class="gf-form-label width-6">Url</li>
<input type="text" ng-model="link.url" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
<editor-checkbox text="Open in new tab " model="link.targetBlank" change="updated()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="link.type === 'link'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
</div>
</div>
<div class="gf-form-inline" ng-show="link.type === 'link'">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 31px">Title</li>
<li ng-show="link.type === 'link'">
<input type="text" ng-model="link.title" class="input-medium tight-form-input" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 51px">Tooltip</li>
<li ng-show="link.type === 'link'">
<input type="text" ng-model="link.tooltip" class="input-medium tight-form-input" style="width: 151px" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'">Icon</li>
<li ng-show="link.type === 'link'">
<select class="input-medium tight-form-input" style="width: 110px;" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Title</span>
<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Tooltip</span>
<input type="text" ng-model="link.tooltip" class="gf-form-input max-width-10" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Icon</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
</div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form width-1">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item">
</div>
<div class="gf-form">
<editor-checkbox text="Keep current time range" model="link.keepTime" change="updated()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Add current variable values" model="link.includeVars" change="updated()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="editor-row">
<br>
<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
</div>
<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
public/app/features/org/partials/apikeyModal.html
......@@ -10,23 +10,16 @@
</button>
</div>
<div class="gf-box-body" style="min-height: 0px;">
<div class="gf-box-body">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
<strong>Key</strong>
</li>
<li class="tight-form-item last">
{{key}}
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">Key</span>
<span class="gf-form-label">{{key}}</span>
</div>
</div>
<br>
<br>
<div class="grafana-info-box" style="text-align: left">
<div class="grafana-info-box" style="border: 0;">
You will only be able to view this key here once! It is not stored in this form. So be sure to copy it now.
<br>
<br>
......
public/app/features/org/partials/newOrg.html
......@@ -6,24 +6,16 @@
<h2 style="margin-top: 30px;">Add Organization</h2>
<form name="form">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
<strong>Org. name</strong>
</li>
<li>
<input type="text" ng-model="newOrg.name" required class="input-xxlarge tight-form-input last" placeholder="organization name">
</li>
<li>
</li>
</ul>
<div class="clearfix"></div>
<form name="form" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">Org. name</span>
<input type="text" ng-model="newOrg.name" required class="gf-form-input" placeholder="organization name">
</div>
<br>
<button class="btn btn-success pull-right" ng-click="createOrg()">Create</button>
<div class="gf-form-buttons-row">
<button class="btn btn-success pull-right" ng-click="createOrg()">Create</button>
</div>
</form>
</div>
</div>
public/app/features/panel/panel_directive.ts
......@@ -28,7 +28,7 @@ var panelTemplate = `
</div>
<div class="panel-full-edit" ng-if="ctrl.editMode">
<div class="tabbed-view">
<div class="tabbed-view tabbed-view--panel-edit">
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
<i ng-class="ctrl.icon"></i>
......@@ -44,7 +44,7 @@ var panelTemplate = `
</ul>
<button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
Back to dashboard
<i class="fa fa-remove"></i>
</button>
</div>
......
public/app/features/panel/partials/panelTime.html
<div class="editor-row">
<div class="section tight-form-container" style="margin-bottom: 20px">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-clock-o"></i>
</li>
<li class="tight-form-item" style="width: 178px">
<strong>Override relative time</strong>
</li>
<li class="tight-form-item" style="width: 50px">
Last
</li>
<li>
<input type="text" class="input-small tight-form-input last" placeholder="1h"
empty-to-null ng-model="ctrl.panel.timeFrom" valid-time-span
ng-change="ctrl.refresh()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-clock-o"></i>
</li>
<li class="tight-form-item" style="width: 178px">
<strong>Add time shift</strong>
</li>
<li class="tight-form-item" style="width: 50px">
Amount
</li>
<li>
<input type="text" class="input-small tight-form-input last" placeholder="1h"
empty-to-null ng-model="ctrl.panel.timeShift" valid-time-span
ng-change="ctrl.refresh()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-clock-o"></i>
</li>
<li class="tight-form-item" style="width: 178px">
<strong>Hide time override info</strong>
</li>
<li class="tight-form-item last">
<input class="cr1" id="ctrl.panel.hideTimeOverride" type="checkbox"
ng-model="ctrl.panel.hideTimeOverride" ng-checked="ctrl.panel.hideTimeOverride" ng-change="ctrl.refresh()">
<label for="ctrl.panel.hideTimeOverride" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">
<i class="fa fa-clock-o"></i>
</span>
<span class="gf-form-label width-12">Override relative time</span>
<span class="gf-form-label width-6">Last</span>
<input type="text" class="gf-form-input max-width-8" placeholder="1h"
empty-to-null ng-model="ctrl.panel.timeFrom" valid-time-span
ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<span class="gf-form-label">
<i class="fa fa-clock-o"></i>
</span>
<span class="gf-form-label width-12">Add time shift</span>
<span class="gf-form-label width-6">Amount</span>
<input type="text" class="gf-form-input max-width-8" placeholder="1h"
empty-to-null ng-model="ctrl.panel.timeShift" valid-time-span
ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<span class="gf-form-label">
<i class="fa fa-clock-o"></i>
</span>
<editor-checkbox text="Hide time override info" model="ctrl.panel.hideTimeOverride" change="ctrl.refresh()"></editor-checkbox>
</div>
</div>
public/app/features/panellinks/module.html
<div class="editor-row">
<div class="section">
<h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
<h5 class="section-heading">
Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
</h5>
<div ng-repeat="link in panel.links" style="margin-top: 20px;">
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li class="tight-form-item">
<i ng-click="moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
<i ng-click="moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-fw fa-arrow-down"></i>
</li>
<li class="tight-form-item last">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
</li>
</ul>
<div ng-repeat="link in panel.links" style="margin-top: 20px;">
<div class="gf-form-group">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<i class="fa fa-fw fa-unlink"></i>
</li>
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink"></i>
</div>
<li class="tight-form-item">Type</li>
<li>
<select class="input-medium tight-form-input" style="width: 150px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</li>
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper width-14">
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</div>
</div>
<li class="tight-form-item" ng-show="link.type === 'dashboard'" style="width: 73px;">Dashboard</li>
<li ng-show="link.type === 'dashboard'">
<input type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="input-large tight-form-input" ng-blur="dashboardChanged(link)">
</li>
<div class="gf-form">
<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
<input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input max-width-14" ng-blur="dashboardChanged(link)">
<li class="tight-form-item" ng-show="link.type === 'absolute'" style="width: 73px;">Url</li>
<li ng-show="link.type === 'absolute'">
<input type="text" ng-model="link.url" class="input-large tight-form-input">
</li>
<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
<input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
</div>
</ul>
<div class="clearfix"></div>
<div class="gf-form">
<button class="btn-inverse gf-form-btn btn-small" ng-click="deleteLink(link)"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item" style="width: 31px">Title</li>
<li>
<input type="text" ng-model="link.title" class="input-medium tight-form-input">
</li>
<li class="tight-form-item" style="width: 73px;">
Url params
</li>
<li>
<input type="text" ng-model="link.params" class="input-large tight-form-input">
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink invisible"></i>
</div>
<div class="gf-form">
<div class="gf-form-label width-7">Title</div>
<input type="text" ng-model="link.title" class="gf-form-input">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Url params</span>
<input type="text" ng-model="link.params" class="gf-form-input">
</div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item">
<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
</li>
<li class="tight-form-item last">
<editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink invisible"></i>
</div>
<div class="gf-form">
<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
<editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
<editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
</div>
</div>
</div>
</div>
</div>
<div class="editor-row">
<br>
<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
</div>
public/app/features/panellinks/module.js
......@@ -52,6 +52,5 @@ function (angular, _) {
$scope.deleteLink = function(link) {
$scope.panel.links = _.without($scope.panel.links, link);
};
});
});
public/app/features/snapshot/partials/snapshots.html
......@@ -2,39 +2,39 @@
</navbar>
<div class="page-container">
<div class="page-wide">
<div class="page-header">
<h1>Available snapshots</h1>
</div>
<table class="filter-table" style="margin-top: 20px">
<thead>
<th><strong>Name</strong></th>
<th><strong>Snapshot url</strong></th>
<th style="width: 70px"></th>
<th style="width: 25px"></th>
</thead>
<table class="filter-table" style="margin-top: 20px">
<thead>
<th><strong>Name</strong></th>
<th><strong>Snapshot url</strong></th>
<th style="width: 70px"></th>
<th style="width: 25px"></th>
<tr ng-repeat="snapshot in ctrl.snapshots">
<td>
<a href="dashboard/snapshot/{{snapshot.key}}">{{snapshot.name}}</a>
</td>
<td >
<a href="dashboard/snapshot/{{snapshot.key}}">dashboard/snapshot/{{snapshot.key}}</a>
</td>
<td class="text-center">
<a href="dashboard/snapshot/{{snapshot.key}}" class="btn btn-inverse btn-mini">
<i class="fa fa-eye"></i>
View
</a>
</td>
<td class="text-right">
<a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</thead>
<tr ng-repeat="snapshot in ctrl.snapshots">
<td>
<a href="dashboard/snapshot/{{snapshot.key}}">{{snapshot.name}}</a>
</td>
<td >
<a href="dashboard/snapshot/{{snapshot.key}}">dashboard/snapshot/{{snapshot.key}}</a>
</td>
<td class="text-center">
<a href="dashboard/snapshot/{{snapshot.key}}" class="btn btn-inverse btn-mini">
<i class="fa fa-eye"></i>
View
</a>
</td>
<td class="text-right">
<a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
public/app/partials/help_modal.html
......@@ -32,6 +32,10 @@
<td><span class="label label-info">CTRL+S</span></td>
<td>Save dashboard</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+E</span></td>
<td>Export dashboard</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+H</span></td>
<td>Hide row controls</td>
......@@ -40,6 +44,10 @@
<td><span class="label label-info">CTRL+Z</span></td>
<td>Zoom out</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+I</span></td>
<td>Quick snapshot</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+O</span></td>
<td>Enable/Disable shared graph crosshair</td>
......
public/app/partials/panelgeneral.html
......@@ -31,10 +31,6 @@
</div>
</div>
<br>
<br>
<br>
<panel-links-editor panel="ctrl.panel"></panel-links-editor>
public/app/partials/reset_password.html
<div class="container">
<div class="login-container container">
<div class="login-box">
<div class="login-box-logo">
<a href="login">
<img src="img/logo_transparent_200x75.png">
</a>
<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div>
<div class="login-inner-box">
......@@ -15,76 +14,50 @@
</button>
</div>
<form name="sendResetForm" class="login-form" ng-show="mode === 'send'">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 78px">
<strong>User</strong>
</li>
<li>
<input type="text" name="username" class="tight-form-input last" required ng-model='formModel.userOrEmail' placeholder="email or username" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
<form name="sendResetForm" class="login-form gf-form-group" ng-show="mode === 'send'">
<div class="gf-form">
<span class="gf-form-label width-7">User</span>
<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username">
</div>
<div class="login-submit-button-row">
<button type="submit" class="btn" ng-click="sendResetEmail();" ng-class="{'btn-inverse': !sendResetForm.$valid, 'btn-primary': sendResetForm.$valid}">
<div class="gf-form-button-row">
<button type="submit" class="btn btn-large" ng-click="sendResetEmail();" ng-class="{'btn-inverse': !sendResetForm.$valid, 'btn-primary': sendResetForm.$valid}">
Send reset instructions
</button>
</div>
</form>
<h5 ng-if="mode === 'email-sent'" style="text-align: center; padding: 20px;">
<h5 style="text-align: center; padding: 20px;" ng-if="mode === 'email-sent'">
An email with a reset link as been sent to the email address, you should receive it shortly.
</h5>
<form name="resetForm" class="login-form" ng-show="mode === 'reset'">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 125px">
<strong>New Password</strong>
</li>
<li>
<input type="password" name="NewPassword" class="tight-form-input last" required ng-minlength="4" ng-model='formModel.newPassword' placeholder="password" style="width: 207px" watch-change="formModel.newPassword = inputValue;">
</li>
</ul>
<div class="clearfix"></div>
<form name="resetForm" class="login-form gf-form-group" ng-show="mode === 'reset'">
<div class="gf-form">
<span class="gf-form-label width-10">New Password</span>
<input type="password" name="NewPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.newPassword' placeholder="password" watch-change="formModel.newPassword = inputValue;">
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 125px">
<strong>Confirm Password</strong>
</li>
<li>
<input type="password" name="ConfirmPassword" class="tight-form-input last" required ng-minlength="4" ng-model='formModel.confirmPassword' placeholder="confirm password" style="width: 207px">
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form">
<span class="gf-form-label width-10">Confirm Password</span>
<input type="password" name="ConfirmPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.confirmPassword' placeholder="confirm password">
</div>
<div style="margin-left: 141px; width: 207px;">
<password-strength password="formModel.newPassword"></password-strength>
</div>
<div class="login-submit-button-row">
<div class="gf-form-button-row">
<button type="submit" class="btn" ng-click="submitReset();" ng-class="{'btn-inverse': !resetForm.$valid, 'btn-primary': resetForm.$valid}">
Reset Password
</button>
</div>
</form>
<div class="clearfix"></div>
</div>
<div class="row" style="margin-top: 40px">
<div class="row" style="margin-top: 20px">
<div class="text-center">
<a href="login">
Back to login
</a>
<a href="login">Back to login</a>
</div>
</div>
</div>
</div>
public/app/partials/roweditor.html
......@@ -5,60 +5,45 @@
Row settings
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['General']" data-title="{{tab}}">
</div>
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="gf-box-body">
<div class="row">
<div class="col-md-8">
<div class="page-heading">
<h5>Row details</h5>
</div>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="editor-row">
<div class="section">
<h5>Row details</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
Title
</li>
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model='row.title'></input>
</li>
<li class="tight-form-item">
Height
</li>
<li>
<input type="text" class="input-small tight-form-input" ng-model='row.height'></input>
</li>
<li class="tight-form-item last">
<label class="checkbox-label" for="row.showTitle">Show Title</label>
<input class="cr1" id="row.showTitle" type="checkbox" ng-model="row.showTitle" ng-checked="row.showTitle">
<label for="row.showTitle" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form">
<span class="gf-form-label width-6">Title</span>
<input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Height</span>
<input type="text" class="gf-form-input max-width-8" ng-model='row.height'></input>
<editor-checkbox text="Show Title" model="row.showTitle"></editor-checkbox>
</div>
</div>
</div>
</div>
<div class="section">
<h5>Templating options</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
Repeat Row
</li>
<li>
<select class="input-small tight-form-input last" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<div class="col-md-4">
<div class="page-heading">
<h5>Templating options</h5>
</div>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">Repeat Row</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option>
</select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
public/app/partials/valueSelectDropdown.html
<div class="variable-link-wrapper">
<a ng-click="vm.show()" class="variable-value-link tight-form-item">
<a ng-click="vm.show()" class="variable-value-link">
{{vm.linkText}}
<span ng-repeat="tag in vm.selectedTags" bs-tooltip='tag.valuesText' data-placement="bottom">
<span class="label-tag"tag-color-from-name="tag.text">
......@@ -10,7 +10,7 @@
<i class="fa fa-caret-down"></i>
</a>
<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
<input type="text" class="hidden-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
<div class="variable-value-dropdown" ng-if="vm.dropdownVisible" ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}">
<div class="variable-options-wrapper">
......
public/sass/_variables.dark.scss
......@@ -53,6 +53,10 @@ $page-bg: $dark-2;
$body-color: $gray-4;
$text-color: $gray-4;
// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
// Links
// -------------------------
$link-color: darken($white,11%);
......
public/sass/_variables.light.scss
......@@ -59,6 +59,10 @@ $page-bg: $white;
$body-color: $gray-1;
$text-color: $gray-1;
// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
// Links
// -------------------------
$link-color: $gray-1;
......
public/sass/_variables.scss
......@@ -218,3 +218,4 @@ $side-menu-width: 14rem;
// dashboard
$dashboard-padding: $spacer / 2;
public/sass/components/_dashboard.scss
......@@ -271,17 +271,12 @@ div.flot-text {
}
.dashboard-header {
font-family: "grafana-icons";
font-size: 22px;
font-family: $headings-font-family;
font-size: $font-size-h2;
text-align: center;
span {
display: inline-block;
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid transparent;
@include brand-bottom-border();
padding: 1.2rem .5rem .4rem .5rem;
}
}
......
public/sass/components/_gf-form.scss
......@@ -9,12 +9,6 @@ $gf-form-label-margin: 0.25rem;
align-items: center;
text-align: left;
.checkbox-label {
display: inline;
cursor: pointer;
padding: 8px 7px 8px 4px;
}
.cr1 {
margin-left: 8px;
}
......@@ -58,6 +52,15 @@ $gf-form-label-margin: 0.25rem;
.gf-form-checkbox {
flex-shrink: 0;
padding: $input-padding-y $input-padding-x;
line-height: $input-line-height;
.checkbox-label {
display: inline;
cursor: pointer;
padding: $input-padding-y $input-padding-x;
line-height: $input-line-height;
}
}
.gf-form-input {
......
public/sass/components/_modals.scss
......@@ -118,6 +118,8 @@
}
.share-modal-big-icon {
margin-bottom: 2rem;
.fa, .icon-gf {
font-size: 70px;
}
......@@ -147,3 +149,9 @@
text-overflow: ellipsis;
}
}
.modal-body {
.position-center {
display: inline-block;
}
}
public/sass/components/_submenu.scss
.submenu-controls {
margin: 10px 5px;
margin: 0 5px;
font-size: 16px;
}
......@@ -23,6 +23,7 @@
border: $panel-border;
margin-right: 10px;
display: inline-block;
float: left;
.fa-caret-down {
font-size: 75%;
......@@ -37,11 +38,35 @@
.label-tag {
margin: 0 5px;
}
padding: 8px 7px;
box-sizing: content-box;
display: inline-block;
font-weight: normal;
display: inline-block;
color: $text-color;
}
.submenu-item-label {
padding: 8px 0px 8px 7px;
box-sizing: content-box;
display: inline-block;
font-weight: normal;
display: inline-block;
}
.variable-link-wrapper {
display: inline-block;
position: relative;
.hidden-input {
padding: 8px 7px;
border: none;
margin: 0px;
background: transparent;
border-radius: 0;
border-right: 1px solid $tight-form-border;
}
}
.variable-value-dropdown {
......
public/sass/components/_tabbed_view.scss
.tabbed-view {
background-color: $page-bg;
background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
background-image: $page-gradient;
margin: -$dashboard-padding;
margin-bottom: $spacer*2;
padding: $spacer*3;
&.tabbed-view--panel-edit {
padding: 0;
.tabbed-view-header {
padding: 0;
background-color: $body-bg;
padding: 1.5em 1rem 0 1rem;
}
.gf-tabs-link.active {
background-color: $panel-bg;
}
}
}
.tabbed-view-header {
@include clearfix();
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid transparent;
@include brand-bottom-border();
}
.tabbed-view-title {
......
public/sass/components/_tabs.scss
......@@ -55,7 +55,7 @@
&:hover,
&:focus {
border-color: #F9952B;
border-color: rgba(216, 131, 40, 0.77);
color: $link-color;
}
......@@ -63,8 +63,7 @@
&.active:hover,
&.active:focus {
@include border-radius(3px);
border: 1px solid #F9952B;
background-color: transparent;
border-color: rgba(216, 131, 40, 0.77);
border-bottom: 1px solid $panel-bg;
color: $link-color;
}
......
public/sass/components/_tags.scss
......@@ -25,6 +25,7 @@
padding: 2px 6px;
border-width: 1px;
border-style: solid;
box-shadow: 0 0 1px rgba($white,.2);
.icon-tag {
position: relative;
top: 1px;
......
public/sass/layout/_page.scss
......@@ -33,12 +33,7 @@
justify-content: flex-end;
align-items: flex-end;
flex-wrap: wrap-reverse;
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid transparent;
@include brand-bottom-border();
h1 {
font-style: italic;
......
public/sass/mixins/_mixins.scss
......@@ -343,3 +343,12 @@
border-bottom: 0;
border-left: 2px solid transparent;
}
@mixin brand-bottom-border() {
border-image: $brand-gradient;
border-image-slice: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid transparent;
}
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