ux(table): tight-form -> gf-form

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>
-
-

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 {