From 701a2fdcf3bdb4dfc83d27ff5f14ddd8a8b2c873 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sat, 20 Feb 2016 14:21:39 +0100
Subject: [PATCH] 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)

---
 public/app/features/datasources/partials/edit.html |  4 ++--
 .../datasources/partials/http_settings.html        | 10 +++++-----
 public/app/features/org/partials/orgDetails.html   | 12 ++++++------
 .../app/features/playlist/partials/playlist.html   |  4 ++--
 public/app/features/profile/partials/profile.html  |  8 ++++----
 public/app/partials/login.html                     |  6 +++---
 public/app/partials/panelgeneral.html              |  6 +++---
 public/app/partials/signup_invited.html            |  8 ++++----
 .../datasource/influxdb/partials/config.html       | 12 ++++++------
 public/sass/_variables.dark.scss                   | 14 +++++++-------
 public/sass/_variables.light.scss                  |  6 +++---
 public/sass/_variables.scss                        |  1 +
 public/sass/utils/_spacings.scss                   | 14 ++++++++++++++
 13 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html
index 349ac0c18b6..71d6e2a5173 100644
--- a/public/app/features/datasources/partials/edit.html
+++ b/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>
diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html
index 37b1d3241ca..ad7ade41ebd 100644
--- a/public/app/features/datasources/partials/http_settings.html
+++ b/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>
diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html
index 3691c9025f5..e0363a49b87 100644
--- a/public/app/features/org/partials/orgDetails.html
+++ b/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>
diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html
index 98c5098824d..b562227ec26 100644
--- a/public/app/features/playlist/partials/playlist.html
+++ b/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>
diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html
index bdca386ce46..0dac7edcc14 100644
--- a/public/app/features/profile/partials/profile.html
+++ b/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>
 
diff --git a/public/app/partials/login.html b/public/app/partials/login.html
index 6f437a02824..6d0d6ccf5b8 100644
--- a/public/app/partials/login.html
+++ b/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>
 
diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html
index 7beb6d54911..23fdd01f2fc 100644
--- a/public/app/partials/panelgeneral.html
+++ b/public/app/partials/panelgeneral.html
@@ -1,7 +1,7 @@
 <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>
diff --git a/public/app/partials/signup_invited.html b/public/app/partials/signup_invited.html
index 9eadd6218d3..07700f023b4 100644
--- a/public/app/partials/signup_invited.html
+++ b/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>
 
diff --git a/public/app/plugins/datasource/influxdb/partials/config.html b/public/app/plugins/datasource/influxdb/partials/config.html
index 6d9329af554..f0a1081d3d4 100644
--- a/public/app/plugins/datasource/influxdb/partials/config.html
+++ b/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>
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 6967249dbd6..ccb2c66767b 100644
--- a/public/sass/_variables.dark.scss
+++ b/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;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 8d29c1571eb..0ea879c4114 100644
--- a/public/sass/_variables.light.scss
+++ b/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;
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index 85e97fda5c6..d94ee9bffb0 100644
--- a/public/sass/_variables.scss
+++ b/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;
 
diff --git a/public/sass/utils/_spacings.scss b/public/sass/utils/_spacings.scss
index cd543c8c90b..81e60d8fb58 100644
--- a/public/sass/utils/_spacings.scss
+++ b/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 {