markup and styles for running tab

app/styles/app/layouts/sidebar.sass

@@ -83,4 +83,8 @@ $sb-font-size: 14px
     border-bottom: .46rem solid #FAF9F7
     background-color: #FAF9F7
 
-
+.sidebar-seperator
+  width: 90%
+  margin: 1rem auto
+  border: none
+  border-bottom: solid 2px #f2f2f2

app/templates/queue.hbs

@@ -1,23 +1,29 @@
-<ul id="queues">
-  <li class="queue">
-    <h4>Queue ({{length}})</h4>
-    <ul>
-      {{#if length}}
-        {{#each job in controller}}
-          <li>
-            {{#if job.repo.slug}}
-              {{#link-to "job" job.repo job}}
-                <span class="slug" {{bind-attr title="job.slug"}}>
-                  {{job.repo.slug}}
-                </span>
-                #{{job.number}}
-              {{/link-to}}
-            {{/if}}
-          </li>
-        {{/each}}
-      {{else}}
-        There are no jobs
-      {{/if}}
-    </ul>
-  </li>
-</ul>
+
+{{#if length}}
+  {{#each job in controller}}
+    <div {{bind-attr class=":tile :tile--sidebar job.state"}}>
+        {{#if job.repo.slug}}
+          <span {{bind-attr class=":icon :icon--job job.state"}}></span>
+          {{#link-to "job" job.repo job}}{{job.repo.slug}}{{/link-to}}
+        {{/if}}
+      </h2>
+
+      <p class="tile-title float-right">
+        <span class="icon icon--hash"></span>
+        {{#link-to "job" job.repo job}}{{job.number}}{{/link-to}}
+      </p>
+
+      <p>
+        <span class="icon icon--clock"></span>
+        Duration: 
+        <abbr class="duration" {{bind-attr title="job.startedAt"}}>
+          {{format-duration job.startedAt}}
+        </abbr>
+      </p>
+
+    </div>
+
+  {{/each}}
+{{else}}
+  <div class="spinner-container">There are no jobs queued</div>
+{{/if}}

app/templates/repos.hbs

@@ -8,9 +8,13 @@
 
 {{#if showRunningJobs}}
   <div class="tabbody sidebar-list">
-    {{render "runningJobs"}}
-  Hello
-    {{render "queue"}}
+    <div>
+      {{render "runningJobs"}}
+    </div>
+    <hr class="sidebar-seperator">
+    <div>
+      {{render "queue"}}
+    </div>
   </div>
 {{else}}
   <div class="tabbody sidebar-list">

app/templates/repos/list/tabs.hbs

@@ -11,7 +11,7 @@
     {{/unless}}
 
     <li id="tab_running" {{bind-attr class="view.classRunning"}}>
-      <a href="#" {{action "showRunningJobs"}}>Running</a>
+      <a href="#" {{action "showRunningJobs"}}>Running (2/3)</a>
     </li>
 
     <li id="tab_new" {{bind-attr class="view.classNew :float-right"}}>

app/templates/running-jobs.hbs

@@ -1,17 +1,30 @@
-<h4>Running Jobs ({{controller.length}})</h4>
+{{!-- <h4>Running Jobs ({{controller.length}})</h4> --}}
 
-<ul class="jobs">
-  {{#if controller.length}}
-    {{#each job in controller}}
-      <li {{bind-attr title="job.slug"}}">
+{{#if controller.length}}
+  {{#each job in controller}}
+    <div {{bind-attr class=":tile :tile--sidebar job.state"}}>
         {{#if job.repo.slug}}
-          {{#link-to "job" job.repo job}}
-            {{job.repo.slug}} #{{job.number}}
-          {{/link-to}}
+          <span {{bind-attr class=":icon :icon--job job.state"}}></span>
+          {{#link-to "job" job.repo job}}{{job.repo.slug}}{{/link-to}}
         {{/if}}
-      </li>
-    {{/each}}
-  {{else}}
-    There are no jobs
-  {{/if}}
-</ul>
+      </h2>
+
+      <p class="tile-title float-right">
+        <span class="icon icon--hash"></span>
+        {{#link-to "job" job.repo job}}{{job.number}}{{/link-to}}
+      </p>
+
+      <p>
+        <span class="icon icon--clock"></span>
+        Duration: 
+        <abbr class="duration" {{bind-attr title="job.startedAt"}}>
+          {{format-duration job.startedAt}}
+        </abbr>
+      </p>
+
+    </div>
+
+  {{/each}}
+{{else}}
+  <div class="spinner-container">There are no jobs running</div>
+{{/if}}