From 0525bf5d4eaaa32af41eacf04527a857defea85b Mon Sep 17 00:00:00 2001
From: bergquist <carl.bergquist@gmail.com>
Date: Wed, 24 Feb 2016 10:41:43 +0100
Subject: [PATCH] ux(table): tight-form -> gf-form

---
 .../elasticsearch/partials/query.options.html | 68 ++++++++-----------
 public/sass/components/_infobox.scss          |  4 +-
 2 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/public/app/plugins/datasource/elasticsearch/partials/query.options.html b/public/app/plugins/datasource/elasticsearch/partials/query.options.html
index bac22df7136..13e39fa4695 100644
--- a/public/app/plugins/datasource/elasticsearch/partials/query.options.html
+++ b/public/app/plugins/datasource/elasticsearch/partials/query.options.html
@@ -1,48 +1,38 @@
 <section class="grafana-metric-options">
-	<div class="tight-form">
-		<ul class="tight-form-list">
-			<li class="tight-form-item tight-form-item-icon">
+	<div class="gf-form-group">
+		<div class="gf-form">
+			<span class="gf-form-label">
 				<i class="fa fa-wrench"></i>
-			</li>
-			<li class="tight-form-item">
-				Group by time interval
-			</li>
-			<li>
-				<input type="text" class="input-medium tight-form-input" ng-model="ctrl.panelCtrl.panel.interval" ng-blur="ctrl.panelCtrl.refresh();"
+			</span>
+			<span class="gf-form-label">Group by time interval</span>
+
+			<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.panelCtrl.panel.interval" ng-blur="ctrl.panelCtrl.refresh();"
 							 spellcheck='false' placeholder="example: >10s">
-			</li>
-			<li class="tight-form-item">
+
+			<span class="gf-form-label">
 				<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
-	</div>
-	<div class="tight-form last">
-		<ul class="tight-form-list">
-			<li class="tight-form-item tight-form-item-icon">
-				<i class="fa fa-info-circle"></i>
-			</li>
-			<li class="tight-form-item">
-				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-					alias patterns
-				</a>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
+			</span>
+		</div>
+			<div class="gf-form">
+				<span class="gf-form-label">
+					<i class="fa fa-info-circle"></i>
+				</span>
+				<span class="gf-form-label width-23">
+					<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+						alias patterns
+					</a>
+				</span>
+		</div>
 	</div>
 </section>
 
-<div class="editor-row">
-	<div class="pull-left" style="margin-top: 30px;">
-		<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
-			<h5>Alias patterns</h5>
-			<ul ng-non-bindable>
-				<li>{{term fieldname}} = replaced with value of term group by</li>
-				<li>{{metric}} = replaced with metric name (ex. Average, Min, Max)</li>
-				<li>{{field}} = replaced with the metric field name</li>
-			</ul>
-		</div>
+<div class="pull-left">
+	<div class="grafana-info-box" style="border: 0;"  ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
+		<h5>Alias patterns</h5>
+		<ul ng-non-bindable>
+			<li>{{term fieldname}} = replaced with value of term group by</li>
+			<li>{{metric}} = replaced with metric name (ex. Average, Min, Max)</li>
+			<li>{{field}} = replaced with the metric field name</li>
+		</ul>
 	</div>
 </div>
-
-
diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss
index 02ec05fba53..c4dbb2820e1 100644
--- a/public/sass/components/_infobox.scss
+++ b/public/sass/components/_infobox.scss
@@ -2,7 +2,7 @@
   content: "\f05a";
   font-family:'FontAwesome';
   position: absolute;
-  top: -8px;
+  top: -13px;
   left: -8px;
   font-size: 20px;
   color: $blue;
@@ -10,7 +10,7 @@
 
 .grafana-info-box {
   position: relative;
-  padding: 5px 15px;
+  padding: 5px 20px;
   background-color: $tight-form-bg;
   border: 1px solid $tight-form-border;
   h5 {