From fa13d840895534912d0d4f0c819cf2cd1574a585 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Wed, 18 Mar 2015 16:38:28 +0100
Subject: [PATCH] markup and styles for running tab

---
 app/styles/app/layouts/sidebar.sass |  6 +++-
 app/templates/queue.hbs             | 52 ++++++++++++++++-------------
 app/templates/repos.hbs             | 10 ++++--
 app/templates/repos/list/tabs.hbs   |  2 +-
 app/templates/running-jobs.hbs      | 41 +++++++++++++++--------
 5 files changed, 69 insertions(+), 42 deletions(-)

diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass
index f04c92d6..b3ae311e 100644
--- a/app/styles/app/layouts/sidebar.sass
+++ b/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
diff --git a/app/templates/queue.hbs b/app/templates/queue.hbs
index 7229b182..a0a2d83c 100644
--- a/app/templates/queue.hbs
+++ b/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}}
\ No newline at end of file
diff --git a/app/templates/repos.hbs b/app/templates/repos.hbs
index 7f7f4833..95fafe87 100644
--- a/app/templates/repos.hbs
+++ b/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">
diff --git a/app/templates/repos/list/tabs.hbs b/app/templates/repos/list/tabs.hbs
index 35f03d35..d4f178f7 100644
--- a/app/templates/repos/list/tabs.hbs
+++ b/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"}}>
diff --git a/app/templates/running-jobs.hbs b/app/templates/running-jobs.hbs
index 04e19178..35f6f33b 100644
--- a/app/templates/running-jobs.hbs
+++ b/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}}