From ac8765f0f126afec8132de4cbbeeb739f5005399 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Thu, 17 Sep 2015 14:49:35 +0200
Subject: [PATCH] moar alignment fun

---
 app/styles/app/layouts/branches.sass    |  8 ++++++--
 app/styles/app/modules/tiles.sass       | 12 ++++++------
 app/templates/branches.hbs              |  2 +-
 app/templates/components/branch-row.hbs | 18 ++++++++++++------
 app/templates/components/build-tile.hbs |  2 +-
 5 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass
index aeb10414..b8809ff4 100644
--- a/app/styles/app/layouts/branches.sass
+++ b/app/styles/app/layouts/branches.sass
@@ -52,7 +52,7 @@
 
   @media #{$medium-up}
     & > div:first-of-type
-      width: 25%
+      width: 26%
       position: relative
       &:after
         content: ""
@@ -222,7 +222,7 @@
     bottom: -4px
   @media #{$medium-up}
     top: -2.3em
-    width: 4em
+    width: 4.1em
     padding: .1em .1em
     white-space: nowrap
     font-size: 14px;
@@ -235,6 +235,10 @@
   path
     fill: $teal-dark
 
+.label-align
+  vertical-align: middle
+  line-height: 1.4
+
 // @todo refactor to status-icon module
 .status-icon
   .is-rotating
diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass
index c73b6a79..47bd5af9 100644
--- a/app/styles/app/modules/tiles.sass
+++ b/app/styles/app/modules/tiles.sass
@@ -3,7 +3,7 @@
     svg g > *
       fill: $color
 
-@mixin colorTiles($color, $status)
+@mixin colorTiles($color, $status, $extra-bg: $color)
   &.#{$status}
     .tile-status
       background-color: $color
@@ -34,11 +34,11 @@
     @include colorTiles($red-dark, 'failed')
     @include colorTiles($red-dark, 'errored')
     @include colorTiles($grey-medium, 'canceled')
-    @include colorTiles(#bfb502, 'started')
-    @include colorTiles(#bfb502, 'queued')
-    @include colorTiles(#bfb502, 'booting')
-    @include colorTiles(#bfb502, 'received')
-    @include colorTiles(#bfb502, 'created')
+    @include colorTiles(#bfb502, 'started', #e5da3f)
+    @include colorTiles(#bfb502, 'queued', #e5da3f)
+    @include colorTiles(#bfb502, 'booting', #e5da3f)
+    @include colorTiles(#bfb502, 'received', #e5da3f)
+    @include colorTiles(#bfb502, 'created', #e5da3f)
 
     .status-icon .is-rotating
       width: 17px;
diff --git a/app/templates/branches.hbs b/app/templates/branches.hbs
index 650a6cc4..d423b0d8 100644
--- a/app/templates/branches.hbs
+++ b/app/templates/branches.hbs
@@ -22,7 +22,7 @@
       <h2 class="small-title">Inactive Branches</h2>
       <ul class="blank-list">
         {{#each branch in inactiveBranches}}
-          {{branch-row build=branch}}
+          {{branch-row build=branch inactive=true}}
         {{/each}}
       </ul>
     </section>
diff --git a/app/templates/components/branch-row.hbs b/app/templates/components/branch-row.hbs
index 3ba2ffa4..2a90f88d 100644
--- a/app/templates/components/branch-row.hbs
+++ b/app/templates/components/branch-row.hbs
@@ -19,6 +19,7 @@
           l0.5,0.1V4c-0.1,0-0.4-0.1-0.9-0.2c0,0-0.1,0-0.1,0L6.4,3.5V4.7z"/>
       </g>
     </svg></span>
+    <span class="label-align">
     {{#if build.last_build}}
       {{#if getLast5Builds.isLoading}}
         {{loading-indicator inline=true}}
@@ -27,7 +28,7 @@
       {{/if}}
     {{else}}
       0 builds
-    {{/if}}
+    {{/if}}</span>
     </div>
   </div>
 </div>
@@ -37,7 +38,7 @@
       {{#if build.last_build}}
         {{#link-to "build" build.repository.slug build.last_build.id}}
           {{request-icon build=build}}
-          #{{build.last_build.number}} {{build.last_build.state}}
+          <span class="label-align">#{{build.last_build.number}} {{build.last_build.state}}</span>
         {{/link-to}}
       {{else}}
         {{request-icon build=build}} -
@@ -62,11 +63,12 @@
           </g>
         </svg>
       </span>
+      <span class="label-align">
       {{#if build.last_build}}
         {{format-time build.last_build.finished_at}}
       {{else}}
         -
-      {{/if}}
+      {{/if}}</span>
       </div>
   </div>
 </div>
@@ -100,24 +102,27 @@
           </g>
         </svg>
       </span>
+      <span class="label-align">
       {{#if build.last_build}}
         {{format-sha build.last_build.commit.sha}}
       {{else}}
         -
-      {{/if}}
+      {{/if}}</span>
       </a></div>
   </div>
   <div class="branch-commiter">
     <div class="row-item">
       {{#if build.last_build}}
-        <img src="{{build.last_build.commit.committer.avatar_url}}" alt="avatar" class="avatar">{{build.last_build.commit.committer.name}}
+        <img src="{{build.last_build.commit.committer.avatar_url}}" alt="avatar" class="avatar">
+        <span class="label-align">{{build.last_build.commit.committer.name}}</span>
       {{else}}
-        <div class="avatar"></div> no commits yet
+        <div class="avatar"></div><span class="label-align">no commits yet</span>
       {{/if}}
     </div>
   </div>
 </div>
 <div class="one-line is-relative">
+{{#unless inactive}}
   {{#if build.last_build}}
     <div class="branch-nav dropup-trigger">
       <div class="row-item">
@@ -185,6 +190,7 @@
       </ul>
     </div>
   {{/if}}
+{{/unless}}
 </div>
 <div class="one-line is-relative">
   <ul class="build-tiles">
diff --git a/app/templates/components/build-tile.hbs b/app/templates/components/build-tile.hbs
index 8ab70419..7216bd17 100644
--- a/app/templates/components/build-tile.hbs
+++ b/app/templates/components/build-tile.hbs
@@ -4,7 +4,7 @@
 
     {{build.last_build.state}}
     <div class="dropup--status">
-      {{request-icon build=build}} #{{build.number}}
+      {{request-icon build=build}} <span class="label-align">#{{build.number}}</span>
     </div>
   {{/link-to}}
 {{/if}}
\ No newline at end of file