From c32f4a1c83e262576ba2b0bc2c8a0f026d66cc1f Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Wed, 18 Mar 2015 12:14:12 +0100
Subject: [PATCH] expand job env on hover and hide duration

---
 app/styles/app/layouts/build-job.sass | 36 +++++++++++++++++----------
 app/templates/jobs.hbs                | 35 ++++++++++++++------------
 2 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/app/styles/app/layouts/build-job.sass b/app/styles/app/layouts/build-job.sass
index 13c964a0..8a411055 100644
--- a/app/styles/app/layouts/build-job.sass
+++ b/app/styles/app/layouts/build-job.sass
@@ -3,19 +3,22 @@
     color: $color
   &:hover
     background-color: $color-bg
-    // .job-env,
+    .job-env,
     .job-lang
+      background-color: $color-bg
       &:after
         @include fadeOut(right, -90deg, $color-bg)
 
+
+.job-anchor
+  position: relative
+
 // job matrix
 .tile--jobs
   padding: 0.5em 0.4em 0.4em 3.5rem
   margin-bottom: 0.35rem
-
-  @media #{$medium-up}
-    height: 38px
-
+  p
+    white-space: normal
   a
     color: $grey1
   .tile-status--job
@@ -35,6 +38,9 @@
       width: 1.1em
 
   @media #{$medium-up}
+    height: 38px
+    p
+      white-space: nowrap
     .icon--lang,
     .icon--env
       margin-right: .4em
@@ -56,11 +62,20 @@
       // max-width: 180px
       &:after
         @include fadeOut(right, -90deg, $cream-light)
+    
+    .job-anchor
+      width: grid-calc(14, 24)
     .job-env
-      width: grid-calc(8, 24)
+      width: grid-calc(14, 24)
       // max-width: 395px
+      &:after
+        @include fadeOut(right, -90deg, $cream-light)
+      &:hover
+        position: absolute
+        width: 100%
+        z-index: 999
     .job-duration
-      width: grid-calc(6, 24)
+      width: grid-calc(9, 24)
       max-width: 165px
       float: right
 
@@ -68,15 +83,10 @@
     .job-id
       width: grid-calc(2, 24)
     .job-os
-      width: grid-calc(1, 24)
       margin: 0 1em
     .job-lang
       width: grid-calc(4, 24)
       margin-right: 2em
-    .job-env
-      width: grid-calc(10, 24)
-    .job-duration
-      width: grid-calc(4, 24)
 
   &.failed,
   &.errored
@@ -89,4 +99,4 @@
     @include colorJobs($created-color, #f4efd8)
 
 .is-empty
-  opacity: .3
\ No newline at end of file
+  opacity: .3
diff --git a/app/templates/jobs.hbs b/app/templates/jobs.hbs
index f1b3229e..cec82864 100644
--- a/app/templates/jobs.hbs
+++ b/app/templates/jobs.hbs
@@ -31,23 +31,24 @@
                 {{/if}}
               </p>
 
-              <p {{bind-attr class=":job-os :jobs-item :build-os config.os"}}>
-                <span {{bind-attr class=":icon config.os"}}></span>
-                {{!-- {{config.os}} --}}
-              </p>
+            <p {{bind-attr class=":job-os :jobs-item :build-os config.os"}}>
+              <span {{bind-attr class=":icon config.os"}}></span>
+              {{!-- {{config.os}} --}}
+            </p>
 
-              {{#if view.languages}}
-                <p class="job-lang jobs-item build-lang">
-                  <span class="icon icon--lang"></span>
-                  {{view.languages}}
-                </p>
-              {{else}}
-                <p class="job-lang jobs-item build-lang is-empty">
-                  <span class="icon icon--lang"></span>
-                  no language set
-                </p>
-              {{/if}}
-              
+            {{#if view.languages}}
+              <p class="job-lang jobs-item build-lang">
+                <span class="icon icon--lang"></span>
+                {{view.languages}}
+              </p>
+            {{else}}
+              <p class="job-lang jobs-item build-lang is-empty">
+                <span class="icon icon--lang"></span>
+                no language set
+              </p>
+            {{/if}}
+            
+            <div class="job-anchor jobs-item">
               {{#if config.env}}
                 <p class="job-env jobs-item build-env">
                   <span class="icon icon--env"></span>
@@ -65,6 +66,8 @@
                 {{format-duration duration}}
               </p>
 
+            </div>
+
               {{!-- <p class="" {{bind-attr title="formattedFinishedAt"}}>
                 <span class="icon icon--cal"></span>
                 {{format-time finishedAt}}