Merge branch 'sf-auth-iframe' of github.com:travis-ci/travis-ember into sf-auth-iframe

Conflicts:
	public/javascripts/application.js

assets/javascripts/app/templates/builds/list.hbs

@@ -15,6 +15,7 @@
         {{#view Travis.BuildsItemView contextBinding="build"}}
           <tr {{bindAttr class="view.color"}}>
             <td class="number">
+              <span class="status"></span>
               <a {{bindAttr href="view.urlBuild"}} {{action route}}>
                 {{number}}
               </a>

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

@@ -5,8 +5,8 @@
         <div class="left">
           <dt>{{t builds.name}}</dt>
           <dd class="number">
+            <span class="status"></span>
             <a {{bindAttr href="urlBuild"}} {{action route}}>
-              <span class="status"></span>
               {{build.number}}
             </a>
           </dd>

assets/javascripts/app/templates/jobs/list.hbs

@@ -22,8 +22,8 @@
       {{#each job in view.jobs}}
         {{#view Travis.JobsItemView contextBinding="job"}}
           <td class="number">
+            <span class="status"></span>
             <a {{bindAttr href="view.urlJob"}} {{action route}}>
-              <span class="status"></span>
               {{number}}
             </a>
           </td>

assets/javascripts/app/templates/repos/list.hbs

@@ -10,10 +10,10 @@
   {{#collection Travis.RepositoriesListView contentBinding="controller"}}
     {{#with view.repository}}
       <div class="heading">
-        <a {{bindAttr href="view.urlRepository"}} {{action route}} class="slug">
+        <div class="slug-and-status">
           <span class="status"></span>
-          {{slug}}
-        </a>
+          <a {{bindAttr href="view.urlRepository"}} {{action route}} class="slug">{{slug}}</a>
+        </div>
         <a {{bindAttr href="view.urlLastBuild"}} {{action route}} class="last_build">{{lastBuildNumber}}</a>
       </div>
 

assets/javascripts/app/templates/workers/list.hbs

@@ -14,7 +14,7 @@
           {{#each worker in group}}
             {{#view Travis.WorkersItemView workerBinding="worker"}}
               <li class="worker">
-                <div class="icon"></div>
+                <div class="status"></div>
                 {{#if worker.isWorking}}
                   <a {{bindAttr href="worker.urlJob"}} {{bindAttr title="worker.lastSeenAt"}} {{action route}}>
                     {{view.display}}

assets/stylesheets/_mixins/colors.sass

@@ -91,6 +91,10 @@ $color-bg-status-failed: $red-lighter
 $color-text-status-pending: $color-link
 $color-bg-status-pending: $yellow-lighter
 
+$color-bg-status-waiting: $green-lighter
+$color-bg-status-errored: $red-lighter
+$color-bg-status-stopped: $gray-medium-1
+
 $color-bg-list-info: $yellow-light-2
 $color-text-list-info: $slate-yellow-1
 $color-shadow-list-info: $slate-yellow-2

assets/stylesheets/layout.sass

@@ -2,6 +2,7 @@
 
 body > div
   display: table
+  table-layout: fixed
   width: 100%
   height: 100%
   overflow: hidden
@@ -11,18 +12,21 @@ body > div
   position: relative
 
 #left
-  width: 30%
+  width: 350px
+  min-width: 350px
   padding-right: 10px
   background: inline-image('ui/background-left.png') repeat-y right top
 
 #main
+  width: 100%
+  min-width: 650px
   padding: 20px 48px 40px 32px
-  width: 70%
   &.maximized
     padding: 60px 100px 30px 440px
 
 #right
   width: 205px
+  min-width: 205px
   padding: 20px 20px 20px 10px
   background-color: $color-bg-sidebar
   border-bottom: 1px solid $color-border-light
@@ -37,8 +41,89 @@ body > div
   overflow: hidden
   background: inline-image('icons/clock.png') no-repeat 1px 2px
 
+@media screen
+  #left
+    min-width: 300px
+  #main
+    padding:
+      left: 22px
+      right: 38px
+
+@media screen and (min-width: 1340px)
+  #left
+    min-width: 305px
+
+@media screen and (min-width: 1350px)
+  #left
+    min-width: 310px
+
+@media screen and (min-width: 1360px)
+  #left
+    min-width: 315px
+
+@media screen and (min-width: 1370px)
+  #left
+    min-width: 320px
+
+@media screen and (min-width: 1380px)
+  #left
+    min-width: 325px
+
+@media screen and (min-width: 1390px)
+  #left
+    min-width: 330px
+
+@media screen and (min-width: 1400px)
+  #left
+    min-width: 345px
+
+@media screen and (min-width: 1410px)
+  #left
+    min-width: 350px
+
+@media screen and (min-width: 1420px)
+  #left
+    min-width: 355px
+
+@media screen and (min-width: 1430px)
+  #left
+    min-width: 360px
+
 @media screen and (min-width: 1440px)
   .duration_label
     display: inline
     background: none
+  #left
+    min-width: 365px
+  #main
+    padding:
+      left: 32px
+      right: 48px
 
+@media screen and (min-width: 1450px)
+  #left
+    min-width: 370px
+
+@media screen and (min-width: 1455px)
+  #left
+    min-width: 375px
+
+@media screen and (min-width: 1460px)
+  #left
+    min-width: 380px
+
+@media screen and (min-width: 1465px)
+  #left
+    min-width: 385px
+
+@media screen and (min-width: 1470px)
+  #left
+    min-width: 390px
+
+@media screen and (min-width: 1475px)
+  #left
+    min-width: 395px
+
+@media screen and (min-width: 1480px)
+  #left
+    min-width: 400px

assets/stylesheets/left/list.sass

@@ -25,12 +25,12 @@
       display: table
       width: 100%
 
-    .slug
+    .slug-and-status
       display: table-cell
       white-space: nowrap
       overflow: hidden
       text-overflow: ellipsis
-      max-width: 150px
+      max-width: 190px
 
     .last_build
       display: table-cell
@@ -38,7 +38,11 @@
       font-size: $font-size-big
 
     .summary
+      width: 100%
       margin: 5px -5px 0 17px
+      white-space: nowrap
+      overflow: hidden
+      text-overflow: ellipsis
       color: $color-text-light
       font-size: $font-size-small
 

assets/stylesheets/right/lists.sass

@@ -51,22 +51,10 @@
     &.open ul
       display: block
 
-    .icon
-      clear: left
-      float: left
+    .status
+      display: inline-block
       width: 8px
       height: 8px
-      margin: 6px 6px 0 0
-      -moz-border-radius: 8px
-      -webkit-border-radius: 8px
-      background: inline-image('icons/status.square.green.png')
-
-    &.waiting .icon
-      background: inline-image('icons/status.square.green.png')
-
-    &.errored .icon
-      background: inline-image('icons/status.square.red.png')
-
-    &.stopped .icon
-      background: inline-image('icons/status.square.gray.png')
+      margin-right: 3px
+      @include border-radius(4px)
 

assets/stylesheets/right/slider.sass

@@ -29,6 +29,7 @@
 
   #right
     width: 0
+    min-width: 0
     padding: 0
     *:not(#slider):not(.icon):not(.ember-view)
       display: none

assets/stylesheets/status.sass

@@ -7,23 +7,26 @@
   margin-right: 2px
   @include border-radius(5px)
 
-#repositories a,
-.number a
-  color: $color-text-status-pending
+#repositories,
+.number
   .status
     background-color: $color-bg-status-pending
+  a
+    color: $color-text-status-pending
 
-#repositories .green a,
-.green .number a
-  color: $color-text-status-passed
+#repositories .green,
+.green .number
   .status
     background-color: $color-bg-status-passed
+  a
+    color: $color-text-status-passed
 
-#repositories .red a,
-.red .number a
-  color: $color-text-status-failed
+#repositories .red,
+.red .number
   .status
     background-color: $color-bg-status-failed
+  a
+    color: $color-text-status-failed
 
 table.list
   tbody
@@ -49,4 +52,17 @@ table.list
     .number a
       color: $color-text-status-failed
 
+#workers
+  .status
+    background-color: $color-bg-status-waiting
+
+  .waiting .status
+    background-color: $color-bg-status-waiting
+
+  .errored .status
+    background-color: $color-bg-status-errored
+
+  .stopped .status
+    background-color: $color-bg-status-stopped
+