Cleaned up timepicker layout

panels/timepicker/module.html

@@ -1,36 +1,41 @@
 <kibana-panel ng-controller='timepicker' ng-init="init()">
-  <div class="row-fluid" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0">
-    <div ng-switch-when="absolute">
-      <div class="span5">
+  <style>
+    .timepicker-block {
+      display: inline-block;
+    }
+  </style>
+
+  <div class="row-fluid form-horizontal" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0">
+    <div ng-switch-when="absolute" >
+      <div class="timepicker-block">
         <form class="nomargin">
           <label><small>From</small></label>
-          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>  
+          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
         </form>
       </div>
-      <div class="span5" style="margin-left:10px">
+      <div class="timepicker-block" style="margin-left:10px">
         <form class="nomargin">
           <label style="margin-left:5px"><small>To (<a ng-click="to_now()">now</a>)</small></label>
-          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.to.date" data-date-format="mm/dd/yyyy" bs-datepicker>  
+          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.to.date" data-date-format="mm/dd/yyyy" bs-datepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.to.time" bs-timepicker>
       </form>
       </div>
-      <div class="span1">
+      <div class="timepicker-block">
         <form class="nomargin">
-          <label><small><br></small></label>
-          <button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
+          <button class="btn" ng-click="time_apply()"><i class="icon-ok"></i></button>
         </form>
       </div>
     </div>
     <div ng-switch-when="since">
-      <div class="span5">
+      <div class="timepicker-block">
         <form class="nomargin">
           <label><small>Since</small></label>
-          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>  
+          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
         </form>
       </div>
-      <div class="span1" style="margin-left:10px">
+      <div class="timepicker-block" style="margin-left:10px">
         <form class="nomargin">
           <label><small><br></small></label>
           <button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
@@ -38,7 +43,7 @@
       </div>
     </div>
     <div ng-switch-when="relative">
-      <div class="span11">
+      <div class="timepicker-block">
         <form class="nomargin input-append">
           <label><small>The last</small></label>
           <button class="btn btn" ng-repeat='timespan in panel.time_options' ng-class="{'btn-success': (panel.timespan == timespan)}" ng-click="set_timespan(timespan)">{{timespan}}</button>
@@ -56,18 +61,18 @@
   </div>
   <div class="row-fluid nomargin">
     <div class="span12 small" ng-show="filterSrv.idsByType('time').length > 0">
-      <a ng-click="set_mode('relative')" ng-class="{'strong': (panel.mode == 'relative')}">Relative</a> | 
-      <a ng-click="set_mode('absolute')" ng-class="{'strong': (panel.mode == 'absolute')}">Absolute</a> | 
-      <a ng-click="set_mode('since')"    ng-class="{'strong': (panel.mode == 'since')}">Since</a>
-      <span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> | 
-        <input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh 
+      <a class="link" ng-click="set_mode('relative')" ng-class="{'strong': (panel.mode == 'relative')}">Relative</a> |
+      <a class="link" ng-click="set_mode('absolute')" ng-class="{'strong': (panel.mode == 'absolute')}">Absolute</a> |
+      <a class="link" ng-click="set_mode('since')"    ng-class="{'strong': (panel.mode == 'since')}">Since</a>
+      <span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> |
+        <input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh
         <span ng-class="{'ng-cloak': !panel.refresh.enable}">
           every <a data-title="<small>Auto-refresh Settings</small>" data-placement="bottom" bs-popover="'panels/timepicker/refreshctrl.html'">{{panel.refresh.interval}}s</a>.
         </span>
       </span>
     </div>
     <div class="span12 small" ng-show="filterSrv.idsByType('time').length < 1">
-      <a class='btn btn-small' ng-click="time_apply()">Create a time filter</a> 
+      <a class='btn btn-small' ng-click="time_apply()">Create a time filter</a>
     </div>
   </div>
 </kibana-panel>