Skip to content

N
nexpie-grafana-theme
Commit 3003a8cb by Torkel Ödegaard
Options

ux(sass): a lot of polish on headings and margins, ONLY USE bottom margins,… 

ux(sass): a lot of polish on headings and margins, ONLY USE bottom margins, othewise margin collapse causes issues
parent 25ca751a
Showing with 156 additions and 144 deletions
public/app/features/datasources/partials/edit.html
......@@ -38,7 +38,7 @@
</div>
</div>
<div class="" style="margin-top: 35px">
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
......@@ -46,6 +46,5 @@
</button>
<a class="btn-text" href="datasources">Cancel</a>
</div>
<br>
</form>
</div>
public/app/features/datasources/partials/http_settings.html
<div class="gf-form-group">
<h3>Http settings</h3>
<h3 class="page-heading">Http settings</h3>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Url</span>
......
public/app/features/datasources/partials/list.html
......@@ -25,8 +25,8 @@
<th><strong>Name</strong></th>
<th><strong>Url</strong></th>
<th style="width: 60px;"></th>
<th style="width: 65px;"></th>
<th style="width: 34px;"></th>
<th style="width: 85px;"></th>
<th style="width: 44px;"></th>
</tr>
</thead>
<tbody>
......@@ -45,13 +45,13 @@
</span>
</td>
<td class="text-right">
<a href="datasources/edit/{{ds.id}}" class="btn btn-inverse btn-mini">
<a href="datasources/edit/{{ds.id}}" class="btn btn-inverse btn-small">
<i class="fa fa-edit"></i>
Edit
</a>
</td>
<td class="text-right">
<a ng-click="ctrl.removeDataSource(ds)" class="btn btn-danger btn-mini">
<a ng-click="ctrl.removeDataSource(ds)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>
......
public/app/features/org/partials/orgApiKeys.html
......@@ -2,54 +2,49 @@
</navbar>
<div class="page-container">
<div class="page-wide">
<h1>
API Keys
</h1>
<form name="addTokenrForm" class="form-inline norm-form last">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px">
Add a key
</li>
<li>
<input type="text" class="input-xlarge norm-form-input" ng-model='token.name' placeholder="Name"></input>
</li>
<li class="norm-form-item">
Role
</li>
<li>
<select class="input-small norm-form-input" ng-model="token.role" ng-options="r for r in roleTypes"></select>
</li>
</ul>
<button class="btn btn-success" style="margin-left:15px; vertical-algin:middle;" ng-click="addToken()">Add</button>
<div class="clearfix"></div>
</form>
<table class="filter-table">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th style="width: 34px;"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="t in tokens">
<td>{{t.name}}</td>
<td>{{t.role}}</td>
<td>
<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div class="page-header">
<h1>API Keys</h1>
</div>
<h3 class="page-heading">Add new</h3>
<form name="addTokenForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label">Add a key</span>
<input type="text" class="gf-form-input" ng-model='token.name' placeholder="Name"></input>
</div>
<div class="gf-form">
<span class="gf-form-label">Role</span>
<select class="gf-form-input gf-size-auto" ng-model="token.role" ng-options="r for r in roleTypes"></select>
</div>
<div class="gf-form">
<button class="btn gf-form-btn btn-success" ng-click="addToken()">Add</button>
</div>
</div>
</form>
<h3 class="page-heading">Existing Keys</h3>
<table class="filter-table">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th style="width: 34px;"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="t in tokens">
<td>{{t.name}}</td>
<td>{{t.role}}</td>
<td>
<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
public/app/features/org/partials/orgDetails.html
......@@ -6,21 +6,23 @@
<h1>Preferences</h1>
</div>
<h3 class="page-heading">General</h3>
<form name="orgForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-xs">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="org.name">
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="update()">Update</button>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-xs">Name</span>
<input class="gf-form-input" type="text" required ng-model="org.name">
</div>
<div class="gf-form">
<button type="submit" class="btn gf-form-btn btn-success" ng-click="update()">Update</button>
</div>
</div>
</form>
<form name="addressForm" class="gf-form-group">
<h3>Address</h3>
<h3 class="page-heading">Address</h3>
<form name="addressForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Address1</span>
......@@ -59,16 +61,16 @@
</div>
</form>
<h3 class="page-heading">Admin Pages</h3>
<div class="gf-form-group">
<h3>Users</h3>
<a href="org/users" class="btn btn-inverse">Manage</a>
</div>
<div class="gf-form-group">
<h3>API Keys</h3>
<a href="org/apikeys" class="btn btn-inverse">Manage</a>
<div class="gf-form-inline">
<div class="gf-form">
<a href="org/users" class="btn gf-form-btn btn-inverse">Users &amp; Roles</a>
</div>
<div class="gf-form">
<a href="org/apikeys" class="btn gf-form-btn btn-inverse">API Keys</a>
</div>
</div>
</div>
public/app/features/profile/partials/password.html
......@@ -8,17 +8,17 @@
<form name="userForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-md">Old Password</span>
<span class="gf-form-label gf-size-lg">Old Password</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="command.oldPassword">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">New Password</span>
<span class="gf-form-label gf-size-lg">New Password</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4" ng-model="command.newPassword">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Confirm Password</span>
<span class="gf-form-label gf-size-lg">Confirm Password</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4" ng-model="command.confirmNew">
</div>
......
public/app/features/profile/partials/profile.html
......@@ -7,7 +7,7 @@
</div>
<form name="userForm" class="gf-form-group">
<h3>Preferences</h3>
<h3 class="page-heading">Preferences</h3>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span>
......@@ -31,13 +31,13 @@
</div>
</form>
<h3 class="page-heading">Password</h3>
<div class="gf-form-group">
<h3>Password</h3>
<a href="profile/password" class="btn btn-inverse">Change Password</a>
</div>
<h3 class="page-heading">Organizations</h3>
<div class="gf-form-group">
<h3>Organizations</h3>
<table class="filter-table form-inline">
<thead>
<tr>
......
public/app/plugins/datasource/elasticsearch/partials/config.html
<datasource-http-settings current="ctrl.current">
</datasource-http-settings>
<div class="gf-form-group">
<h3>Elasticsearch details</h3>
<h3 class="page-heading">Elasticsearch details</h3>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-md">Index name</span>
......@@ -28,9 +28,8 @@
</div>
<h3 class="page-heading">Default query settings</h3>
<div class="gf-form-group">
<h4>Default query settings</h4>
<div class="gf-form">
<span class="gf-form-label">Group by time interval</span>
<input class="gf-form-input gf-size-max-md" type="text" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="example: >10s">
......
public/sass/_grafana.scss
......@@ -26,6 +26,12 @@
@import "layout/page";
// COMPONENTS
@import "components/buttons";
@import "components/navs";
@import "components/tabs";
@import "components/alerts";
@import "components/tooltip";
@import "components/tags";
@import "components/panel_graph";
@import "components/submenu";
@import "components/panel_dashlist";
......@@ -40,7 +46,6 @@
@import "components/sidemenu";
@import "components/navbar";
@import "components/gfbox";
@import "components/tabs";
@import "components/timepicker";
@import "components/filter-controls";
@import "components/filter-list";
......@@ -48,19 +53,14 @@
@import "components/scrollbar";
@import "components/old_stuff";
@import "components/popovers";
@import "components/alerts";
@import "components/typeahead";
@import "components/tags";
@import "components/modals";
@import "components/dropdown";
@import "components/color_picker";
@import "components/tooltip";
@import "components/buttons";
@import "components/footer";
@import "components/infobox";
@import "components/shortcuts";
@import "components/query_editor";
@import "components/navs";
// PAGES
@import "pages/login";
......
public/sass/_variables.scss
......@@ -78,13 +78,13 @@ $grid-gutter-width: 30px !default;
$enable-flex: false;
$form-sizes: (
xs: 80px,
sm: 100px,
md: 120px,
lg: 150px,
xl: 200px,
xxl: 300px,
xxxl: 400px
xs: 5.7rem,
sm: 7rem,
md: 8.5rem,
lg: 10rem,
xl: 14rem,
xxl: 21rem,
xxxl: 28rem
) !default;
......@@ -135,12 +135,7 @@ $blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-width: .25rem !default;
$hr-border-width: $border-width !default;
$dt-font-weight: bold !default;
$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
$nested-kbd-font-weight: bold !default;
$list-inline-padding: 5px !default;
// Components
......@@ -208,4 +203,19 @@ $zindex-navbar-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
// Buttons
//
$btn-padding-x: 1rem !default;
$btn-padding-y: .6rem !default;
$btn-line-height: 1.25 !default;
$btn-font-weight: normal !default;
$btn-padding-x-sm: .5rem !default;
$btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.5rem !default;
$btn-padding-y-lg: .75rem !default;
$btn-border-radius: 1px;
public/sass/components/_buttons.scss
......@@ -8,41 +8,43 @@
// Core
.btn {
display: inline-block;
padding: 8px 12px;
margin-right: 10px;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
font-size: $font-size-base;
line-height: $line-height-base;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: none;
@include buttonBackground($btnBackground, $btnBackgroundHighlight, $gray-dark, 0 1px 1px rgba(255,255,255,.75));
@include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
// Hover/focus state
&:hover,
&:focus {
text-decoration: none;
&,
&:active,
&.active {
&:focus,
&.focus {
@include tab-focus();
}
}
// Focus state for keyboard and accessibility
&:focus {
@include tab-focus();
@include hover-focus {
text-decoration: none;
}
&.focus {
text-decoration: none;
}
// Active state
&.active,
&:active {
&:active,
&.active {
background-image: none;
outline: 0;
}
// Disabled state
&.disabled,
&[disabled] {
cursor: default;
background-image: none;
@include opacity(65);
&:disabled {
cursor: $cursor-disabled;
opacity: .65;
@include box-shadow(none);
}
}
......@@ -51,20 +53,15 @@
// Large
.btn-large {
padding: 6px 20px;
font-size: $font-size-lg;
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius);
}
.btn-small {
padding: 2px 10px;
font-size: $font-size-sm;
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius);
}
.btn-mini {
padding: 2px 6px;
margin-right: 0;
margin-right: 0;
font-size: $font-size-xs;
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius);
}
// Set the backgrounds
......
public/sass/components/_gf-form.scss
$gf-form-margin: 0.4rem;
.gf-form {
margin-top: $gf-form-margin;
margin-bottom: $gf-form-margin;
margin-right: $gf-form-margin;
display: flex;
flex-direction: row;
......@@ -19,10 +19,7 @@ $gf-form-margin: 0.4rem;
}
.gf-form-group {
h3, h2, h4 {
margin-top: $spacer * 2;
margin-bottom: $spacer * 1;
}
margin-bottom: $spacer * 1.5;
}
.gf-form-inline {
......@@ -37,8 +34,10 @@ $gf-form-margin: 0.4rem;
}
.gf-form-button-row {
margin-top: $spacer * 2;
margin-bottom: $spacer;
margin-top: $spacer * 1.5;
a, button {
margin-right: $spacer;
}
}
.gf-form-label {
......@@ -114,3 +113,9 @@ $gf-form-margin: 0.4rem;
&.gf-size-auto { width: auto; }
}
.gf-form-btn {
padding: $input-padding-y $input-padding-x;
line-height: $input-line-height;
flex-shrink: 0;
flex-grow: 0;
}
public/sass/components/_navbar.scss
......@@ -8,7 +8,7 @@
.navbar-inner {
min-height: $navbarHeight;
padding-right: 20px;
padding-right: $spacer;
background-color: $navbarBackground;
border-bottom: $navbarBorder;
@include clearfix();
......@@ -18,11 +18,6 @@
position: relative;
left: 0;
float: left;
margin: 0 10px 0 0;
}
.nav {
display: block;
}
.navbar .nav.pull-right {
......@@ -175,4 +170,3 @@
color: $link-color;
}
public/sass/components/_navs.scss
......@@ -7,8 +7,7 @@
// ----------
.nav {
margin-left: 0;
margin-bottom: $line-height-base;
margin: 0;
list-style: none;
}
......
public/sass/layout/_page.scss
......@@ -33,7 +33,7 @@
}
.page-header {
padding: 10px 0 39px 0px;
padding: $spacer 0 $spacer * 2.5;
display: flex;
justify-content: space-between;
......@@ -44,13 +44,19 @@
display: -webkit-flex; /* NEW - Chrome */
flex-wrap: wrap-reverse;
background: transparent url(../img/page_header_line.png) no-repeat left 60px;
h1 {
font-style: italic;
}
margin-bottom: 2rem;
}
.page-heading {
font-size: 1.25rem;
margin-top: 0;
margin-bottom: $spacer * 0.6;
}
.admin-page {
max-width: 800px;
margin-left: 10px;
......
public/sass/mixins/_buttons.scss
......@@ -16,3 +16,9 @@
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
@include border-radius($border-radius);
}
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