From a6d6e40f9c6641840caecc7839cf81895c1a729e Mon Sep 17 00:00:00 2001
From: Mathias Meyer <meyer@paperplanes.de>
Date: Thu, 8 May 2014 11:08:38 +0200
Subject: [PATCH] Initial version of a new build header.

Based on @Juice10's original designs at travis-ci/travis-assets#24.
---
 assets/scripts/app/templates/builds/show.hbs | 28 +++++++
 assets/styles/main/summary.sass              | 78 ++++++++++++++++++++
 2 files changed, 106 insertions(+)

diff --git a/assets/scripts/app/templates/builds/show.hbs b/assets/scripts/app/templates/builds/show.hbs
index 325cfef2..d17173a9 100644
--- a/assets/scripts/app/templates/builds/show.hbs
+++ b/assets/scripts/app/templates/builds/show.hbs
@@ -1,6 +1,34 @@
 {{#if loading}}
   <span>Loading</span>
 {{else}}
+  <div id="new-summary">
+    <div class="right">
+      <div class="build-status">
+        #{{build.number}} {{build.state}}
+      </div>
+
+      <div class="runtime">
+         ran for {{formatDuration build.duration}} 
+      </div>
+
+      <div class="finished">
+        {{formatTime build.finishedAt}}
+      </div>
+    </div>
+ 
+    <div class="branch" {{bind-attr title="build.commit.branch"}}>
+      {{build.commit.branch}}
+    </div>
+    -
+    <div class="subject">
+      {{formatMessage build.commit.subject repoBinding=build.repo}}
+    </div>
+
+    <pre class="body">
+{{formatMessage build.commit.body repoBinding=build.repo pre=true}}
+    </pre>
+  </div>
+
   <dl id="summary">
     <div class="left">
       <dt>Build</dt>
diff --git a/assets/styles/main/summary.sass b/assets/styles/main/summary.sass
index 783d74a5..93b6bfdc 100644
--- a/assets/styles/main/summary.sass
+++ b/assets/styles/main/summary.sass
@@ -1,5 +1,83 @@
 @import "_mixins/all"
 
+.green .build-status
+  background-color: #0d8136
+
+.yellow .build-status
+  background-color: #e7d700
+
+.red .build-status
+  background-color: #e10000
+
+.gray .build-status
+  background-color: #a8a8a9
+
+#new-summary
+  @include clearfix
+  @include border-radius(5px)
+  width: 100%
+  background-color: #fafafa
+  min-height: 30px
+  padding: 5px 15px
+  margin-bottom: 20px
+
+  .branch
+    font-weight: bold
+    font-size: 16px
+    max-width: 200px
+    display: inline-block
+    margin-top: 10px
+    overflow: hide
+
+  .subject
+    display: inline
+    font-size: 15px
+    overflow: hide
+    margin-top: 10px
+
+  .body
+    min-width: 500px
+    display: block
+    min-height: 30px
+    font-size: 12px
+    font-family: Monaco, 'Liberation Mono', Courier, monospace
+    margin-bottom: 0px
+  
+  .build-status
+    @include border-radius(4px)
+    float: right
+    min-height: 30px
+    min-width: 90px
+    color: white
+    padding-top: 5px
+    padding-left: 10px
+    padding-right: 10px
+    font-size: 16px
+    text-align: center
+
+  .runtime
+    float: right
+    font-size: 11px
+    display: block
+    width: 100%
+    text-align: right
+    line-height: 13px
+    margin-top: 5px
+
+  .finished
+    float: right
+    font-size: 11px
+    width: 100%
+    text-align: right
+    line-height: 20px
+
+  .right
+    margin-top: 10px
+    float: right
+    width: 150px
+    font-size: 11px
+    margin-right: 30px
+
 #summary
   margin: 0 0 0 12px
   @include clearfix