prepare and change jobs markup

app/styles/app.scss

@@ -60,4 +60,5 @@
 @import "app/layouts/error";
 @import "app/layouts/footer";
 @import "app/layouts/buildheader";
+@import "app/layouts/build-job";
 @import "app/top";

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

@@ -0,0 +1,49 @@
+@mixin colorJobs($color)
+  .build-status a
+    color: $color
+
+// job matrix
+.tile--jobs
+  padding-left: 2.7rem
+  margin-bottom: 0.35rem
+  @media #{$medium-up}
+    height: 38px
+  .tile-main
+    color: #7d8282
+    // variations if env and/or code are set
+    p.tile-single-line
+      padding: 0
+      line-height: 1.4
+      &:only-of-type
+        padding: .7em 0
+        .icon--env
+          height: 1.2em
+        .icon--code
+          width: 1.3em
+          height: 1.2em
+    .icon
+      margin-right: .3em
+    .icon.mac
+      height: 1.6em
+    @media #{$medium-up}
+      white-space: nowrap
+      overflow: hidden
+      border-right: solid 1px $grey4
+      &:after
+        @include fadeOut(right, -90deg, $cream-light)
+    @media #{$xlarge-up}
+      @include grid-column(5)
+  .tile-additional
+    @media #{$xlarge-up}
+      @include grid-column(7)
+
+  &.failed
+    @include colorJobs($fail-color)
+  &.errored
+    @include colorJobs(#939292)
+  &.passed
+    @include colorJobs($pass-color)
+  &.started,
+  &.created,
+  &.received
+    @include colorJobs($created-color)

app/styles/app/layouts/buildheader.sass

@@ -58,6 +58,7 @@
     margin-top: 2.5rem
     color: $grey1
     font-size: $font-size-sm
+    font-weight: 400
     & span:hover + .tooltip
       display: block
 

app/styles/app/modules/tiles.sass

@@ -6,12 +6,8 @@
   .build-status a
     color: $color
 
-@mixin colorJobs($color)
-  .build-status a
-    color: $color
-
 .tile
-  @extend border-radius-4px
+  @extend %border-radius-4px
   overflow: hidden
   position: relative
   padding: .8rem .8rem .8rem 3rem
@@ -40,18 +36,6 @@
     &.inactive
       @include colorTiles($cancel-color)
 
-  &.tile--jobs
-    &.failed
-      @include colorJobs($fail-color)
-    &.errored
-      @include colorJobs(#939292)
-    &.passed
-      @include colorJobs($pass-color)
-    &.started,
-    &.created,
-    &.received
-      @include colorJobs($created-color)
-
   @media #{$medium-up}
     height: 145px
 
@@ -163,42 +147,6 @@
     @media #{$xlarge-up}
       @include grid-column(4)
 
-// job matrix
-.tile--jobs
-  padding-left: 2.7rem
-  margin-bottom: 0.3em
-  @media #{$medium-up}
-    height: 64px
-  .tile-main
-    color: #7d8282
-    // variations if env and/or code are set
-    p.tile-single-line
-      padding: 0
-      line-height: 1.4
-      &:only-of-type
-        padding: .7em 0
-        .icon--env
-          height: 1.2em
-        .icon--code
-          width: 1.3em
-          height: 1.2em
-    .icon
-      margin-right: .3em
-    .icon.mac
-      height: 1.6em
-    @media #{$medium-up}
-      white-space: nowrap
-      overflow: hidden
-      border-right: solid 1px $grey4
-      &:after
-        @include fadeOut(right, -90deg, $cream-light)
-    @media #{$xlarge-up}
-      @include grid-column(5)
-  .tile-additional
-    @media #{$xlarge-up}
-      @include grid-column(7)
-
-
 p.tile-single-line
   padding: .7em 0
   .icon--code

app/templates/jobs.hbs

@@ -15,42 +15,64 @@
     {{#each job in view.jobs}}
       {{#view 'jobs-item' context=job}}
         <div {{bind-attr class=":tile :tile--small :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>
 
-          <div class="tile-main medium-4 columns">
+            <p class="job-id build-status">
-          {{#if config.env}}
-            <p class="build-env tile-single-line"><span class="icon icon--env"></span>{{config.env}}</p>
-          {{/if}}
-          {{#if view.languages}}
-            <p class="build-lang tile-single-line"><span class="icon icon--lang"></span>{{view.languages}}</p>
-          {{/if}}
-          </div>
-
-          <div class="tile-additional medium-8 columns end">
-            <p class="columns small-6 medium-2 large-3 tile-single-line build-status">
               <span class="icon icon--hash"></span>
               {{#if job.id}}
                 {{#if job.repo.slug}}
-                  {{#link-to "job" repo job}}{{number}}{{/link-to}}
+                  {{number}}
                 {{/if}}
               {{/if}}
             </p>
-            <p class="columns small-6 medium-4 large-3 tile-single-line" {{bind-attr title="startedAt"}}>
+
+            <p {{bind-attr class=":job-os :build-os config.os"}}>
+              <span {{bind-attr class=":icon config.os"}}></span>
+              {{config.os}}
+            </p>
+
+            {{#if view.languages}}
+              <p class="job-lang build-lang">
+                <span class="icon icon--lang"></span>
+                {{view.languages}}
+              </p>
+            {{else}}
+              <p class="job-lang build-lang is-empty">
+                <span class="icon icon--lang"></span>
+                no language set
+              </p>
+            {{/if}}
+            
+            {{#if config.env}}
+              <p class="job-env build-env">
+                <span class="icon icon--env"></span>
+                {{config.env}}
+              </p>
+            {{else}}
+              <p class="job-lang build-lang is-empty">
+                <span class="icon icon--env"></span>
+                no environments set
+              </p>
+            {{/if}}
+
+            <p class="job-duration" {{bind-attr title="startedAt"}}>
               <span class="icon icon--clock"></span>
               {{format-duration duration}}
             </p>
-            <p class="columns small-6 medium-5 large-5 tile-single-line" {{bind-attr title="formattedFinishedAt"}}>
+
+            {{!-- <p class="" {{bind-attr title="formattedFinishedAt"}}>
               <span class="icon icon--cal"></span>
               {{format-time finishedAt}}
-            </p>
+            </p> --}}
-            <p {{bind-attr class=":columns :small-6 :medium-1 :large-1 :tile-single-line :build-os config.os"}}><span {{bind-attr class=":icon config.os"}}></span>{{config.os}}</p>
-          </div>
-        </div>
 
+          {{/link-to}}
+        </div>
       {{/view}}
-      {{job.configKeys}}
+      {{!-- {{job.configKeys}} --}}
     {{/each}}
   </section>
 {{/if}}