Style recent builds on landing page

app/routes/home.coffee

@@ -4,10 +4,12 @@
 
 Route = BasicRoute.extend
   init: ->
+    store = @store
     repos = Ember.ArrayProxy.extend(
       isLoadedBinding: 'repos.isLoaded'
       repos: @store.filter 'repo', (repo) ->
-        repo.get('lastBuildId')
+        buildId = repo.get('lastBuildId')
+        store.hasRecordForId('build', buildId)
       sorted: Ember.computed.sort('repos', 'sortedReposKeys')
       content: limit('sorted', 'limit')
       sortedReposKeys: ['sortOrder:asc']

app/styles/app/landing.sass

@@ -145,6 +145,102 @@
       color: #828282
       margin-bottom: 20px
       list-style-type: none
+      position: relative
+      height: 120px
+      width: 400px
+      padding: 10px 0 0 60px
+      text-align: left
+
+      .tile-status
+        position: absolute
+        top: 0
+        left: 0
+        bottom: 0
+
+      .owner, .name
+        display: block
+
+      .owner
+        font-size: 14px
+        line-height: 1.8em
+      .name
+        font-size: 22px
+
+      .state
+        display: inline-block
+        margin-left: 4px
+
+      .commit, .number, .branch, .finished-at
+        position: absolute
+        display: block
+        background-repeat: no-repeat
+        background-position: left center
+        padding-left: 23px
+
+      .number
+        left: 60px
+        top: 65px
+        background-image: inline-image('svg/build-number-icon.svg')
+
+      .commit
+        left: 250px
+        top: 65px
+        background-image: inline-image('svg/commit-icon.svg')
+
+      .branch
+        left: 250px
+        top: 90px
+        background-image: inline-image('dashboard/branch.svg')
+        background-size: 19px 19px
+
+      .finished-at
+        left: 60px
+        top: 90px
+        background-image: inline-image('svg/finished-icon.svg')
+        background-size: 19px 19px
+
+      &.started .tile-status,
+      &.created .tile-status,
+      &.received .tile-status,
+      &.queued .tile-status
+        background-color: $start-color
+      &.failed .tile-status
+        background-color: $fail-color
+      &.errored .tile-status
+        background-color: $error-color
+      &.canceled .tile-status
+        background-color: $cancel-color
+      &.passed .tile-status
+        background-color: $pass-color
+      &.inactive .tile-status
+        background-color: $cancel-color
+
+      &.started .owner,
+      &.started .name,
+      &.created .owner,
+      &.created .name,
+      &.received .owner,
+      &.received .name,
+      &.queued .owner,
+      &.queued .name
+        color: $start-color
+      &.failed .owner,
+      &.failed .name
+        color: $fail-color
+      &.errored .owner,
+      &.errored .name
+        color: $error-color
+      &.canceled .owner,
+      &.canceled .name
+        color: $cancel-color
+      &.passed .owner,
+      &.passed .name
+        color: $pass-color
+      &.inactive .owner,
+      &.inactive .name
+        color: $cancel-color
+
+
 
   .free-for-oss
     text-align: center

app/templates/home.hbs

@@ -50,12 +50,21 @@
       <div class="medium-6 columns">
         <ul class="repos">
         {{#each repo in repos}}
-          <li {{bind-attr class=":repo repo.lastBuildState"}}>
-            {{repo.owner}}<br/>
-            {{repo.name}}<br/>
-            #{{repo.lastBuildNumber}}<br/>
-            {{landing-page-last-build-time repo.lastBuildFinishedAt}}<br/>
+          <li {{bind-attr class=":repo repo.lastBuild.state"}}>
+            <span class="tile-status">
+              <span {{bind-attr class=":icon :icon-status repo.lastBuild.state"}}></span>
+            </span>
+            <span class="owner">{{repo.owner}}</span>
+            <span class="name">{{repo.name}}</span>
+            {{#link-to "build" repo repo.lastBuild.id class="number"}}{{repo.lastBuild.number}} <span class="state">{{repo.lastBuild.state}}</span>{{/link-to}}
+            <span class="commit">{{format-sha repo.lastBuild.commit.sha}}</span>
+            <span class="branch">{{repo.lastBuild.branch}}</span>
+            <span class="finished-at">
+              {{landing-page-last-build-time repo.lastBuild.finishedAt}}
+            </span>
           </li>
+        {{else}}
+        <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
         {{/each}}
         </ul>
       </div>
@@ -227,4 +236,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>