first stage build jobs restyle

app/styles/app/layouts/build-job.sass

@@ -1,49 +1,85 @@
-@mixin colorJobs($color)
+@mixin colorJobs($color, $color-bg)
-  .build-status a
+  .job-id
     color: $color
+  &:hover
+    background-color: $color-bg
+    .job-env,
+    .job-lang
+      &:after
+        @include fadeOut(right, -90deg, $color-bg)
 
 // job matrix
 .tile--jobs
-  padding-left: 2.7rem
+  padding: 0.5em 0.4em 0.4em 3.5rem
   margin-bottom: 0.35rem
+  
   @media #{$medium-up}
     height: 38px
-  .tile-main
+  
-    color: #7d8282
+  a
-    // variations if env and/or code are set
+    color: $grey1
-    p.tile-single-line
+  .tile-status--job
-      padding: 0
+    width: 2em
-      line-height: 1.4
+
-      &:only-of-type
+  .jobs-item
-        padding: .7em 0
+    padding: .1em 0
-        .icon--env
-          height: 1.2em
-        .icon--code
-          width: 1.3em
-          height: 1.2em
     .icon
-      margin-right: .3em
+      height: 1.2em
-    .icon.mac
+      margin-right: .1em
-      height: 1.6em
+    .job-os .icon
-    @media #{$medium-up}
+      height: 1.3em
+    .icon--lang
+      height: 1em
+      width: 1.4em
+    .icon--env
+      width: 1.1em
+
+  @media #{$medium-up}
+    .jobs-item
+      position: relative
+      float: left
       white-space: nowrap
-      overflow: hidden
+      padding: 0
-      border-right: solid 1px $grey4
+    .job-id
+      width: grid-calc(3, 24)
+      max-width: 82px
+    .job-os
+      width: grid-calc(1, 24)
+      max-width: 30px
+    .job-lang
+      width: grid-calc(5, 24)
+      max-width: 180px
       &:after
         @include fadeOut(right, -90deg, $cream-light)
-    @media #{$xlarge-up}
+    .job-env
-      @include grid-column(5)
+      width: grid-calc(9, 24)
-  .tile-additional
+      max-width: 395px
-    @media #{$xlarge-up}
+      &:after
-      @include grid-column(7)
+        @include fadeOut(right, -90deg, $cream-light)
+    .job-duration
+      width: grid-calc(6, 24)
+      max-width: 165px
+  @media #{$xlarge-up}
+    .job-id
+      width: grid-calc(2, 24)
+    .job-os
+      width: grid-calc(1, 24)
+    .job-lang
+      width: grid-calc(5, 24)
+    .job-env
+      width: grid-calc(11, 24)
+    .job-duration
+      width: grid-calc(4, 24)
 
-  &.failed
+  &.failed,
-    @include colorJobs($fail-color)
   &.errored
-    @include colorJobs(#939292)
+    @include colorJobs($fail-color, #fbebe6)
   &.passed
-    @include colorJobs($pass-color)
+    @include colorJobs($pass-color, #e5efe4)
   &.started,
   &.created,
   &.received
-    @include colorJobs($created-color)
+    @include colorJobs($created-color, #f4efd8)
+
+.is-empty
+  opacity: .4

app/templates/jobs.hbs

@@ -14,14 +14,14 @@
 
     {{#each job in view.jobs}}
       {{#view 'jobs-item' context=job}}
-        <div {{bind-attr class=":tile :tile--small :tile--jobs :row job.state" }}>
+        <div {{bind-attr class=":tile :tile--jobs :row job.state" }}>
           {{#link-to "job" repo job}}
 
             <div class="tile-status tile-status--job">
               <span {{bind-attr class=":icon :icon--job job.state"}}></span>
             </div>
 
-            <p class="job-id build-status">
+            <p class="job-id jobs-item build-status">
               <span class="icon icon--hash"></span>
               {{#if job.id}}
                 {{#if job.repo.slug}}
@@ -30,36 +30,36 @@
               {{/if}}
             </p>
 
-            <p {{bind-attr class=":job-os :build-os config.os"}}>
+            <p {{bind-attr class=":job-os :jobs-item :build-os config.os"}}>
               <span {{bind-attr class=":icon config.os"}}></span>
-              {{config.os}}
+              {{!-- {{config.os}} --}}
             </p>
 
             {{#if view.languages}}
-              <p class="job-lang build-lang">
+              <p class="job-lang jobs-item build-lang">
                 <span class="icon icon--lang"></span>
                 {{view.languages}}
               </p>
             {{else}}
-              <p class="job-lang build-lang is-empty">
+              <p class="job-lang jobs-item build-lang is-empty">
                 <span class="icon icon--lang"></span>
                 no language set
               </p>
             {{/if}}
             
             {{#if config.env}}
-              <p class="job-env build-env">
+              <p class="job-env jobs-item build-env">
                 <span class="icon icon--env"></span>
                 {{config.env}}
               </p>
             {{else}}
-              <p class="job-lang build-lang is-empty">
+              <p class="job-env jobs-item build-env is-empty">
                 <span class="icon icon--env"></span>
                 no environments set
               </p>
             {{/if}}
 
-            <p class="job-duration" {{bind-attr title="startedAt"}}>
+            <p class="job-duration jobs-item" {{bind-attr title="startedAt"}}>
               <span class="icon icon--clock"></span>
               {{format-duration duration}}
             </p>