Merge pull request #475 from cavneb/master

Enhanced the UI a bit. See http://d.pr/i/rcGz

.gitignore

@@ -4,3 +4,4 @@ Gemfile.lock
 dump.rdb
 .rbx
 coverage/
+.sass-cache/

web/assets/javascripts/application.js

@@ -39,6 +39,8 @@ $(function() {
 
     if (pollLink.data('polling')) {
 
+      $(this).removeClass('active');
+
       clearInterval(pollLink.data('interval'));
       pollLink.text(pollLink.data('text'));
 
@@ -47,6 +49,8 @@ $(function() {
 
     } else {
 
+      $(this).addClass('active');
+
       var href = pollLink.attr('href');
 
       pollLink.data('text', pollLink.text());
@@ -72,7 +76,7 @@ $(function() {
     });
     var currentTime = new Date();
     $('.poll-status .text').text('Last polled : ')
-    $('.poll-status .badge').show().addClass('badge-success').text(currentTime.getHours() + ':' + pad(currentTime.getMinutes()) + ':' + pad(currentTime.getSeconds()));
+    $('.poll-status .time').show().text(currentTime.getHours() + ':' + pad(currentTime.getMinutes()) + ':' + pad(currentTime.getSeconds()));
   }
 });
 

web/assets/stylesheets/partials/_colors.scss

@@ -7,6 +7,7 @@ $main                  : saturate(#B1003E, 10%);
 $active                : darken($main, 20%);
 $dark_gray             : lighten(#242222, 20%);
 $light_gray            : #FAFAFA;
+$success               : #009300;
 
 
 $gradient              : $light_gray;
@@ -25,6 +26,7 @@ $text                  : $dark_gray;
 $title_color           : $main;
 $link_color            : $main;
 $link_active_color     : $active;
+$success_color         : $success;
 
 $background            : $off_white;
 

web/assets/stylesheets/partials/_layout.scss

@@ -88,9 +88,30 @@ header.row{
   }
   .summary{
     margin-top:12px;
+    background-color: #fff;
+
+    // Box shadow
+    -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.25);
+    -moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.25);
+    box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.25);
+
+    // Rounded borders (top only)
+    -webkit-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    border-radius: 4px;
+
+    padding: 8px;
+    margin-bottom: 10px;
+    border-width: 0px;
   }
-  .btn.btn-block{
+  #live-poll{
     line-height: 28px;
+    &.active {
+      background-color: $success_color;
+    }
   }
   ul{
     margin: 0 0 38px 0;
@@ -101,24 +122,57 @@ header.row{
       line-height: 1em;
     }
     li{
-      padding:8px 0 5px 0;
+      padding:4px 0 2px 0;
     }
     .desc{
-      font-size:0.8em;
-      font-weight:bold;
+      font-size:1.1em;
+      font-weight:normal;
     }
     .count{
       color: $highlight_color;
-      font-size: 1.5em;
+      font-size: 1.1em;
       font-weight:bold;
       float:right;
     }
   }
   .poll-status{
-    height:58px;  
+    height:58px;
+    text-align: center;
+    .text {
+      font-weight: 300;
+    }
+    .time {
+      color: #008800;
+      font-weight: 320;
+    }
   }
 }
 
