Shorter commits for compare URLs, optimize footer.

The flow when reducing the browser width isn't fully right yet,
but we're getting there.

assets/scripts/app/helpers/handlebars.coffee

@@ -331,6 +331,10 @@ Ember.Handlebars.helper 'formatMessage', (message, options) ->
 Ember.registerBoundHelper 'formatConfig', (config, options) ->
   safe Travis.Helpers.formatConfig(config)
 
+Ember.registerBoundHelper 'shortCompareShas', (url, options) ->
+  shas = Travis.Helpers.pathFrom(url).split('...')
+  "#{shas[0][0..6]}..#{shas[1][0..6]}"
+
 Ember.registerBoundHelper 'formatLog', (log, options) ->
   parentView =  @get 'parentView'
   repo = parentView.get(options.repo)

assets/scripts/app/templates/builds/show.hbs

@@ -39,11 +39,12 @@
       </div>
 
       <div class="commit">
-        <a class="github" {{bind-attr href="controller.urlGithubCommit"}}>Commit {{formatSha commit.sha}}</a><img src="/images/icons/github.png" height="15"/>
+        <div><a class="github" {{bind-attr href="controller.urlGithubCommit"}}>Commit {{formatSha commit.sha}}</a></div><img src="/images/icons/github.png" height="15"/>
         {{#if build.pullRequest}}
-          <a {{bind-attr href="build.commit.compareUrl"}} >#{{build.pullRequestNumber}}: {{build.pullRequestTitle}}</a> {{else}}
+          <div><a {{bind-attr href="build.commit.compareUrl"}} >#{{build.pullRequestNumber}}: {{build.pullRequestTitle}}</a></div>
+        {{else}}
           {{#if build.commit.compareUrl}}
-            <a {{bind-attr href="build.commit.compareUrl"}}>Compare {{pathFrom build.commit.compareUrl}}</a>
+            <div><a {{bind-attr href="build.commit.compareUrl"}}>Compare {{shortCompareShas build.commit.compareUrl}}</a></div>
           {{/if}}
         {{/if}}
         <img src="/images/icons/github.png" height="15"/>

assets/styles/main/summary.sass

@@ -19,6 +19,7 @@
   min-height: 30px
   padding: 5px 15px
   margin-bottom: 20px
+  padding-bottom: 10px
 
   .branch
     font-weight: bold
@@ -89,6 +90,13 @@
       margin-top: 0px
       float: right
 
+      div
+        display: inline
+        clear: none
+        max-width: 200px
+        overflow: hidden
+        white-space: nowrap
+
     img
       margin-left: 5px
       margin-right: 5px
@@ -101,8 +109,6 @@
         height: 15px
         width: 15px
 
-    .github
-
 #summary
   margin: 0 0 0 12px
   @include clearfix