V1

Gemfile

@@ -10,3 +10,7 @@ gem 'sqlite3'
 group :test do
   gem 'simplecov', :require => false
 end
+
+group :development do
+  gem 'compass'
+end

lib/sidekiq/web.rb

@@ -1,6 +1,7 @@
 require 'sinatra/base'
 require 'slim'
 require 'sprockets'
+require 'compass'
 require 'sidekiq/paginator'
 
 module Sidekiq
@@ -16,6 +17,31 @@ module Sidekiq
       @environment.append_path 'assets/stylesheets'
       @environment.append_path 'assets/stylesheets/vendor'
       @environment.append_path 'assets/images'
+
+      configure do
+        Compass.configuration do |config|
+
+          config.project_path = @root
+
+          config.sass_dir = 'views'
+          config.images_dir           = 'assets/images'
+          config.sass_dir             = 'assets/stylesheets'
+          config.css_dir              = 'assets/stylesheets'
+          config.javascripts_dir      = 'assets/javascripts'
+          config.fonts_dir            = 'assets/stylesheets/fonts'
+
+          # You can select your preferred output style here (can be overridden via the command line):
+          output_style = :compressed
+
+          # To enable relative paths to assets via compass helper functions. Uncomment:
+          relative_assets = true
+
+          # To disable debugging comments that display the original location of your selectors. Uncomment:
+          line_comments = false
+        end
+      end
+
+
     end
 
     def call(env)
@@ -36,8 +62,10 @@ module Sidekiq
     set :views,  "#{dir}/views"
     set :root, "#{dir}/public"
     set :slim, :pretty => true
+
     use SprocketsMiddleware, :root => dir
 
+
     helpers do
 
       def reset_worker_list
@@ -99,6 +127,10 @@ module Sidekiq
         "#{env['SCRIPT_NAME']}/"
       end
 
+      def current_path
+        @current_path ||= request.path_info.gsub(/^\//,'')
+      end
+
       def current_status
         return 'idle' if workers.size == 0
         return 'active'
@@ -248,7 +280,12 @@ module Sidekiq
     end
 
     def self.tabs
-      @tabs ||= ["Queues", "Retries", "Scheduled"]
+      @tabs ||= {
+        "Workers"   =>'',
+        "Queues"    =>'queues',
+        "Retries"   =>'retries',
+        "Scheduled" =>'scheduled'
+      }
     end
 
   end

sidekiq.gemspec

@@ -26,4 +26,5 @@ Gem::Specification.new do |gem|
   gem.add_development_dependency      'actionmailer', '~> 3'
   gem.add_development_dependency      'activerecord', '~> 3'
   gem.add_development_dependency      'pry'
+  gem.add_development_dependency      'compass'
 end

web/assets/javascripts/application.js

@@ -25,31 +25,55 @@ $(function() {
 
   $('a[name=poll]').data('polling', false);
 
+  pollStatus = $('.poll-status')
+  pollStatusText = pollStatus.find('.text')
+  pollStatusBadge = pollStatus.find('.badge')
+
+  pollStatusBadge.hide();
+
   $('a[name=poll]').on('click', function(e) {
     e.preventDefault();
+
     var pollLink = $(this);
+
     if (pollLink.data('polling')) {
+
       clearInterval(pollLink.data('interval'));
-      pollLink.text('Live Poll');
-      $('.poll-status').text('');
-    }
-    else {
+      pollLink.text(pollLink.data('text'));
+
+      pollStatus.hide('');
+      pollStatusBadge.hide();
+
+    } else {
+
       var href = pollLink.attr('href');
+
+      pollLink.data('text', pollLink.text());
+      pollLink.text('Stop Polling');
       pollLink.data('interval', setInterval(function(){
+        livePoll(href);
+      }, 2000));
+
+      pollStatusText.text('Starting to poll...');
+    }
+
+    pollLink.data('polling', !pollLink.data('polling'));
+
+  });
+
+  livePoll = function livePoll(href){
+    console.log('href',href)
     $.get(href, function(data) {
       var responseHtml = $(data);
-          $('.hero-unit').replaceWith(responseHtml.find('.hero-unit'));
+      $('.summary').replaceWith(responseHtml.find('.summary'));
+      $('.status').html(responseHtml.find('.status').html().toString());
       $('.workers').replaceWith(responseHtml.find('.workers'));
       $('time').timeago();
     });
     var currentTime = new Date();
-        $('.poll-status').text('Last polled at: ' + currentTime.getHours() + ':' + pad(currentTime.getMinutes()) + ':' + pad(currentTime.getSeconds()));
-      }, 2000));
-      $('.poll-status').text('Starting to poll...');
-      pollLink.text('Stop Polling');
+    $('.poll-status .text').text('Last polled : ')
+    $('.poll-status .badge').show().addClass('badge-success').text(currentTime.getHours() + ':' + pad(currentTime.getMinutes()) + ':' + pad(currentTime.getSeconds()));
   }
