start implementing new build history

app/styles/app/layouts/buildheader.sass

@@ -12,7 +12,7 @@
 
 .repo-header
   header
-    margin: 1rem 0 2.3rem
+    margin: 1rem 0 3rem
     > *
       vertical-align: middle
 
@@ -93,17 +93,6 @@
     white-space: pre-wrap
     color: $grey2
 
-.repo-main-author
-  img
-    width: 22px
-    height: 22px
-    margin-right: .4em
-    vertical-align: top
-    border-radius: 50%
-  @media #{$medium-up}
-    position: absolute
-    bottom: 0
-
 .repo-main-info
   @include resetul
   padding-right: 2em
@@ -116,11 +105,6 @@
     &:hover
       text-decoration: underline
 
-  .icon
-    margin-right: .3em
-    height: 1.3em
-    vertical-align: middle
-
 .repo-main-tools
   position: absolute
   top: 0

app/styles/app/modules/tiles.sass

@@ -3,6 +3,9 @@
   position: relative
   padding: .8rem .8rem .8rem 3rem
   background-color: $cream-light
+  p
+    margin: 0
+    white-space: nowrap
 
   @media #{$medium-up}
     height: 145px
@@ -10,12 +13,42 @@
   .tile-main
     height: 100%
 
+
+.tile--small
+  margin-bottom: 1em
+  @media #{$medium-up}
+    height: 70px
+    overflow: hidden
+
 // todo refactor
 .tile-main
+  h2,
+  small
+    margin: 0
+    font-weight: 400
+    font-size: 15px
+    color: $grey3
+    line-height: 1
+  small
+    margin-right: .3em
+    font-weight: 600
+
   @media #{$xlarge-up}
     @include grid-column(9)
 
 .tile-additional
+  position: relative
+  p, li
+    padding: .1em 0
+    .icon
+      margin-right: .3em
+      height: 1.3em
+      vertical-align: middle
+  a
+    color: $grey1
+    &:hover
+      color: $grey1
+      text-decoration: underline
   @media #{$small-only}
     margin-top: 1em
   @media #{$xlarge-up}
@@ -35,13 +68,35 @@
     display: block
     width: 1.1em
     height: 1.2em
-    margin: .5em auto 1.1em
+    margin: .8em auto 1.1em
   .request-kind
     display: block
     width: 1.4em
     height: 1.1em
     margin: .5em auto 1.1em
 
+.tile-author
+  img
+    width: 22px
+    height: 22px
+    margin-right: .4em
+    vertical-align: top
+    border-radius: 50%
+  @media #{$medium-up}
+    position: absolute
+    bottom: 0
 
-.tile-additional
-  position: relative
+
+// repo header
+.tile--repo
+
+// build history etc
+.tile--build
+  .tile-main
+    @media #{$medium-up}
+      border-right: solid 1px $grey1
+    @media #{$xlarge-up}
+      @include grid-column(8)
+  .tile-additional
+    @media #{$xlarge-up}
+      @include grid-column(4)

app/templates/build.hbs

@@ -15,7 +15,7 @@
       <div class="repo-main-description">
         <pre class="body">{{format-message build.commit.body repoBinding=build.repo pre=true}}</pre>
       </div>
-      <div class="repo-main-author">
+      <div class="tile-author">
        {{#if commit.authorName}}
          <img {{bind-attr src="urlAuthorGravatarImage"}}>{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}
        {{/if}}

app/templates/builds.hbs

@@ -1,72 +1,62 @@
 {{#if content.isLoaded}}
-  <table id="builds" class="list">
-    <thead>
-      <tr>
-        <th>Build</th>
-        <th>Message</th>
-        <th>
-          Commit
-        </th>
-        <th class="committer">
-          Committer
-        </th>
-        {{#if isPullRequestsList}}
-          <th>
-            PR
-          </th>
-        {{/if}}
-        <th>Duration</th>
-        <th>Finished</th>
-      </tr>
-    </thead>
-
-    <tbody>
-      {{#each build in controller itemController="buildsItem"}}
-        <tr {{bind-attr class="build.color"}}>
-          <td class="number">
-            <span class="status"></span>
+{{!-- <table id="builds" class="list"> --}}
+  {{#each build in controller itemController="buildsItem"}}
+    <div {{bind-attr class="build.color :tile :tile--small :tile--build :row"}}>
+      <div class="tile-status">
+        <span class="icon icon-status passed"></span>
+        <span class="icon request-kind push"></span>
+      </div>
+      <div class="column tile-main medium-6">
+        <h2>
+          {{#if isPullRequestsList}}
+            <small>PR #{{build.pullRequestNumber}}</small>
+          {{else}}
+            <a {{bind-attr href="build.urlGithubPullRequest"}}>
+              <small>insert branch</small>
+            </a>
+          {{/if}}
+          {{{format-message build.commit.message short="true" repoBinding=build.repo}}}
+        </h2>
+        <p class="tile-author"><img src="//placehold.it/25x25" alt=""> {{build.commit.committerName}} commited</p>
+      </div>
+      <div class="column tile-additional medium-6 end">
+        <div class="column small-6">
+          <p class="build-id">
             {{#if build.id}}
               {{#link-to "build" build.repo build}}
-                {{build.number}}
+                <span class="icon icon-hash"></span>
+                {{build.number}} {{build.status}}
               {{/link-to}}
             {{/if}}
-          </td>
-          <td class="message">
-            {{{format-message build.commit.message short="true" repoBinding=build.repo}}}
-          </td>
-          <td class="commit">
+          </p>
+          <p class="">
             <a {{bind-attr href="build.urlGithubCommit"}}>
+              <span class="icon icon-github"></span>
               {{format-commit build.commit}}
             </a>
-          </td>
-          <td class="committer">
-            {{build.commit.committerName}}
-          </td>
-          {{#if isPullRequestsList}}
-            <td>
-              <a {{bind-attr href="build.urlGithubPullRequest"}}>
-                #{{build.pullRequestNumber}}
-              </a>
-            </td>
-          {{/if}}
-          <td class="duration" {{bind-attr title="build.duration"}}>
+          </p>
+        </div>
+        <div class="column small-6">
+          <p class="" {{bind-attr title="build.duration"}}>
+            <span class="icon icon-clock"></span>
             {{format-duration build.duration}}
-          </td>
-          <td class="finished_at timeago" {{bind-attr title="build.formattedFinishedAt"}}>
+          </p>
+          <p class="" {{bind-attr title="build.formattedFinishedAt"}}>
+            <span class="icon icon-cal"></span>
             {{format-time build.finishedAt}}
-          </td>
-        </tr>
-      {{/each}}
-    </tbody>
-  </table>
+          </p>
+        </div>
+      </div>
+    </div>
+  {{/each}}
   {{#if displayShowMoreButton}}
     <p>
       {{view 'show-more-button'}}
       {{#if isLoading}}
-        <span class="loading"></span>
+        <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
       {{/if}}
     </p>
   {{/if}}
 {{else}}
-  <div class="loading"><span>Loading</span></div>
+  <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
 {{/if}}