Make status summary responsive

web/assets/javascripts/dashboard.js

@@ -13,7 +13,7 @@ var realtimeGraph = function(updatePath) {
 
   var graph = new Rickshaw.Graph( {
     element: document.getElementById("realtime"),
-    width: 800,
+    width: 940,
     height: 200,
     renderer: 'line',
     interpolation: 'linear',
@@ -69,7 +69,7 @@ var historyGraph = function() {
 
   var graph = new Rickshaw.Graph( {
     element: document.getElementById("history"),
-    width: 800,
+    width: 940,
     height: 200,
     renderer: 'line',
     interpolation: 'linear',

web/assets/stylesheets/application.css

@@ -90,6 +90,10 @@ header.row .pagination {
   margin: 12px 0;
 }
 
+.summary_bar .actions {
+  padding: 10px 0px;
+}
+
 .summary_bar .status {
   margin-left: 10px;
 }
@@ -126,16 +130,33 @@ header.row .pagination {
 }
 .summary_bar ul li {
   padding: 4px 0 2px 0;
+  text-align: center;
+}
+@media (max-width: 1199px) and (min-width: 980px) {
+  .summary_bar ul li.span2 {
+    width: 130px !important;
+  }
+}
+@media (min-width: 1200px) {
+  .summary_bar ul li.span2 {
+    width: 154px !important;
+  }
 }
 .summary_bar ul .desc {
+  display: block;
   font-size: 1em;
   font-weight: normal;
+  width: 100%;
 }
 .summary_bar ul .count {
   color: #b1003e;
+  display: block;
   font-size: 1em;
   font-weight: bold;
   float: right;
+  padding: 0px 0px 2px 0px;
+  text-align: center;
+  width: 100%;
 }
 
 table.table-white {

web/views/_summary.slim

@@ -1,19 +1,19 @@
-ul.unstyled.summary
-  li.processed
+ul.unstyled.summary.row
+  li.processed.span2
     span.count #{number_with_delimiter(stats.processed)}
     span.desc = t('Processed')
-  li.failed
+  li.failed.span2
     span.count #{number_with_delimiter(stats.failed)}
     span.desc = t('Failed')
-  li.busy
+  li.busy.span2
     span.count #{number_with_delimiter(workers.size)}
     span.desc = t('Busy')
-  li.scheduled
+  li.scheduled.span2
     span.count #{number_with_delimiter(stats.scheduled_size)}
     span.desc = t('Scheduled')
-  li.retries
+  li.retries.span2
     span.count #{number_with_delimiter(stats.retry_size)}
     span.desc = t('Retries')
-  li.enqueued
+  li.enqueued.span2
     span.count #{number_with_delimiter(stats.enqueued)}
     span.desc = t('Enqueued')

web/views/layout.slim

@@ -31,18 +31,18 @@ html
     #page
       .container
         .row
-          .span2.summary_bar
-            h4
-              span.title = t('Status')
-              == slim :_status
-            == slim :_summary
-            - unless current_path == ''
-              .row
-                .span2
+          .span12.summary_bar
+            .row
+              h4.span10
+                span.title = t('Status')
+                == slim :_status
+              - unless current_path == ''
+                .span2.pull-right.actions
                   - if params[:poll]
                     a#live-poll.btn.btn-block.btn-primary.active href='#{{root_path}}#{{current_path}}' = t('StopPolling')
                   - else
                     a#live-poll.btn.btn-block.btn-primary href='#{{root_path}}#{{current_path}}?poll=true' = t('LivePoll')
+            == slim :_summary
 
-          .span10
+          .span12
             == yield