Skip to content

N
nexpie-grafana-theme
Commit 701a2fdc by Torkel Ödegaard
Options

ux(): tweaks and polish, and also simpifying width classes, gf-size-xxx and… 

ux(): tweaks and polish, and also simpifying width classes, gf-size-xxx and gf-size-max-xx are now width-(1-30), and max-width-(1-30)
parent 995f1749
Showing with 60 additions and 45 deletions
public/app/features/datasources/partials/edit.html
......@@ -13,13 +13,13 @@
<form name="editForm">
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span>
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model="current.name" placeholder="My data source name" required>
<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Type</span>
<span class="gf-form-label width-7">Type</span>
<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
</div>
</div>
......
public/app/features/datasources/partials/http_settings.html
......@@ -4,19 +4,19 @@
<h3 class="page-heading">Http settings</h3>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Url</span>
<span class="gf-form-label width-7">Url</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">
<span class="gf-form-label width-7">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
</span>
<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">
<span class="gf-form-label width-7">
Http Auth
</span>
<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
......@@ -24,14 +24,14 @@
</div>
<div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-sm">
<span class="gf-form-label width-7">
User
</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input>
</div>
<div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-sm">
<span class="gf-form-label width-7">
Passord
</span>
<input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
......
public/app/features/org/partials/orgDetails.html
......@@ -25,33 +25,33 @@
<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>
<span class="gf-form-label width-7">Address1</span>
<input class="gf-form-input" type="text" ng-model="address.address1">
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Address2</span>
<span class="gf-form-label width-7">Address2</span>
<input class="gf-form-input" type="text" ng-model="address.address2">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">City</span>
<span class="gf-form-label width-7">City</span>
<input class="gf-form-input" type="text" ng-model="address.city">
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Postal code</span>
<span class="gf-form-label width-7">Postal code</span>
<input class="gf-form-input" type="text" ng-model="address.zipCode">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">State</span>
<span class="gf-form-label width-7">State</span>
<input class="gf-form-input" type="text" ng-model="address.state">
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Country</span>
<span class="gf-form-label width-7">Country</span>
<input class="gf-form-input" type="text" ng-model="address.country">
</div>
</div>
......
public/app/features/playlist/partials/playlist.html
......@@ -9,11 +9,11 @@
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span>
<span class="gf-form-label width-7">Name</span>
<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input gf-size-max-xxl">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Interval</span>
<span class="gf-form-label width-7">Interval</span>
<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input gf-size-max-xxl">
</div>
</div>
......
public/app/features/profile/partials/profile.html
......@@ -10,19 +10,19 @@
<h3 class="page-heading">Preferences</h3>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span>
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" >
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Email</span>
<span class="gf-form-label width-7">Email</span>
<input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Username</span>
<span class="gf-form-label width-7">Username</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">UI Theme</span>
<span class="gf-form-label width-7">UI Theme</span>
<select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
</div>
......
public/app/partials/login.html
......@@ -19,16 +19,16 @@
<form name="loginForm" class="login-form gf-form-group">
<div class="gf-form" ng-if="loginMode">
<span class="gf-form-label gf-size-sm">User</span>
<span class="gf-form-label width-7">User</span>
<input type="text" name="username" class="gf-form-input gf-size-max-xl" required ng-model='formModel.user' placeholder={{loginHint}}>
</div>
<div class="gf-form" ng-if="loginMode">
<span class="gf-form-label gf-size-sm">Password</span>
<span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
<div class="gf-form" ng-if="!loginMode">
<span class="gf-form-label gf-size-sm">Email</span>
<span class="gf-form-label width-7">Email</span>
<input type="email" class="gf-form-input gf-size-max-xl" required ng-model='formModel.email' placeholder="email">
</div>
......
public/app/partials/panelgeneral.html
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Title</span>
<span class="gf-form-label width-7">Title</span>
<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
</div>
<div class="gf-form">
......@@ -9,7 +9,7 @@
<select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Height</span>
<span class="gf-form-label width-7">Height</span>
<input type="text" class="gf-form-input gf-size-max-xs" ng-model='ctrl.panel.height' placeholder="100px"></input>
<editor-checkbox text="Transparent" model="ctrl.panel.transparent"></editor-checkbox>
</div>
......@@ -17,7 +17,7 @@
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Repeat Panel</span>
<span class="gf-form-label width-7">Repeat Panel</span>
<select class="gf-form-input" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list">
<option value=""></option>
</select>
......
public/app/partials/signup_invited.html
......@@ -21,19 +21,19 @@
<form name="inviteForm" class="login-form gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Email</span>
<span class="gf-form-label width-7">Email</span>
<input type="email" name="email" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.email' placeholder="Email">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span>
<span class="gf-form-label width-7">Name</span>
<input type="text" name="name" class="gf-form-input gf-size-max-xxl" ng-model='formModel.name' placeholder="Name (optional)">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Username</span>
<span class="gf-form-label width-7">Username</span>
<input type="text" name="username" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.username' placeholder="Username">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Password</span>
<span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input gf-size-max-xxl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
......
public/app/plugins/datasource/influxdb/partials/config.html
......@@ -5,19 +5,19 @@
<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-sm">Database</span>
<div class="gf-form max-width-30">
<span class="gf-form-label width-7">Database</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.database' placeholder="" required></input>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">User</span>
<div class="gf-form max-width-15">
<span class="gf-form-label width-7">User</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="" required></input>
</div>
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Password</span>
<div class="gf-form max-width-15">
<span class="gf-form-label width-7">Password</span>
<input type="password" class="gf-form-input" ng-model='ctrl.current.password' placeholder="" required></input>
</div>
</div>
......
public/sass/_variables.dark.scss
......@@ -8,17 +8,17 @@ $black: #000;
// -------------------------
$black: #000;
$dark-1: #141414; // (body)
$dark-2: #1f1d1d; // ($gray-darker)
$dark-3: #262626; // ($gray-dark)
$dark-1: #141414;
$dark-2: #1f1d1d;
$dark-3: #262626;
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
$gray-2: #6e7580;
$gray-2: #7B7B7B;
$gray-3: #b3b3b3;
$gray-4: #cfd4d9;
$gray-5: #e8edf0;
$gray-6: #f7f9fa;
$gray-4: #D8D9DA;
$gray-5: #ECECEC;
$gray-6: #f4f5f8;
$gray-7: #fbfbfb;
$white: #fff;
......
public/sass/_variables.light.scss
......@@ -13,9 +13,9 @@ $black: #000;
// -------------------------
$black: #000;
$dark-1: #141414; // (body)
$dark-2: #1f1d1d; // ($gray-darker)
$dark-3: #262626; // ($gray-dark)
$dark-1: #141414;
$dark-2: #1f1d1d;
$dark-3: #262626;
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
......
public/sass/_variables.scss
......@@ -185,6 +185,7 @@ $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-pa
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
$form-group-margin-bottom: $spacer-y !default;
$gf-form-margin: 0.2rem;
$cursor-disabled: not-allowed !default;
......
public/sass/utils/_spacings.scss
......@@ -28,6 +28,20 @@
}
}
// widths
@for $i from 1 through 30 {
.width-#{$i} {
width: ($spacer * $i) - $gf-form-margin;
}
}
@for $i from 1 through 30 {
.max-width-#{$i} {
max-width: ($spacer * $i) - $gf-form-margin;
flex-grow: 1;
}
}
// Positioning
.pos-f-t {
......
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