+table.table-white {
+  background-color: #fff;
+}
+
+#tiny-details {
+  background-color: rgb(220,220,220);
+  padding: 2px 10px 3px;
+  color: #666;
+
+  li {
+    line-height: 1.0em;
+    text-shadow: 1px 1px 1px #ffffff;
+    filter: dropshadow(color=#ffffff, offx=1, offy=1);
+  }
+
+  // Rounded borders (top only)
+  -webkit-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border-radius: 4px;
+  .desc { font-size: 0.9em; }
+  .data { font-size: 0.9em; }
+}
 
 .queues{
   form{

web/views/_workers.slim

@@ -1,4 +1,4 @@
-table class="workers table table-hover table-bordered table-striped"
+table class="workers table table-hover table-bordered table-striped table-white"
   thead
     th Worker
     th Queue

web/views/index.slim

@@ -5,6 +5,6 @@
 == slim :_workers
 - if workers.size > 0
   .row
-    .span2
+    .span2.pull-right
       form action="#{root_path}reset" method="post"
-        button.btn.btn-primary.btn-block type="submit" title="If you kill -9 Sidekiq, this table can fill up with old data." Clear worker list
+        button.btn.btn-primary.btn-block type="submit" title="If you kill -9 Sidekiq, this table can fill up with old data." Clear Worker List

web/views/layout.slim

@@ -12,25 +12,24 @@ html
       .container
         .row
           .span2.summary_bar
-            h3
+            h4
               span.title Status
               == slim :_status
             == slim :_summary
             .row
               .span2
-                a.btn.btn-block name='poll' href='#{{root_path}}poll' Live Poll
+                a#live-poll.btn.btn-block.btn-primary name='poll' href='#{{root_path}}poll' Live Poll
               .span2.poll-status
-                p
-                  span.text
-                  span.badge
+                span.text
+                span.time
 
-            ul.unstyled
+            ul#tiny-details.unstyled
               li
+                span.data.pull-right #{location}
                 span.desc Redis
-                div.data  #{location}
               li
+                span.data.pull-right #{Time.now.utc.strftime('%H:%M:%S UTC')}
                 span.desc Time
-                div.data #{Time.now.utc.strftime('%H:%M:%S UTC')}
 
           .span10
             == yield

web/views/queues.slim

@@ -1,7 +1,7 @@
 h3 Queues
 
 - if @queues.size > 0
-  table class="queues table table-hover table-bordered table-striped"
+  table class="queues table table-hover table-bordered table-striped table-white"
     thead
       th Queue
       th Size
@@ -13,7 +13,7 @@ h3 Queues
         td= number_with_delimiter(size)
         td width="20%"
           form action="#{root_path}queues/#{queue}" method="post"
-            input.btn.btn-danger type="submit" name="delete" value="Delete" data-confirm="Are you sure you want to delete the #{queue} queue?"
+            input.btn.btn-danger.btn-small type="submit" name="delete" value="Delete" data-confirm="Are you sure you want to delete the #{queue} queue?"
 - else
   p No queues found.
   a href="#{root_path}" ← Back

web/views/retries.slim

@@ -8,7 +8,7 @@ header.row
 - if @retries.size > 0
 
   form action="#{root_path}retries" method="post"
-    table class="table table-striped table-bordered"
+    table class="table table-striped table-bordered table-white"
       tr
         th width="20px"
           input type="checkbox" class="check_all"
@@ -28,8 +28,7 @@ header.row
             a href="#{root_path}queues/#{msg['queue']}" #{msg['queue']}
           td= msg['class']
           td= display_args(msg['args'])
-    input.btn.btn-primary type="submit" name="retry" value="Retry Now" 
-    input.btn.btn-danger type="submit" name="delete" value="Delete"
+    input.btn.btn-danger.btn-small.pull-right type="submit" name="delete" value="Delete"
+    input.btn.btn-primary.btn-small.pull-right type="submit" name="retry" value="Retry Now" 
 - else
-  p No retries found.
-  a href="#{root_path}" ← Back
+  .alert.alert-success No retries were found

web/views/scheduled.slim

@@ -8,7 +8,7 @@ header.row
 - if @scheduled.size > 0
 
   form action="#{root_path}scheduled" method="post"
-    table class="table table-striped table-bordered"
+    table class="table table-striped table-bordered table-white"
       thead
         th width="20px"
           input type="checkbox" class="check_all"
@@ -25,7 +25,6 @@ header.row
             a href="#{root_path}queues/#{msg['queue']}" #{msg['queue']}
           td= msg['class']
           td= display_args(msg['args'])
-    input.btn.btn-danger type="submit" name="delete" value="Delete"
+    input.btn.btn-danger.pull-right type="submit" name="delete" value="Delete"
 - else
-  p No scheduled jobs found.
-  a href="#{root_path}" ← Back
+  .alert.alert-success No scheduled jobs were found