From f351555efece446e872013dfa4f9f93a35532ffe Mon Sep 17 00:00:00 2001
From: Manish Valechha <manish@lavabits.com>
Date: Mon, 8 Jul 2013 13:58:54 -0400
Subject: [PATCH] Make status summary responsive

---
 web/assets/javascripts/dashboard.js    |  4 ++--
 web/assets/stylesheets/application.css | 21 +++++++++++++++++++++
 web/views/_summary.slim                | 14 +++++++-------
 web/views/layout.slim                  | 18 +++++++++---------
 4 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/web/assets/javascripts/dashboard.js b/web/assets/javascripts/dashboard.js
index dfdc266a..1caa93ce 100644
--- a/web/assets/javascripts/dashboard.js
+++ b/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',
diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css
index 1732d90d..aa0f2e25 100755
--- a/web/assets/stylesheets/application.css
+++ b/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 {
diff --git a/web/views/_summary.slim b/web/views/_summary.slim
index 0b885151..ce7d1049 100644
--- a/web/views/_summary.slim
+++ b/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')
diff --git a/web/views/layout.slim b/web/views/layout.slim
index 7ae909db..6a6b0cd9 100644
--- a/web/views/layout.slim
+++ b/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