Merge "Improve status table CSS."

app/js/directives/chart-bar-horizontal.js

@@ -25,7 +25,9 @@ function chartBarHorizontal() {
 
     var svg = d3.select(el[0]).append('svg')
       .attr('width', attrs.width)
-      .attr('height', attrs.height);
+      .attr('height', attrs.height)
+      .style('width', attrs.width + 'px')
+      .style('height', attrs.height + 'px');
 
     var update = function(data) {
       if (typeof data === 'undefined') {

app/styles/_openstack-health.scss

@@ -0,0 +1,31 @@
+table.status-table {
+    width: 100%;
+    overflow: auto;
+
+    thead {
+        white-space: nowrap;
+
+        th[sort-field="name"] {
+            width: 100%;
+        }
+
+        th:not(:first-child) {
+            min-width: 75px;
+        }
+
+        th:last-child {
+            @extend .hidden-xs;
+            @extend .hidden-sm;
+
+            min-width: 300px;
+            max-width: 300px;
+        }
+    }
+
+    tbody {
+        td:last-child {
+            @extend .hidden-xs;
+            @extend .hidden-sm;
+        }
+    }
+}

app/styles/main.scss

@@ -6,4 +6,5 @@
 @import 'nv.d3';
 @import 'header';
 @import 'footer';
-@import 'breadcrumbs'
+@import 'breadcrumbs';
+@import 'openstack-health';

app/views/home.html

@@ -84,8 +84,7 @@
                 <div class="panel-heading">
                     <h3 class="panel-title">Project status</h3>
                 </div>
-                <div class="panel-body">
+                <table table-sort class="table table-hover status-table" data="home.projects">
-                    <table table-sort class="table table-hover" data="home.projects">
                     <thead>
                         <tr>
                             <th field="number" class="text-center">#</th>
@@ -94,7 +93,7 @@
                             <th sort-field="failures" class="text-center">Failures</th>
                             <th sort-field="passRate" class="text-center">% Passes</th>
                             <th sort-default sort-field="failRate" class="text-center">% Failures</th>
-                                <th field="barGraph" class="text-center" style="min-width:320px">Bar Graph</th>
+                            <th class="text-center">Bar Graph</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -109,10 +108,8 @@
                             <td class="text-right">{{p.passRate*100|number:2}}</td>
                             <td class="text-right">{{p.failRate*100|number:2}}</td>
                             <td>
-                                  <div id="chart">
+                                <chart-bar-horizontal data="p.data" width="300" height="20">
-                                    <chart-bar-horizontal data="p.data" height="20">
                                 </chart-bar-horizontal>
-                                  </div>
                             </td>
                         </tr>
                     </tbody>
@@ -121,4 +118,3 @@
         </div>
     </div>
 </div>
-</div>