-    pollLink.data('polling', !pollLink.data('polling'));
-  })
 });
 
 $(function() {

web/assets/stylesheets/application.css

@@ -1,6 +1,4 @@
 /*
-*= require vendor/bootstrap
-*= require layout
-*= require vendor/bootstrap-responsive
+*= require style
 *= require_self
 */

web/assets/stylesheets/partials/_colors.scss

@@ -0,0 +1,44 @@
+@import "compass";
+
+// $main               : #149D63;
+
+$off_white             : #f3f3f3;
+$main                  : saturate(#B1003E, 10%);
+$active                : darken($main, 20%);
+$dark_gray             : lighten(#242222, 20%);
+$light_gray            : #FAFAFA;
+
+
+$gradient              : $light_gray;
+$gradient_dark         : darken($light_gray, 5%);
+
+$primary_gradient      : $main;
+$primary_gradient_dark : darken($primary_gradient, 5%);
+
+$danger_gradient      : saturate($main, 20%);
+$danger_gradient_dark : darken($danger_gradient, 5%);
+
+
+
+$highlight_color       : $main;
+$text                  : $dark_gray;
+$title_color           : $main;
+$link_color            : $main;
+$link_active_color     : $active;
+
+$background            : $off_white;
+
+$btn                   : $gradient;
+$btn_dark              : $gradient_dark;
+$btn_gradient          : linear-gradient($btn, $btn_dark);
+
+$btn_primary           : $primary_gradient;
+$btn_primary_dark      : $primary_gradient_dark;
+$btn_primary_gradient  : linear-gradient($primary_gradient,$primary_gradient_dark);
+
+$btn_danger_dark      : $primary_gradient_dark;
+$btn_danger_gradient  : linear-gradient($danger_gradient,$danger_gradient_dark);
+
+$title_primary_gradient:linear-gradient($primary_gradient,darken($primary_gradient_dark, 20%));
+$smooth_shadow         : 0px 0px 2px rgba(0,0,0,0.4);
+$highlight             : 0px 1px 0px white;

web/assets/stylesheets/partials/_fonts.scss

@@ -0,0 +1,3 @@
+@import url(http://fonts.googleapis.com/css?family=Gudea:400,700);
+@import url(http://fonts.googleapis.com/css?family=Armata);
+// @import 'fonts/font_name/stylesheet'

web/assets/stylesheets/partials/_h5bp.scss

@@ -0,0 +1,293 @@
+/*
+ * HTML5 Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+html,
+button,
+input,
+select,
+textarea {
+    color: #222;
+}
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+}
+
+/*
+ * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+ */
+
+img {
+    vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+    resize: vertical;
+}
+
+/* ==========================================================================
+   Chrome Frame prompt
+   ========================================================================== */
+
+.chromeframe {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}
+
+/* ==========================================================================
+   Author's custom styles
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==========================================================================
+   Helper classes
+   ========================================================================== */
+
+/*
+ * Image replacement
+ */
+
+.ir {
+    background-color: transparent;
+    border: 0;
+    overflow: hidden;
+    /* IE 6/7 fallback */
+    *text-indent: -9999px;
+}
+
+.ir:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 100%;
+}
+
+/*
+ * Hide from both screenreaders and browsers: h5bp.com/u
+ */
+
+.hidden {
+    display: none !important;
+    visibility: hidden;
+}
+
+/*
+ * Hide only visually, but have it available for screenreaders: h5bp.com/v
+ */
+
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+/*
+ * Extends the .visuallyhidden class to allow the element to be focusable
+ * when navigated to via the keyboard: h5bp.com/p
+ */
+
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+}
+
+/*
+ * Hide visually and from screenreaders, but maintain layout
+ */
+
+.invisible {
+    visibility: hidden;
+}
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    `contenteditable` attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+
+.clearfix:before,
+.clearfix:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+/*
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+
+.clearfix {
+    *zoom: 1;
+}
+
+/* ==========================================================================
+   EXAMPLE Media Queries for Responsive Design.
+   Theses examples override the primary ('mobile first') styles.
+   Modify as content requires.
+   ========================================================================== */
+
+@media only screen and (min-width: 35em) {
+    /* Style adjustments for viewports that meet the condition */
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+       only screen and (min-resolution: 144dpi) {
+    /* Style adjustments for high resolution devices */
+}
+
+/* ==========================================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+@media print {
+    * {
+        background: transparent !important;
+        color: #000 !important; /* Black prints faster: h5bp.com/s */
+        box-shadow:none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]:after {
+        content: " (" attr(href) ")";
+    }
+
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+
+    /*
+     * Don't show links for images, or javascript/internal links
+     */
+
+    .ir a:after,
+    a[href^="javascript:"]:after,
+    a[href^="#"]:after {
+        content: "";
+    }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead {
+        display: table-header-group; /* h5bp.com/t */
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    @page {
+        margin: 0.5cm;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+}

web/assets/stylesheets/partials/_layout.scss

@@ -0,0 +1,135 @@
+section{
+  padding-top:10px;
+}
+
+code{
+  padding:0;
+} 
+
+footer{
+  padding:40px 20px;
+  text-align:center;
+  .edits{
+    margin-right: 40px;
+  }
+}
+
+body{
+  padding:0px 20px;
+}
+
+h3{
+  line-height:45px;
+}
+
+.tagline{
+  margin-bottom: 40px;
+}
+
+.centered{
+  text-align:center;
+}
+
+.page-header{
+  margin-bottom: 10px;
+  h1, h2, h3, h4, h5, h6{
+    margin:0;
+  }
+}
+
+.hero-unit{
+  margin-bottom:0;
+}
+
+
+#call_to_action{
+  margin-top:1.5em;
+}
+
+pre.prettyprint{
+  margin-bottom:5px;
+}
+
+.admin{
+  #page{
+    padding:60px 0 40px 0;
+  }
+  .hero-unit{
+    padding: 0px 0 0.5em 0;
+  }
+}
+
+
+.row.header{
+  .actions{
+    padding-top:0.9em;
+  }
+}
+
+header.row{
+  .pagination{
+    margin:12px 0;
+  }
+}
+
+.navbar{
+  .status{
+    position: relative;
+    i{
+      position: absolute;
+      left:-28px;
+    }
+  }
+}
+
+.summary_bar{
+  .status{
+    margin-left: 10px;
+  }
+  .summary{
+    margin-top:12px;
+  }
+  .btn.btn-block{
+    line-height: 28px;
+  }
+  ul{
+    margin: 0 0 38px 0;
+    h3{
+      font-size: 1em;
+      margin:0;
+      font-weight:normal;
+      line-height: 1em;
+    }
+    li{
+      padding:8px 0 5px 0;
+      border-bottom:1px solid #DDD;
+      @include box-shadow(0 1px 0 white);
+    }
+    .desc{
+      font-size:0.8em;
+      font-weight:bold;
+    }
+    .count{
+      color: $highlight_color;
+      font-size: 1.5em;
+      font-weight:bold;
+    }
+  }
+  .poll-status{
+    height:58px;  
+  }
+}
+
+
+.queues{
+  form{
+    margin:0;
+  }
+}
+
+
+form{
+  .btn{
+    margin-right:5px;
+  }
+}

web/assets/stylesheets/partials/_navbar.scss

@@ -0,0 +1,96 @@
+$kick_time : 0.2s;
+
+.navbar-container{
+  height:40px;
+
+  .brand{
+    @include transition(all $kick_time ease-out);
+    span{
+      @include transition(all $kick_time*1.5 ease-in);
+      display:inline-block;
+    }
+  }
+}
+
+.navbar-container{
+  .brand{
+    padding:4px 0;
+    margin-left:-1150px;
+    @media (min-width: 1450px) {
+      margin-left:-1250px;
+    }
+    @media (min-width: 1650px) {
+      margin-left:-1350px;
+    }
+    @media (min-width: 1850px) {
+      margin-left:-1450px;
+    }
+    @media (min-width: 2050px) {
+      margin-left:-1550px;
+    }
+    @media (min-width: 2250px) {
+      margin-left:-1650px;
+    }
+    @media (min-width: 2450px) {
+      margin-left:-1750px;
+    }
+    @media (min-width: 2650px) {
+      margin-left:-1850px;
+    }
+    span{
+      margin-left:0;
+      // padding: 10px 0;
+    }
+  }
+  .affix{
+    .brand{
+      // margin-left:60px;
+      margin-left:0px;
+      span{
+        // padding: 10px 20px 10px 5px;
+      }
+    }
+  }
+}
+
+.navbar-footer{
+  .navbar {
+    ul.nav{
+      text-align:center;
+      float     :none;
+      a{
+        font-weight: 700;
+        font-size  :16px;
+        padding: 15px;
+        @media (max-width: $split_width) {
+          padding: 15px 5px;
+        }
+
+        &.brand{
+          font-weight:400;
+          padding:0 15px 0 0;
+          @media (max-width: $split_width) {
+            padding-right:5px;
+          }
+          // color  :$btn_primary_dark;
+          // @include text-shadow(none);
+        }
+      }
+      li{
+        display:inline-block;
+        float  :none;
+      }
+    }
+    &.affix{
+      top:0;
+      width:100%;
+      z-index: 10;
+    }
+  }
+}
+
+img.smallogo{
+  width:30px;
+  margin: 0px 0px 6px 0px;
+}
+

web/assets/stylesheets/partials/_normalize.scss

@@ -0,0 +1,504 @@
+/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/*
+ * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/*
+ * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/*
+ * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+ * and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+
+html,
+button,
+input,
+select,
+textarea {
+    font-family: sans-serif;
+}
+
+/*
+ * Addresses margins handled incorrectly in IE 6/7.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Addresses font sizes and margins set differently in IE 6/7.
+ * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+}
+
+h3 {
+    font-size: 1.17em;
+    margin: 1em 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 1.33em 0;
+}
+
+h5 {
+    font-size: 0.83em;
+    margin: 1.67em 0;
+}
+
+h6 {
+    font-size: 0.75em;
+    margin: 2.33em 0;
+}
+
+/*
+ * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+blockquote {
+    margin: 1em 40px;
+}
+
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE 6/7/8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+
+p,
+pre {
+    margin: 1em 0;
+}
+
+/*
+ * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    _font-family: 'courier new', monospace;
+    font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+
+q {
+    quotes: none;
+}
+
+/*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+/*
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+
+dl,
+menu,
+ol,
+ul {
+    margin: 1em 0;
+}
+
+dd {
+    margin: 0 0 0 40px;
+}
+
+/*
+ * Addresses paddings set differently in IE 6/7.
+ */
+
+menu,
+ol,
+ul {
+    padding: 0 0 0 40px;
+}
+
+/*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+
+nav ul,
+nav ol {
+    list-style: none;
+    list-style-image: none;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/*
+ * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Corrects margin displayed oddly in IE 6/7.
+ */
+
+form {
+    margin: 0;
+}
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE 6/7/8/9.
+ * 2. Corrects text not wrapping in Firefox 3.
+ * 3. Corrects alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/*
+ * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+    *overflow: visible;  /* 4 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ * 3. Removes excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/*
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

web/assets/stylesheets/partials/_prettify.css

@@ -0,0 +1,30 @@
+.com { color: #93a1a1; }
+.lit { color: #195f91; }
+.pun, .opn, .clo { color: #93a1a1; }
+.fun { color: #dc322f; }
+.str, .atv { color: #D14; }
+.kwd, .linenums .tag { color: #1e347b; }
+.typ, .atn, .dec, .var { color: teal; }
+.pln { color: #48484c; }
+
+.prettyprint {
+  padding: 8px;
+  background-color: #f7f7f9;
+  border: 1px solid #e9e9e9;
+}
+.prettyprint.linenums {
+  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0 0 0 33px; /* IE indents via margin-left */
+} 
+ol.linenums li {
+  padding-left: 12px;
+  color: #bebec5;
+  line-height: 18px;
+  text-shadow: 0 1px 0 #fff;
+}

web/assets/stylesheets/partials/_variables.scss

@@ -0,0 +1,28 @@
+/* susy config */
+/* see http://susy.oddbird.net/guides/reference/ */
+$total-columns:     12;
+$column-width:      4.5em;
+$gutter-width:      1em;
+$grid-padding:      $gutter-width;
+$border-box-sizing: true;
+$base-font-size:    13px;
+$base-line-height:  20px;
+$breakpoint:        0em 45em; /* min-max media query breakpoint */
+$from-direction:    left;
+$omega-float:       $from-direction;
+
+
+/* column shortcuts */
+$one-third:   $total-columns / 3;
+$two-thirds:  $one-third * 2;
+$half:        $total-columns / 2;
+$one-fourth:  $total-columns / 4;
+
+/* colors */
+$black:     #292724;
+$bg-color:  #f3f3f3;
+
+/* others */
+$font-size:         $base-font-size;
+$line-height:       $base-line-height;
+$container-padding: $base-line-height;

web/assets/stylesheets/public.scss

@@ -0,0 +1,74 @@
+.public{
+  .title{
+    position:relative;
+    &.reset{
+      .image{
+        position:relative;
+        text-indent:-1400px;
+      }
+      .text{
+        @include transform(rotate(0deg));
+      }
+    }
+    .image{
+      display:inline-block;
+      text-indent:0;
+      img{
+        max-width:none;
+      }
+
+      @include transition(all $kick_time ease-out);
+    }
+    .text{
+      display:inline-block;
+      @include transition(all $kick_time ease-out $kick_time*0.90);
+
+      @include transform(rotate(2deg));
+    }
+  }
+  &.csstransforms3d{
+    .title{
+      margin:0 auto;
+      width: 450px;
+      @media (max-width: $split_width) {
+        width: 280px;
+        .logo{
+          width: 60px;
+        }
+      }
+
+      &.reset{
+        .image{
+          text-indent:0;
+          @include transform3d(translateX(-1000px));
+        }
+        .text{
+          @include transform3d(translateX(0px) rotate(0deg));
+        }
+      }
+      .image{
+        position:absolute;
+        top: 0;
+        left:0;
+        @include transform3d(translateX(0px));
+        img{
+          position:absolute;
+          top: 0;
+          left:0;
+        }
+      }
+      .text{
+        @include transform3d(translateX(35px) rotateZ(2deg));
+      }
+    }
+  }
+  .navbar-inner{
+    @include border-radius(0);
+    border-left:0;
+    border-right:0;
+    @media (max-width: $split_width) {
+      padding:0;
+    }
+  }
+}
+

web/assets/stylesheets/style.scss

@@ -0,0 +1,69 @@
+$split_width: 500px;
+
+@import 'compass';
+
+@import 'partials/fonts';
+@import 'partials/colors';
+@import 'partials/variables';
+@import 'partials/base';
+@import 'partials/layout';
+@import 'partials/prettify';
+
+@import 'partials/navbar';
+
+$kick_time : 0.2s;
+
+$status_spacing: 50px;
+@import 'status/*.png';
+@include all-status-sprites;
+
+
+.btn{
+  font-weight: 700;
+  border     : none;
+  @include border-radius(3px);
+  @include box-shadow($smooth_shadow);
+  @include background-image($btn_gradient);
+  &:hover{
+    background-color:$btn_dark;
+  }
+}
+
+.btn-primary{
+  @include background-image($btn_primary_gradient);
+  &:hover{
+    background-color:$btn_primary_dark;
+  }
+}
+
+.btn-danger{
+  @include background-image($btn_danger_gradient);
+  &:hover{
+    background-color:$btn_danger_dark;
+  }
+}
+
+.poll-status{
+  padding:10px 0;
+}
+
+// .status_idle{
+//   @include background-image('images/status/idle.png');
+// }
+
+@mixin status_size($icon){
+  $height: status-sprite-height($icon);
+  $width : status-sprite-width($icon);
+  height : $height;
+  width  : $width;
+  display: inline-block;
+}
+
+.status-idle{
+  @include status_size('idle');
+}
+.status-active{
+  @include status_size('active');
+}
+
+@import 'public';

web/assets/stylesheets/vendors.scss

@@ -0,0 +1,2 @@
+//= require vendor/bootstrap
+//= require vendor/bootstrap-responsive

web/views/_nav.slim

@@ -0,0 +1,13 @@
+.navbar-inner
+  .container
+    a.btn.btn-navbar data-toggle="collapse" data-target=".nav-collapse"
+      span.icon-bar
+      span.icon-bar
+      span.icon-bar
+    a.brand href='#{{root_path}}'
+      = Sidekiq::NAME
+    div.nav-collapse
+      ul.nav
+        - tabs.each do |title, url|
+          li class="#{(current_path==url) ? 'active':''}"
+            a href='#{{root_path}}#{{url}}' #{title}

web/views/_status.slim

@@ -0,0 +1,3 @@
+span.status
+  i class="status-sprite status-#{current_status}"
+  == current_status

web/views/_summary.slim

@@ -1,8 +1,19 @@
-.hero-unit
-  h1 Sidekiq is #{current_status}
-  p Processed: #{number_with_delimiter(processed)}
-  p Failed: #{number_with_delimiter(failed)}
-  p Busy Workers: #{number_with_delimiter(workers.size)}
-  p Scheduled: #{number_with_delimiter(zcard('schedule'))}
-  p Retries Pending: #{number_with_delimiter(zcard('retry'))}
-  p Queue Backlog: #{number_with_delimiter(backlog)}
+ul.unstyled.summary
+  li
+    span.count #{number_with_delimiter(processed)}
+    span.desc  Processed 
+  li
+    span.count #{number_with_delimiter(failed)}
+    span.desc  Failed
+  li
+    span.count #{number_with_delimiter(workers.size)}
+    span.desc  Busy
+  li
+    span.count #{number_with_delimiter(zcard('schedule'))}
+    span.desc  Scheduled
+  li
+    span.count #{number_with_delimiter(zcard('retry'))}
+    span.desc  Retries pending
+  li
+    span.count #{number_with_delimiter(backlog)}
+    span.desc  Queue

web/views/_workers.slim

@@ -1,5 +1,5 @@
-table class="table table-striped table-bordered workers"
-  tr
+table class="workers table table-hover table-bordered table-striped"
+  thead
     th Worker
     th Queue
     th Class
@@ -8,7 +8,8 @@ table class="table table-striped table-bordered workers"
   - workers.each_with_index do |(worker, msg), index|
     tr
       td= worker
-      td= msg['queue']
+      td
+        a href="queues/#{msg['queue']}" = msg['queue']
       td= msg['payload']['class']
       td
         - if msg['payload']['args'].to_s.size > 100

web/views/index.slim

@@ -1,11 +1,8 @@
-== slim :_summary
-
-.actions
-  form.pull-left action="#{root_path}reset" method="post"
-    button.btn.btn-small type="submit" title="If you kill -9 Sidekiq, this table can fill up with old data." Clear worker list
-  .pull-right
-    span.poll-status
-    a.btn.btn-small name='poll' href='#{{root_path}}poll' Live Poll
+.row.header
+  .span7
+    h3 Workers
+  .span2.actions
+    form action="#{root_path}reset" method="post"
+      button.btn.btn.btn-primary.btn-block type="submit" title="If you kill -9 Sidekiq, this table can fill up with old data." Clear worker list
 
 == slim :_workers
-

web/views/layout.slim

@@ -1,33 +1,38 @@
 doctype html
 html
   head
+    link href='#{{root_path}}assets/vendors.css' media='screen' rel='stylesheet' type='text/css'
     link href='#{{root_path}}assets/application.css' media='screen' rel='stylesheet' type='text/css'
     title= Sidekiq::NAME
-  body
-    .navbar.navbar-fixed-top.navbar-inverse
-      .navbar-inner
-        .container
-          a.btn.btn-navbar data-toggle="collapse" data-target=".nav-collapse"
-            span.icon-bar
-            span.icon-bar
-            span.icon-bar
-          a.brand href='#{{root_path}}'
-            = Sidekiq::NAME
-          div.nav-collapse
-            ul.nav
-              li
-                a href='#{{root_path}}' Home
-              - tabs.each do |tab|
-                li
-                  a href='#{{root_path}}#{{tab.downcase}}': #{tab}
-
-            ul.nav.pull-right
-              li
-                a Redis: #{location}
-              li
-                a #{Time.now.utc}
+  body.admin
+    .navbar.navbar-fixed-top
+      ==slim :_nav
 
+    #page
       .container
+        .row
+          .span3.summary_bar
+            h3
+              span.title Status
+              == slim :_status
+            == slim :_summary
+            .row
+              .span3
+                a.btn.btn-block name='poll' href='#{{root_path}}poll' Live Poll
+              .span3.poll-status
+                p
+                  span.text
+                  span.badge
+
+            ul.unstyled
+              li
+                span.desc Redis
+                div.data  #{location}
+              li
+                span.desc Time
+                div.data #{Time.now.utc.strftime('%H:%M:%S UTC')}
+
+          .span9
             == yield
 
     script type="text/javascript" src="#{{root_path}}assets/application.js"

web/views/poll.slim

@@ -1,3 +1,4 @@
 div
   == slim :_summary
   == slim :_workers
+  == slim :_status

web/views/queue.slim

@@ -1,10 +1,13 @@
-header
-  h1 Current messages in #{@name}
-
+header.row
+  .span5
+    h3
+      | Current messages in 
+      span.title #{@name}
+  .span4
     == slim :_paging, :locals => { :url => "#{root_path}queues/#{@name}" }
 
-table class="table table-striped table-bordered"
-  tr
+table class="queue table table-hover table-bordered table-striped"
+  thead
     th Class
     th Arguments
     th

web/views/queues.slim

@@ -1,19 +1,19 @@
-h1 Queues
+h3 Queues
 
 - if @queues.size > 0
-  table class="table table-striped table-bordered"
-    tr
+  table class="queues table table-hover table-bordered table-striped"
+    thead
       th Queue
       th Size
-      th
+      th Actions
     - queues.each do |(queue, size)|
       tr
         td
           a href="#{root_path}queues/#{queue}" #{queue}
         td= number_with_delimiter(size)
-        td
+        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?"
 - else
   p No queues found.
-  a href="#{root_path}" Back
+  a href="#{root_path}" ← Back

web/views/retries.slim

@@ -1,15 +1,19 @@
-h1 Retries
-
+header.row
+  .span5
+    h3 Retries
+  .span4
     - if @retries.size > 0
       == slim :_paging, :locals => { :url => "#{root_path}retries" }
 
+- if @retries.size > 0
+
   form action="#{root_path}retries" method="post"
     table class="table table-striped table-bordered"
       tr
-        th
+        th width="20px"
           input type="checkbox" class="check_all"
-        th Next Retry
-        th Retry Count
+        th width="25%" Next Retry
+        th width="11%" Retry count
         th Queue
         th Worker
         th Args
@@ -28,4 +32,4 @@ h1 Retries
     input.btn.btn-danger type="submit" name="delete" value="Delete"
 - else
   p No retries found.
-  a href="#{root_path}" Back
+  a href="#{root_path}" ← Back

web/views/retry.slim

@@ -1,8 +1,8 @@
 header
-  h1 Job
+  h3 Job
 
 - @retries.each do |msg|
-  table class="table table-striped table-bordered"
+  table class="retry table table-bordered table-striped"
     tbody
       tr
         th Queue
@@ -31,8 +31,8 @@ header
         th Next Retry
         td== relative_time(Time.at(@score))
 
-  h1 Error
-  table class="table table-striped table-bordered"
+  h3 Error
+  table class="error table table-bordered table-striped"
     tbody
       tr
         th Error Class
@@ -47,6 +47,6 @@ header
           td
             code== msg['error_backtrace'].join("<br/>")
   form.form-horizontal action="#{root_path}retries/#{@score}" method="post"
-    a.btn href="#{root_path}retries" &larr; Back
+    a.btn href="#{root_path}retries" ← Back
     input.btn.btn-primary type="submit" name="retry" value="Retry Now"
     input.btn.btn-danger type="submit" name="delete" value="Delete"

web/views/scheduled.slim

@@ -1,15 +1,19 @@
-h1 Scheduled Jobs
-
+header.row
+  .span5
+    h3 Scheduled Jobs
+  .span4
     - if @scheduled.size > 0
       == slim :_paging, :locals => { :url => "#{root_path}scheduled" }
 
+- if @scheduled.size > 0
+
   form action="#{root_path}scheduled" method="post"
     table class="table table-striped table-bordered"
-      tr
-        th
+      thead
+        th width="20px"
           input type="checkbox" class="check_all"
-        th When
-        th Queue
+        th width="25%" When
+        th width="10%" Queue
         th Worker
         th Args
       - @scheduled.each do |(msg, score)|
@@ -24,4 +28,4 @@ h1 Scheduled Jobs
     input.btn.btn-danger type="submit" name="delete" value="Delete"
 - else
   p No scheduled jobs found.
-  a href="#{root_path}" Back
+  a href="#{root_path}" ← Back