start new build job view

app/styles/app/_mixins/vars.sass

@@ -4,7 +4,7 @@ $font-size-sm: 14px
 $line-height-m: 1.3
 
 // colors
-$teal1: #5FA5A4
+$teal1: #5BA5A4
 $teal2: #63A4A3
 
 $blue-grey: #404650
@@ -68,7 +68,7 @@ $log-header-bg: #444444
 
 // new build header
 $font-size-xxl: 30px
-$grey1: #A5ACAD
+$grey1: #A6ADAD
 $grey2: #969496
 $grey3: #808080
 $grey4: #e6e8e8

app/styles/app/layouts/buildheader.sass

@@ -123,3 +123,7 @@
     height: 1.05em
   .icon--codeclimate
     width: 1.2em
+
+.build-title
+  color: $grey1
+  font-size: $font-size-sm

app/styles/app/modules/icons.sass

@@ -85,9 +85,11 @@
 
 .icon--env
   background-image: inline-image('svg/icon-environment.svg')
-.icon--cross-red
+.icon--cross-red,
+.icon--job.failed
   background-image: inline-image('svg/icon-job-failed.svg')
-.icon--check-green
+.icon--check-green,
+.icon--job.passed
   background-image: inline-image('svg/icon-job-passed.svg')
 .icon--lang
   background-image: inline-image('svg/icon-language.svg')

app/styles/app/modules/tiles.sass

@@ -14,6 +14,11 @@
   p
     margin: 0
     white-space: nowrap
+  .icon
+    vertical-align: middle
+  .icon--lang
+    width: 1.2em
+    height: 0.9em
 
   &.started,
   &.created
@@ -137,3 +142,25 @@
   .tile-additional
     @media #{$xlarge-up}
       @include grid-column(4)
+
+// job matrix
+.tile--jobs
+  margin-bottom: 0.8em
+  .tile-main
+    .icon
+      margin-right: .3em
+    p
+      padding: .1em 0
+    @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
+    p
+      padding: 1em 0
+    @media #{$xlarge-up}
+      @include grid-column(7)

app/templates/jobs.hbs

@@ -1,47 +1,53 @@
 {{#if view.jobs.length}}
-  <table {{bind-attr id=view.jobTableId}} class="list">
+  <section {{bind-attr id=view.jobTableId}}>
+
   {{#if view.required}}
-    <caption>
-      Build Matrix
-    </caption>
+    <h2 class="build-title">Build Jobs</h2>
   {{else}}
-    <caption>
-      Allowed Failures
-      <a title="What's this?" class="help open-popup"
-        name="help-allowed_failures" {{action "openHelpPopup" target=view}}></a>
-    </caption>
+    <h2 class="build-title">Allowed Failures
+      <a title="What's this?" class="open-popup" name="help-allowed_failures" {{action "openHelpPopup" target=view}}>
+        <span class="icon icon--env"></span>
+      </a>
+    </h2>
   {{/if}}
-    <thead>
-      <tr>
-        {{#each key in view.build.configKeys}}
-          <th>{{key}}</th>
-        {{/each}}
-      </tr>
-    </thead>
-    <tbody>
-      {{#each job in view.jobs}}
-        {{#view 'jobs-item' context=job}}
-          <td class="number">
-            <span class="status"></span>
-            {{#if job.id}}
-              {{#if job.repo.slug}}
-                {{#link-to "job" repo job}}{{number}}{{/link-to}}
+
+    {{#each job in view.jobs}}
+      {{#view 'jobs-item' context=job}}
+        <div class="tile tile--small tile--jobs row">
+          <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="build-env"><span class="icon icon--env"></span>insert env</p>
+            <p class="build-lang"><span class="icon icon--lang"></span>insert language</p>
+          </div>
+
+          <div class="tile-additional medium-8 columns end">
+            <p class="columns small-6 medium-2">
+              <span class="icon icon--hash"></span>
+              {{#if job.id}}
+                {{#if job.repo.slug}}
+                  {{#link-to "job" repo job}}{{number}}{{/link-to}}
+                {{/if}}
               {{/if}}
-            {{/if}}
-          </td>
-          <td class="duration" {{bind-attr title="startedAt"}}>
-            {{format-duration duration}}
-          </td>
-          <td class="finished_at timeago" {{bind-attr title="formattedFinishedAt"}}>
-            {{format-time finishedAt}}
-          </td>
-          {{#each value in configValues}}
-            <td>{{value}}</td>
-          {{/each}}
-        {{/view}}
-      {{/each}}
-    </tbody>
-  </table>
+            </p>
+            <p class="columns small-6 medium-4" {{bind-attr title="startedAt"}}>
+              <span class="icon icon--clock"></span>
+              {{format-duration duration}}
+            </p>
+            <p class="columns small-6 medium-5" {{bind-attr title="formattedFinishedAt"}}>
+              <span class="icon icon--cal"></span>
+              {{format-time finishedAt}}
+            </p>
+            <p class="columns small-6 medium-1"><span {{bind-attr class=":icon :icon--linux configValues.[2]"}}></span>{{configValues.[2]}}</p>
+          </div>
+        </div>
+
+      {{/view}}
+      {{job.configKeys}}
+    {{/each}}
+  </section>
 
   {{#unless view.required}}
     <div id="help-allowed_failures" class="popup">

app/views/jobs-item.coffee

@@ -2,7 +2,7 @@
 `import { colorForState } from 'travis/utils/helpers'`
 
 View = BasicView.extend
-    tagName: 'tr'
+    tagName: 'div'
     classNameBindings: ['color']
     repoBinding: 'context.repo'
     jobBinding: 'context'