style requests

some spacing tweaks

implement Justine's feedback

app/components/requests-item.coffee

@@ -2,7 +2,7 @@
 `import config from 'travis/config/environment'`
 
 RequestsItemComponent = Ember.Component.extend
-  classNames: ['tile', 'tile--jobs', 'row']
+  classNames: ['request-item']
   classNameBindings: ['requestClass']
   tagName: 'li'
 

app/components/status-icon.coffee

@@ -7,11 +7,11 @@ StatusIconComponent = Ember.Component.extend
   classNameBindings: ['status']
 
   hasPassed: (->
-    @get('status') == 'passed'
+    @get('status') == 'passed' || @get('status') == 'accepted'
   ).property('status')
 
   hasFailed: (->
-    @get('status') == 'failed'
+    @get('status') == 'failed' || @get('status') == 'rejected'
   ).property('status')
 
   hasErrored: (->

app/styles/app/layouts/pull-requests.sass

@@ -18,6 +18,7 @@
 
     .row-committer
       padding-left: 1.6em
+      margin-bottom: 0
 
     .row-message
       margin-bottom: .5em

app/styles/app/layouts/repo.sass

@@ -4,9 +4,11 @@
   font-weight: $font-weight-normal
   a
     color: #808080
+    border-bottom: 2px solid transparent
+    transition: border-color 100ms ease
     &:hover,
     &:active
-      text-decoration: underline
+      border-color: #808080
 
 .repo-header
   header
@@ -48,7 +50,6 @@ $dropdown-button-margin: -9px
   display: block
   height: $dropdown-button-height
   padding: 0 0.7em 0 2.3em
-  margin-top: $dropdown-button-margin
   background:
     color: white
     repeat: no-repeat
@@ -79,6 +80,8 @@ $dropdown-button-margin: -9px
     @extend %icon-line-cog-teal
     &:after
       @extend %icon-line-dropdown-teal
+  @media #{$medium-up}
+    margin-top: $dropdown-button-margin
 
 .settings-dropdown
   display: none
@@ -86,7 +89,7 @@ $dropdown-button-margin: -9px
   top: $dropdown-button-height + ($dropdown-button-margin * .8)
   width: 100%
   padding: 0
-  margin: -1px 0 0
+  margin: 6px 0 0
   list-style: none
   z-index: 60
   background-color: white
@@ -99,6 +102,8 @@ $dropdown-button-margin: -9px
     &:hover
       color: white
       background-color: $teal
+  @media #{$medium-up}
+    margin-top: -3px
 
 .settings-menu
   position: relative

app/styles/app/layouts/requests.sass

@@ -1,58 +1,62 @@
-@mixin colorRequests($color-bg)
+=requestFadeOut($status, $color)
-  &:hover
+  @media #{$medium-up}
-    background-color: $color-bg
+    &.#{$status}:hover
-    .requests-commit,
+      .fade-out
-    .requests-branch,
-    .requests-message,
-    .requests-time
         &:after
-        @include fadeOut(right, -90deg, $color-bg, 30%)
+          @include fadeOut(right, -90deg, $color)
-
 
 .requests
-  @include resetul
+  padding: 0
+  margin: 0
+  list-style: none
 
-  .accepted:hover
+.request-item
-    @include colorRequests(#e5efe4)
+  border: 1px solid $cream-dark
-  .rejected:hover
+  margin-bottom: 5px
-    @include colorRequests(#fbebe6)
+  font-size: 15px
+  padding-left: 1em
+  @include colorJobs($green, 'accepted', 6px, rgba($green, .1))
+  @include colorJobs($red, 'rejected', 6px, rgba($red, .1))
 
-  margin-top: 2.5rem
+  @include requestFadeOut('accepted',#ECF6EF)
-  color: #969496
+  @include requestFadeOut('rejected', #FBECEB)
-  a:hover
+
+  strong
+    font-weight: $font-weight-bold
+    margin-right: .5em
+
+  .status-icon
+    width: 1.3em
+    height: 1.3em
+    vertical-align: middle
+
+  a:hover,
+  a:active
     text-decoration: underline
 
-  .requests-commit,
-  .requests-branch,
-  .requests-message,
-  .requests-time
-    position: relative
-    &:after
-      content: ""
-      @include fadeOut(right, -90deg, $cream-light, 30%)
-
-  .requests-time
   @media #{$medium-up}
-      padding-left: 2em
+    display: flex
-      border-left: 1px solid $cream-dark
+    justify-content: space-between
+    flex-flow: row wrap
+    align-items: center
+    padding: .3em 0
+    white-space: nowrap
+    .row-item
+      overflow: hidden
 
-  .tile--jobs
+    .row-item:first-of-type
-    padding-left: 2.5em
+      flex: 0 0 3em
+      padding-left: .7em
+      border-right: 1px solid $cream-dark
+    .row-item:nth-of-type(2)
+      flex: 1 0 15%
+      padding-left: 1em
+    .row-item:nth-of-type(3)
+      flex: 0 0 15%
+    .row-item:nth-of-type(4)
+      flex: 1 0 30%
+    .row-item:nth-of-type(5)
+      flex: 0 0 8%
+    .row-item:last-of-type
+      flex: 0 0 20%
 
-  .icon.push
-    width: 1.2em
-    height: .8em
-  .icon.pull_request
-    height: 1.5em
-
-  @media #{$medium-up}
-    .requests-time
-      width: grid-calc(4, 24)
-    .requests-branch
-      width: grid-calc(4, 24)
-    .requests-commit
-      width: grid-calc(9, 24)
-    .requests-build
-      width: grid-calc(2, 24)
-    .requests-message
-      width: grid-calc(5, 24)

app/styles/app/misc.sass

@@ -29,5 +29,5 @@
 
 .monospace
   font-family: Monaco, monospace
-  font-size: 14px
+  font-size: 13px
   line-height: 1

app/styles/app/modules/buttons.sass

@@ -176,7 +176,7 @@ $button-border-color: #d4d4d4
 %log-button
   display: inline-block
   height: 28px
-  padding: 0 1.1em 0 2.3em
+  padding: 0 0.8em 0 2.3em
   border: 1px solid #f1f1f1
   color: #f1f1f1
   border-radius: 2px

app/styles/app/modules/icons.sass

@@ -158,13 +158,13 @@
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560"><path fill="%23A7AEAE" d="M418.4 490c-8.4 0-14-5.6-14-14v-28c-11.2 0-28 2.8-39.2-2.8-11.2-2.8-36.4-14-50.4-47.6-2.8-5.6-8.4-11.2-11.2-16.8-2.8-2.8-5.6-8.4-8.4-11.2C284 358.4 284 336 292.4 322c8.4-11.2 19.6-14 33.6-8.4 19.6 5.6 30.8 25.2 39.2 36.4 2.8 2.8 2.8 5.6 5.6 5.6 11.2 11.2 28 8.4 39.2 2.8l8.4-8.4h-5.6c-19.6-2.8-36.4-11.2-53.2-19.6-5.6-5.6-16.8-11.2-22.4-19.6-8.4-8.4-14-19.6-19.6-33.6-2.8-14-5.6-25.2-8.4-39.2 0-11.2-2.8-25.2 0-39.2C312 182 317.6 168 326 154c2.8-2.8 2.8-5.6 5.6-8.4v-2.8c-2.8-8.4-2.8-16.8-2.8-28s2.8-22.4 8.4-33.6C340 72.8 345.6 70 354 70s22.4 2.8 33.6 8.4C398.8 84 410 89.6 421.2 98c14-2.8 28-5.6 44.8-5.6h56c14 0 28 2.8 39.2 5.6l5.6-2.8c5.6-2.8 14-8.4 19.6-11.2 11.2-5.6 19.6-8.4 30.8-8.4h8.4c8.4 0 14 2.8 16.8 11.2 5.6 16.8 11.2 33.6 5.6 56v2.8c0 2.8 0 5.6-2.8 8.4 14 16.8 19.6 36.4 22.4 58.8V238c0 14-2.8 28-5.6 39.2-5.6 14-11.2 28-19.6 39.2-8.4 11.2-19.6 16.8-28 22.4-16.8 8.4-33.6 16.8-50.4 19.6 5.6 11.2 8.4 22.4 8.4 36.4v89.6c0 8.4-5.6 14-14 14l-140-8.4zM536 350c-2.8-2.8-2.8-8.4-2.8-14 2.8-5.6 5.6-8.4 11.2-8.4h8.4c19.6-2.8 36.4-8.4 53.2-19.6 8.4-5.6 16.8-11.2 19.6-16.8 5.6-8.4 11.2-16.8 14-28 5.6-11.2 5.6-22.4 8.4-36.4v-19.6c-2.8-19.6-8.4-33.6-19.6-47.6-5.602-5.6-5.602-11.2-2.802-16.8 0-2.8 2.8-5.6 2.8-8.4v-2.8c2.8-11.2 0-22.4-2.8-33.6h-2.8c-5.6 0-14 2.8-19.6 5.6-5.6 2.8-11.2 5.6-19.6 11.2l-11.2 5.6c-2.8 2.8-8.4 2.8-11.2 2.8-14-2.8-25.2-5.6-39.2-5.6h-53.2c-16.8-2.8-30.8 0-44.8 5.6-2.8 0-8.4 0-14-2.8-11.2-8.4-22.4-14-33.6-19.6-5.6-2.8-11.2-2.8-16.8-2.8-2.8 5.6-2.8 14-2.8 19.6 0 8.4 0 14 2.8 19.6 0 2.8 0 2.8 2.8 5.6 2.8 5.6 0 11.2-2.8 14l-5.6 5.6c0 2.8-2.8 5.6-5.6 8.4-5.6 8.4-11.2 19.6-14 33.6-2.8 11.2 0 22.4 0 30.8 0 11.2 2.8 22.4 5.6 33.6 2.8 11.2 8.4 19.6 14 25.2 8.4 5.6 14 11.2 19.6 14 14 8.4 28 14 44.8 16.8 5.6 0 19.6 2.8 19.6 2.8 2.8 0 8.4 2.8 8.4 5.6 2.8 2.8 2.8 5.6 2.8 11.2 0 2.8-8.4 28-25.2 39.2-19.6 11.2-50.4 14-70-8.4l-8.4-8.4c-5.6-8.398-16.8-22.398-28-28h-2.8l-2.8 2.8c0 5.602 0 11.2 2.8 16.802 2.8 2.8 5.6 5.6 8.4 11.2 5.6 8.4 11.2 14 14 22.4 11.2 22.4 28 30.8 33.6 33.6 14 0 36.4-2.8 47.6-2.8-2.8 0-2.8 0 0 0s5.6 0 8.4 2.8c2.8 2.8 5.6 5.6 5.6 8.4v28H550v-75.6c0-11.2-2.8-19.602-5.6-28-2.8-5.602-2.8-8.402-5.6-8.402"/></svg>')
 .icon-github
   display: inline-block
-  width: 1em
+  width: 1.1em
   height: 1.1em
   margin-right: 0.3em
   vertical-align: middle
   background:
     repeat: no-repeat
-    size: auto 23px
+    size: auto 21px
     position: -9px -3px
   @extend %icon-github
 

app/templates/components/dashboard-row.hbs

@@ -21,32 +21,7 @@
   <div class="row-commit">
     <div class="row-item">
       <a href="{{urlGithubCommit}}" title="commit on GitHub">
-        <span class="icon">
+        <span class="icon-github"></span>
-        <svg x="0px" y="0px" viewBox="2 0 20 20" xml:space="preserve">
-          <g id="Commit">
-            <path fill="#A7AEAE" d="M7.8,17.5c-0.3,0-0.5-0.2-0.5-0.5l0-1c-0.4,0-1,0.1-1.4-0.1c-0.4-0.1-1.3-0.5-1.8-1.7
-              c-0.1-0.2-0.3-0.4-0.4-0.6c-0.1-0.1-0.2-0.3-0.3-0.4C3,12.8,3,12,3.3,11.5c0.3-0.4,0.7-0.5,1.2-0.3c0.7,0.2,1.1,0.9,1.4,1.3
-              c0.1,0.1,0.1,0.2,0.2,0.2c0.4,0.4,1,0.3,1.4,0.1c0.1-0.1,0.2-0.2,0.3-0.3c-0.1,0-0.1,0-0.2,0c-0.7-0.1-1.3-0.4-1.9-0.7
-              c-0.2-0.2-0.6-0.4-0.8-0.7c-0.3-0.3-0.5-0.7-0.7-1.2C4.1,9.4,4,9,3.9,8.5c0-0.4-0.1-0.9,0-1.4C4,6.5,4.2,6,4.5,5.5
-              c0.1-0.1,0.1-0.2,0.2-0.3c0,0,0-0.1,0-0.1c-0.1-0.3-0.1-0.6-0.1-1c0-0.4,0.1-0.8,0.3-1.2C5,2.6,5.2,2.5,5.5,2.5
-              c0.3,0,0.8,0.1,1.2,0.3c0.4,0.2,0.8,0.4,1.2,0.7c0.5-0.1,1-0.2,1.6-0.2c0.4,0,1.6,0,2,0c0.5,0,1,0.1,1.4,0.2l0.2-0.1
-              c0.2-0.1,0.5-0.3,0.7-0.4c0.4-0.2,0.7-0.3,1.1-0.3c0.1,0,0.2,0,0.3,0c0.3,0,0.5,0.1,0.6,0.4c0.2,0.6,0.4,1.2,0.2,2l0,0.1
-              c0,0.1,0,0.2-0.1,0.3c0.5,0.6,0.7,1.3,0.8,2.1c0,0.3,0,0.6,0,0.9c0,0.5-0.1,1-0.2,1.4c-0.2,0.5-0.4,1-0.7,1.4
-              c-0.3,0.4-0.7,0.6-1,0.8c-0.6,0.3-1.2,0.6-1.8,0.7c0.2,0.4,0.3,0.8,0.3,1.3c0,0,0,0,0,0c0,0.8,0,3.2,0,3.2c0,0.3-0.2,0.5-0.5,0.5
-              L7.8,17.5L7.8,17.5z M7.8,15.1c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.2,0.2,0.2,0.3l0,1l4.2,0c0-0.7,0-2.1,0-2.7c0-0.4-0.1-0.7-0.2-1
-              c-0.1-0.2-0.1-0.3-0.2-0.3l0.3-0.4l0,0L12,12.5c-0.1-0.1-0.1-0.3-0.1-0.5c0.1-0.2,0.2-0.3,0.4-0.3l0.3,0c0.7-0.1,1.3-0.3,1.9-0.7
-              c0.3-0.2,0.6-0.4,0.7-0.6c0.2-0.3,0.4-0.6,0.5-1C15.9,9,15.9,8.6,16,8.1c0-0.2,0-0.5,0-0.7c-0.1-0.7-0.3-1.2-0.7-1.7
-              c-0.2-0.2-0.2-0.4-0.1-0.6c0-0.1,0.1-0.2,0.1-0.3l0-0.1c0.1-0.4,0-0.8-0.1-1.2c0,0,0,0-0.1,0c-0.2,0-0.5,0.1-0.7,0.2
-              c-0.2,0.1-0.4,0.2-0.7,0.4l-0.4,0.2c-0.1,0.1-0.3,0.1-0.4,0.1c-0.5-0.1-0.9-0.2-1.4-0.2c-0.4,0-1.5,0-1.9,0C9,4.1,8.5,4.2,8,4.4
-              c-0.1,0-0.3,0-0.5-0.1C7.1,4,6.7,3.8,6.3,3.6C6.1,3.5,5.9,3.5,5.7,3.5C5.6,3.7,5.6,4,5.6,4.2c0,0.3,0,0.5,0.1,0.7
-              c0,0.1,0,0.1,0.1,0.2c0.1,0.2,0,0.4-0.1,0.5L5.5,5.8C5.5,5.9,5.4,6,5.3,6.1C5.1,6.4,4.9,6.8,4.8,7.3c-0.1,0.4,0,0.8,0,1.1
-              c0,0.4,0.1,0.8,0.2,1.2c0.1,0.4,0.3,0.7,0.5,0.9C5.8,10.7,6,10.9,6.2,11c0.5,0.3,1,0.5,1.6,0.6c0.2,0,0.7,0.1,0.7,0.1
-              c0.1,0,0.3,0.1,0.3,0.2c0.1,0.1,0.1,0.2,0.1,0.4c0,0.1-0.3,1-0.9,1.4c-0.7,0.4-1.8,0.5-2.5-0.3c-0.1-0.1-0.2-0.2-0.3-0.3
-              c-0.2-0.3-0.6-0.8-1-1c-0.1,0-0.1,0-0.1,0c0,0,0,0-0.1,0.1c0,0.2,0,0.4,0.1,0.6c0.1,0.1,0.2,0.2,0.3,0.4c0.2,0.3,0.4,0.5,0.5,0.8
-              c0.4,0.8,1,1.1,1.2,1.2C6.6,15.2,7.4,15.1,7.8,15.1C7.7,15.1,7.7,15.1,7.8,15.1z"/>
-          </g>
-        </svg>
-        </span>
         <span class="label-align">
           {{format-sha repo.default_branch.last_build.commit.sha}}
         </span>
@@ -58,22 +33,7 @@
 <div class="one-line">
   <div class="row-calendar">
     <div class="row-item" title="{{repo.default_branch.last_build.finished_at}}">
-      <span class="icon">
+      <span class="icon-calendar"></span>
-        <svg viewBox="0 0 20 20">
-          <g id="Cal">
-            <path fill="#A7AEAE" d="M16.7,2.5H3.3C3,2.5,2.8,2.7,2.8,3V17c0,0.3,0.2,0.5,0.5,0.5h13.4c0.3,0,0.5-0.2,0.5-0.5V3
-              C17.2,2.7,17,2.5,16.7,2.5z M16.2,3.4v3.1H3.8V3.4H16.2z M3.8,16.6v-9h12.5v9H3.8z"/>
-            <path fill="#A7AEAE" d="M8.7,13.4c-0.1,0-0.3,0-0.4,0c0.2-0.2,0.4-0.4,0.5-0.6c0.2-0.2,0.3-0.4,0.5-0.6c0.1-0.2,0.2-0.4,0.3-0.6
-              c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.3-0.3-0.4C9.2,10,9.1,9.9,8.9,9.8C8.7,9.7,8.5,9.7,8.3,9.7
-              C8,9.7,7.7,9.8,7.5,9.9C7.2,10,7,10.2,6.8,10.4L7.3,11c0.1-0.1,0.2-0.2,0.4-0.3c0.1-0.1,0.3-0.1,0.4-0.1c0.2,0,0.4,0.1,0.5,0.2
-              c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2,0,0.3-0.1,0.5c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.2-0.4,0.4-0.6,0.7c-0.2,0.2-0.5,0.5-0.8,0.8v0.6
-              H10v-0.9H9.1C9,13.4,8.8,13.4,8.7,13.4z"/>
-            <path fill="#A7AEAE" d="M10.6,10.7h2c-0.2,0.3-0.4,0.6-0.5,0.8c-0.1,0.3-0.3,0.6-0.4,0.8c-0.1,0.3-0.2,0.6-0.2,0.9
-              c0,0.3-0.1,0.7-0.1,1h1c0-0.4,0-0.8,0.1-1.2c0-0.3,0.1-0.7,0.2-0.9c0.1-0.3,0.2-0.6,0.4-0.9c0.2-0.3,0.4-0.6,0.6-0.9V9.8h-3.1
-              V10.7z"/>
-          </g>
-        </svg>
-      </span>
       <span class="label-align">
       {{#if repo.default_branch.last_build}}
         {{format-time repo.default_branch.last_build.finished_at}}

app/templates/components/requests-item.hbs

@@ -1,30 +1,35 @@
-<div class="tile-status tile-status--job">
+<div class="row-item">
-  <span class="icon icon--job {{requestClass}}"></span>
+  {{status-icon status=requestClass}}
 </div>
 
-<p class="jobs-item requests-time column">{{format-time request.created_at}}</p>
+<div class="row-item fade-out {{requestClass}}">
-
+  {{request-icon event=request.event_type state=requestClass}}
-<p class="jobs-item requests-branch column">
-  <span class="icon icon--grey {{type}}"></span>
   {{#if request.isPullRequest}}
-    <strong>#{{request.pullRequestNumber}}</strong>
+    <strong class="label-align">#{{request.pullRequestNumber}}</strong>
   {{else}}
-    <strong>{{request.branchName}}</strong>
+    <strong class="label-align">{{request.branchName}}</strong>
   {{/if}}
-  {{github-commit-link request.repo.slug request.commit.sha}}
+  <span class="label-align">{{github-commit-link request.repo.slug request.commit.sha}}</span>
-</p>
+</div>
 
-<p class="jobs-item requests-commit column">
+<div class="row-item fade-out">
+  <span class="icon-calendar"></span>
+  <span class="label-align">{{format-time request.created_at}}</span></div>
+
+<div class="row-item fade-out">
   {{{format-message request.commit.message short="true" repoBinding=request.build.repo}}}
-  </p>
+</div>
 
-<p class="jobs-item requests-build column">
+<div class="row-item">
   {{#if request.build}}
-    <span class="icon icon-hash"></span>
     {{#link-to "build" request.build}}
-      {{request.build.number}}{{/link-to}}
+      <span class="icon-hash"></span>
+      <span class="label-align">{{request.build.number}}</span>{{/link-to}}
   {{else}}
     -
   {{/if}}
-</p>
+</div>
-<p class="jobs-item requests-message column">{{message}}</p>
+
+<div class="row-item fade-out">
+  <span class="label-align">{{message}}</span>
+</div>

app/templates/requests.hbs

@@ -1,7 +1,7 @@
 {{#if config.pro}}
 <div class="travis-lint">
   <p>Travis Lint for clean .yml files
-    <a href={{lintUrl}}>lint.travis-ci.org/{{repo.slug}}</a>
+    <a href={{lintUrl}} title="Travis WebLint">lint.travis-ci.org/{{repo.slug}}</a>
   </p>
 </div>
 {{/if}}