ux(): datasource form tweaks

public/app/features/datasources/partials/http_settings.html

 
-<h3>Http settings</h3>
 
 <div class="gf-form-group">
+	<h3>Http settings</h3>
+
 	<div class="gf-form">
 		<span class="gf-form-label gf-size-xs">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>
@@ -13,7 +14,6 @@
 		</span>
 		<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
 	</div>
-	<br>
 
 	<div class="gf-form">
 		<span class="gf-form-label gf-size-xs">

public/app/features/profile/partials/password.html

@@ -2,27 +2,25 @@
 </navbar>
 
 <div class="page-container">
-
-	<h1>Change password</h1>
+	<div class="page-header">
+		<h1>Change password</h1>
+	</div>
 
 	<form name="userForm" class="gf-form-group">
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-m">Old Password</span>
-			<input class="gf-form-input gf-size-xxl" type="text" required ng-model="command.oldPassword">
+			<span class="gf-form-label gf-size-md">Old Password</span>
+			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="command.oldPassword">
 		</div>
-		<br>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-m">New Password</span>
-			<input class="gf-form-input gf-size-xxl" type="text" required ng-minlength="4"  ng-model="command.newPassword">
+			<span class="gf-form-label gf-size-md">New Password</span>
+			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4"  ng-model="command.newPassword">
 		</div>
-		<br>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-m">Confirm Password</span>
-			<input class="gf-form-input gf-size-xxl" type="text" required ng-minlength="4"  ng-model="command.confirmNew">
+			<span class="gf-form-label gf-size-md">Confirm Password</span>
+			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4"  ng-model="command.confirmNew">
 		</div>
-		<br>
 
 		<div class="gf-form-button-row">
 			<button type="submit" class="btn btn-success" ng-click="changePassword()">Change Password</button>

public/app/plugins/datasource/elasticsearch/partials/config.html

 <datasource-http-settings current="ctrl.current">
 </datasource-http-settings>
 
-<h4>Elasticsearch details</h4>
+<div class="gf-form-group">
+	<h3>Elasticsearch details</h3>
 
-<div class="tight-form">
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="width: 144px">
-			Index name
-		</li>
-		<li>
-			<input type="text" class="tight-form-input input-xlarge" ng-model='ctrl.current.database' placeholder="" required></input>
-		</li>
-		<li class="tight-form-item">
-			Pattern
-		</li>
-		<li>
-			<select class="input-medium tight-form-input" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
-</div>
-<div class="tight-form">
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="width: 144px">
-			Time field name
-		</li>
-		<li>
-			<input type="text" class="tight-form-input input-xlarge" ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></input>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
-</div>
-<div class="tight-form last">
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="width: 144px">
-			Version
-		</li>
-		<li>
-			<select class="input-medium tight-form-input" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
-</div>
+	<div class="gf-form-inline">
+		<div class="gf-form gf-size-max-xxxl">
+			<span class="gf-form-label gf-size-md">Index name</span>
+			<input class="gf-form-input" type="text" ng-model='ctrl.current.database' placeholder="" required></input>
+		</div>
+
+		<div class="gf-form gf-size-xl">
+			<span class="gf-form-label gf-size-md">Pattern</span>
+			<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
+		</div>
+	</div>
 
-<br>
+	<div class="gf-form gf-size-max-xxxl">
+		<span class="gf-form-label gf-size-md">Time field name</span>
+		<input class="gf-form-input" type="text"  ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></input>
+	</div>
+
+	<div class="gf-form">
+		<span class="gf-form-label gf-size-md">Version</span>
+		<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
+	</div>
+
+</div>
 
-<h4>Default query settings</h4>
+<div class="gf-form-group">
+	<h4>Default query settings</h4>
 
-<div class="tight-form last">
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="width: 200px">
-			Group by time interval
-		</li>
-		<li>
-			<input type="text" class="input-medium tight-form-input input-xlarge" ng-model="ctrl.current.jsonData.timeInterval"
-			spellcheck='false' placeholder="example: >10s">
-		</li>
-		<li class="tight-form-item">
-			<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >10s'" data-placement="right"></i>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
+	<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">
+	</div>
 </div>

public/sass/_grafana.scss

-@import "grid-variables";
-
 // MIXINS
 @import "mixins/mixins";
 @import "mixins/buttons";

public/sass/_variables.dark.scss

@@ -34,7 +34,7 @@ $critical:              #ed2e18;
 // grafana Variables
 // -------------------------
 $grafanaPanelBackground: 	$grayDarker;
-$grafanaPanelBorder: 		solid 1px $grayDark;
+$grafanaPanelBorder: 		  solid 1px $grayDark;
 $grafanaTriggerBorder:		solid 1px #555;
 
 // Graphite Target Editor

public/sass/grafana.dark.scss

-@import "_variables.dark.scss";
-@import "_grafana.scss";
+@import "variables";
+@import "variables.dark";
+@import "grafana";

public/sass/grafana.light.scss

-@import "_variables.light.scss";
-@import "_grafana.scss";
+@import "variables";
+@import "variables.light";
+@import "grafana";