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