rewrite markup for buildheader

fill in status icons

app/styles/app.scss

@@ -30,7 +30,7 @@
 @import "app/modules/navigation";
 @import "app/modules/row";
 @import "app/modules/loader";
-@import "app/modules/tiles";
+// @import "app/modules/tiles";
 @import "app/modules/buttons";
 @import "app/modules/icons";
 @import "app/modules/search";
@@ -43,21 +43,22 @@
 @import "app/modules/memberlist";
 @import "app/modules/forms";
 @import "app/modules/notice";
+@import "app/modules/build-header";
 
 @import "app/layout";
 @import "app/layouts/dashboard";
 @import "app/layouts/error";
 @import "app/layouts/footer";
-@import "app/layouts/buildheader";
+// @import "app/layouts/buildheader";
-@import "app/layouts/build-job";
+// @import "app/layouts/build-job";
 @import "app/layouts/sidebar";
-@import "app/layouts/build-job";
 @import "app/layouts/sidebar";
 @import "app/layouts/profile";
 @import "app/layouts/top";
 @import "app/layouts/owner";
 @import "app/layouts/branches";
 @import "app/layouts/broadcasts";
+@import "app/layouts/repo";
 
 @import "app/layouts/requests";
 @import "app/layouts/caches";

app/templates/build.hbs

@@ -1,73 +1,68 @@
 {{#if loading}}
   {{loading-indicator}}
 {{else}}
-  <section class="tile tile--pass row {{build.state}}">
-    <div class="tile-status">
-      <span class="icon icon-status {{build.state}}" title={{build.state}}></span>
-      <span class="request-kind {{build.eventType}} icon" title={{build.eventType}}></span>
-    </div>
 
-    <div class="tile-main medium-8 columns">
+  <section class="build-header {{build.state}}">
-      <h2 class="repo-main-commit">
+    <div class="build-commit">
-      {{#if build.pullRequest}}
+      <h2 class="build-title {{build.state}}">
-        <small class="repo-main-branch" title={{build.pullRequestTitle}}>Pull Request #{{build.pullRequestNumber}}</small>
+        {{status-icon status=build.state}}
-        {{build.pullRequestTitle}}
-      {{else}}
-        <small class="repo-main-branch" title={{build.commit.branch}}>{{build.commit.branch}}</small>
-        {{format-message build.commit.subject repo=build.repo}}
-      {{/if}}
-      </h2>
-      <div class="repo-main-description">
         {{#if build.pullRequest}}
-          <p>{{format-message build.commit.subject repo=build.repo}}</p>
+          <small class="commit-branch" title={{build.pullRequestTitle}}>Pull Request #{{build.pullRequestNumber}}</small>
+          {{build.pullRequestTitle}}
+        {{else}}
+          <small class="commit-branch" title={{build.commit.branch}}>{{build.commit.branch}}</small>
+          {{format-message build.commit.subject repo=build.repo}}
         {{/if}}
-        <pre class="body">{{format-message build.commit.body repo=build.repo pre=true}}</pre>
+      </h2>
-      </div>
+      <div class="commit-info">
-      <div class="tile-author">
+        <p class="commit-description">
-       {{#if commit.authorName}}
+          {{#if build.pullRequest}}
-         <img src={{urlAuthorGravatarImage}}>{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}
+            {{format-message build.commit.subject repo=build.repo}}<br>
-       {{/if}}
+          {{/if}}
-       {{#unless commit.authorIsCommitter}}
+          <span class="monospace">{{format-message build.commit.body repo=build.repo pre=true}}</span>
-         {{#if commit.committerName}}
+        </p>
-           <img src={{urlCommitterGravatarImage}}>{{commit.committerName}} committed
+        <ul class="list-icon">
-         {{/if}}
+          <li>
-       {{/unless}}
+            <a class="commit-commit" href={{urlGithubCommit}}>
+              Commit {{format-sha commit.sha}}</a>
+          </li>
+          <li>
+            {{#if build.pullRequest}}
+              <a class="commit-compare" title="See the commit on GitHub" href={{build.commit.compareUrl}}>#{{build.pullRequestNumber}}: {{build.pullRequestTitle}}</a>
+            {{else}}
+              {{#if build.commit.compareUrl}}
+                <a class="commit-compare" title="See the diff on GitHub" href={{build.commit.compareUrl}}>
+                Compare {{short-compare-shas build.commit.compareUrl}}</a>
+              {{/if}}
+            {{/if}}
+          </li>
+        </ul>
+        <p class="commit-author">
+          {{#if commit.authorName}}
+            <img src={{urlAuthorGravatarImage}}>{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}
+          {{/if}}
+          {{#unless commit.authorIsCommitter}}
+            {{#if commit.committerName}}
+              <img src={{urlCommitterGravatarImage}}>{{commit.committerName}} committed
+            {{/if}}
+          {{/unless}}
+        </p>
       </div>
     </div>
 
-    <div class="tile-additional medium-4 columns end">
+    <div class="build-info">
-      <ul class="repo-main-info">
+      <h3 class="build-status {{build.state}}">
-        <li class="repo-build-status">{{#link-to "build" repo build}}
+        {{#link-to "build" repo build}}
-          <span class="icon icon--hash"></span>
+          {{status-icon status=build.state}} #{{build.number}} {{humanize-state build.state}}{{/link-to}}
-          {{build.number}} {{humanize-state build.state}}{{/link-to}}
+      </h3>
-        </li>
+      <ul class="list-icon">
-        <li>
+        <li><span title="{{format-duration build.duration}}" class="commit-clock">{{#if build.isFinished}}ran{{else}}running{{/if}} for {{format-duration build.duration}}</span></li>
-          <a class="commit" href={{urlGithubCommit}}>
+        {{!-- <li><span>Elapsed time</span></li> --}}
-            <span class="icon icon--github"></span>
+        <li><span title="{{pretty-date build.finishedAt}}" class="commit-calendar">{{format-time build.finishedAt}}</span></li>
-            Commit {{format-sha commit.sha}}
-          </a>
-        </li>
-        <li>
-          {{#if build.pullRequest}}
-            <a class="compare" href={{build.commit.compareUrl}}><span class="icon icon--github"></span> #{{build.pullRequestNumber}}: {{build.pullRequestTitle}}</a>
-          {{else}}
-            {{#if build.commit.compareUrl}}
-              <a class="compare" href={{build.commit.compareUrl}}>
-              <span class="icon icon--github"></span>
-              Compare {{short-compare-shas build.commit.compareUrl}}</a>
-            {{/if}}
-          {{/if}}
-        </li>
-        <li title="{{format-duration build.duration}}">
-          <span class="icon icon--clock"></span>
-          {{#if build.isFinished}}ran{{else}}running{{/if}} for {{format-duration build.duration}}
-        </li>
-        <li title="{{pretty-date build.finishedAt}}">
-          <span class="icon icon--cal"></span>
-          {{format-time build.finishedAt}}
-        </li>
       </ul>
+    </div>
 
+    <div class="build-tools">
       {{repo-actions build=build repo=build.repo user=auth.currentUser}}
     </div>
   </section>