fixed loading spinner position and other minor changes

src/app/directives/kibanaPanel.js

@@ -8,7 +8,7 @@ function (angular) {
     .module('kibana.directives')
     .directive('kibanaPanel', function($compile) {
 
-      var container = '<div class="panel-container"></div>';
+      var container = '<div class="panel-container" ng-style="{\'min-height\':row.height}""></div>';
       var content = '<div class="panel-content"></div>';
 
       var panelHeader =
@@ -23,10 +23,8 @@ function (angular) {
         '<div class="row-fluid panel-extra">' +
           '<div class="panel-extra-container">' +
 
-            '<span class="row-button extra" ng-show="panelMeta.loading == true">' +
-              '<span>'+
+            '<span class="panel-loading" ng-show="panelMeta.loading == true">' +
               '<i class="icon-spinner icon-spin icon-large"></i>' +
-              '</span>'+
             '</span>' +
 
             '<span ng-if="panelMeta.menuItems" class="dropdown" ng-show="panel.title">' +

src/app/partials/dashboard.html

@@ -10,13 +10,12 @@
 </div>
 <div class="clearfix"></div>
 <div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
-  <div class="row-fluid">
-    <div class="row-fluid container" style="margin-top:10px; width:98%">
+  <div>
+    <div class="container" style="margin-top:10px; width:98%">
       <!-- Rows -->
-      <div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
+      <div class="kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
         <div class="row-control">
-          <div class="row-fluid grafana-row" style="padding:0px;margin:0px;position:relative;">
-
+          <div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
             <div class="row-close span12" ng-show="row.collapse" data-placement="bottom" >
               <span class="row-button bgWarning" bs-modal="'app/partials/roweditor.html'" class="pointer">
                 <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
@@ -47,6 +46,7 @@
 
             <!-- Panels -->
             <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.span == 0 || panel.hide" class="span{{panel.span}} panel nospace" style="min-height:{{row.height}}; position:relative" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}">
+
               <!-- Content Panel -->
               <div class="row-fluid" style="position:relative" ng-class="{'dragInProgress':dashboard.panelDragging}" >
                 <kibana-panel type="panel.type" ng-cloak></kibana-panel>

src/app/partials/roweditor.html

@@ -6,17 +6,17 @@
     </div>
   </div>
 
-  <div class="row-fluid" ng-if="editor.index == 0">
-    <div class="span4">
+  <div class="editor-row" ng-if="editor.index == 0">
+    <div class="editor-option">
       <label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input>
     </div>
-    <div class="span2">
+    <div class="editor-option">
       <label class="small">Height</label><input type="text" class="input-mini" ng-model='row.height'></input>
     </div>
-    <div class="span1">
+    <div class="editor-option">
       <label class="small"> Editable </label><input type="checkbox" ng-model="row.editable" ng-checked="row.editable" />
     </div>
-    <div class="span1">
+    <div class="editor-option">
       <label class="small"> Collapsable </label><input type="checkbox" ng-model="row.collapsable" ng-checked="row.collapsable" />
     </div>
   </div>

src/vendor/bootstrap/less/overrides.less

@@ -66,6 +66,37 @@ code, pre {
   font-weight: bold;
 }
 
+.panel-loading {
+  position:absolute;
+  top: 0px;
+  right: 4px;
+  z-index: 800;
+}
+
+.panel div.panel-extra div.panel-extra-container {
+  margin-right: -10px;
+  margin-top: 3px;
+  text-align: center;
+  ul {
+    text-align: left;
+  }
+}
+
+.panel div.panel-extra {
+  font-size: 0.9em;
+  margin-bottom: 10px;
+}
+
+.panel div.panel-extra .extra {
+  float:right !important;
+}
+
+.panel-error {
+  color: @white;
+  padding: 3px 10px 0px 10px;
+}
+
+
 div.editor-row {
   vertical-align: top;
 }
@@ -224,13 +255,6 @@ form input.ng-invalid {
   border-top: 0px;
 }
 
-.panel-loading {
-  position:absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 800;
-}
-
 .ui-draggable-dragging {
   display: block;
   visibility: visible;
@@ -238,25 +262,6 @@ form input.ng-invalid {
   z-index: 9999;
 }
 
-.panel div.panel-extra div.panel-extra-container {
-  margin-right: -10px;
-  margin-top: 3px;
-  text-align: center;
-  ul {
-    text-align: left;
-  }
-}
-
-.panel div.panel-extra {
-  font-size: 0.9em;
-  margin-bottom: 10px;
-}
-
-.panel div.panel-extra .extra {
-  float:right !important;
-  //border-bottom: 1px solid lighten(@bodyBackground, 5%);
-}
-
 .dragInProgress {
   background-color: darken(@bodyBackground,1%);
   border: 1px solid @tableBorder;
@@ -353,10 +358,6 @@ div.flot-text {
   color: @white;
 }
 
-.panel-error {
-  color: @white;
-  padding: 3px 10px 0px 10px;
-}
 
 .alert-warning {
   background-color: @warningBackground;