new ownerpage style

app/components/owner-repo-tile.coffee

@@ -3,7 +3,7 @@
 OwnerRepoTileComponent = Ember.Component.extend
 
   tagName: 'li'
-  classNames: ['tile', 'tile--small', 'row']
+  classNames: ['owner-tile']
   classNameBindings: ['repo.default_branch.last_build.state']
 
   ownerName: (->

app/styles/app/layouts/owner.sass

@@ -52,60 +52,6 @@
       content: ""
       @include fadeOut(right, -90deg, $white)
 
-
-.owner-tiles
-  @extend .repo-main
-  @include resetul
-
-  h2
-    font-size: 20px
-    white-space: nowrap
-    line-height: 2.5
-
-  .tile-status .icon-status
-    margin-top: 2.1em
-    width: 1.2em
-    height: 1.3em
-
-  .tile-single,
-  .tile-double
-    color: $grey-medium
-    padding: .1em 0
-    font-size: $font-size-m
-    .icon
-      margin-right: .3em
-      width: 1em
-      height: 1.1em
-      vertical-align: middle
-      &.icon-github
-        width: .9em
-        height: 1.2em
-      &.push
-        width: 1.1em
-        height: .6em
-        margin: 0
-    a
-      color: $grey-medium
-      &:hover
-        color: $grey-medium
-        text-decoration: underline
-
-  .tile-single
-    line-height: 3em
-  .tile-double
-    line-height: 1.5em
-
-  .tile-main
-    position: relative
-    overflow: hidden
-    &:after
-      content: ""
-      @include fadeOut(right, -90deg, $cream-light, 20%)
-    & ~ div
-      @media #{$medium-up}
-        padding-left: 2em
-        border-left: 1px solid $cream-dark
-
 .tabs--owner
   padding : 0 $column-gutter/2
 
@@ -129,3 +75,104 @@
   @media #{$medium-up}
     height: 2.2em
     border-bottom: solid 2px $cream-dark
+
+
+.owner-tiles
+  padding: 0
+
+%one-line
+  font-size: 16px
+  font-weight: 400
+  vertical-align: middle
+  margin: 0
+  *
+    display: inline-block
+    font-size: inherit
+    font-weight: 400
+    vertical-align: middle
+    margin: 0
+    padding: 0
+    line-height: 1
+
+@mixin statusColors($color, $status)
+  &.#{$status}
+    background: linear-gradient(to right, $color 0%, $color 9px, transparent 10px, transparent 100%);
+    .build a,
+    .repo-title a
+      color: $color
+      &:hover
+        border-color: $color
+    .build-status
+      color: $color
+
+
+.owner-tile
+  display: flex
+  flex-direction: row
+  flex-flow: space-between
+  align-items: baseline
+  height: 3.8em
+  padding: .8em 0
+  margin-bottom: .5em
+  border: #F2F0F0 solid 1px
+
+  a
+    text-decoration: none
+    &:hover
+      span
+        text-decoration: underline
+  .repo-title a:hover
+    text-decoration: underline
+
+  .repo
+    @extend %one-line
+    width: grid-calc(4, 12)
+    margin-left: 2em
+
+  .icon--job,
+  .icon-push,
+  .icon-pull_request,
+  .icon-calendar,
+  .icon-hash,
+  .icon-github
+    width: 1em
+    height: 1.1em
+    margin-right: .5em
+    background-repeat: no-repeat
+    background-size: 100%
+
+  .icon--job
+    height: 1.2em
+    background-position-y: 0.2em
+  .icon-push
+    background-position-y: 0.4em
+  .build-status
+    text-transform: capitalize
+
+  .build
+    @extend %one-line
+    width: grid-calc(2, 12)
+
+  .branch
+    @extend %one-line
+    width: grid-calc(2, 12)
+
+  .commit
+    @extend %one-line
+    width: grid-calc(2, 12)
+
+  .duration
+    @extend %one-line
+    width: grid-calc(4, 12)
+
+  @include statusColors($green-dark, 'passed')
+  @include statusColors($red-dark, 'failed')
+  @include statusColors($red-dark, 'errored')
+  @include statusColors($grey-medium, 'canceled')
+  @include statusColors(#ECCE4B, 'started')
+  @include statusColors(#ECCE4B, 'queued')
+  @include statusColors(#ECCE4B, 'booting')
+  @include statusColors(#ECCE4B, 'received')
+  @include statusColors(#ECCE4B, 'created')
+
+

app/styles/app/modules/icons.sass

@@ -10,7 +10,8 @@
   @extend %icon
 
 .icon-cal,
-.icon--cal
+.icon--cal,
+.icon-calendar
   background-image: inline-image('svg/finished-icon.svg')
 
 .icon-clock,
@@ -83,9 +84,11 @@
 .icon.pull_request
   background-image: inline-image('svg/pull-request-icon.svg')
 
-.icon--grey.push
+.icon--grey.push,
+.icon-push
   background-image: inline-image('svg/icon-request-push.svg')
-.icon--grey.pull_request
+.icon--grey.pull_request,
+.icon-pull_request
   background-image: inline-image('svg/icon-request-pull.svg')
 
 .icon-api,

app/templates/components/owner-repo-tile.hbs

@@ -1,38 +1,34 @@
 {{#if repo.private }}
   <div class="tile-lock"><span class="icon icon-lock"></span></div>
 {{/if}}
-<div class="tile-status">
+<div class="repo">
-  <span class="icon icon-status {{repo.default_branch.last_build.state}}"></span>
+  <span class="icon--job {{repo.default_branch.last_build.state}}"></span>
-</div>
+  <h2 class="repo-title">{{#link-to "repo" ownerName repoName }}{{repoName}}{{/link-to}}</h2>
-<div class="tile-main tile-header column medium-3">
-  <h2>{{#link-to "repo" ownerName repoName }}{{repoName}}{{/link-to}}</h2>
-</div>
-<div class="column medium-9 end">
-  {{#if repo.default_branch.last_build}}
-    <p class="tile-single tile-job build-status column medium-4 small-6"><span class="icon icon-hash"></span>
-      {{#link-to "build" ownerName repoName repo.default_branch.last_build.id}}
-        {{!-- {{repo.last_build.number}} {{repo.last_build.state}} --}}
-        {{repo.default_branch.last_build.number}} {{repo.default_branch.last_build.state}}
-      {{/link-to}}</p>
-
-    <div class="column medium-8 tile-double">
-      <div class="column medium-6">
-        <p class="tile-branch">
-          <span class="icon icon--grey request-kind {{repo.default_branch.last_build.event_type}}"></span>
-          {{repo.default_branch.name}}</p>
-        <p class="tile-commit">
-          <span class="icon icon-github"></span><a href={{repo.default_branch.last_build.commit.compare_url}}>{{format-sha repo.default_branch.last_build.commit.sha}}</a></p>
-      </div>
-      <div class="column medium-6">
-        <p class="tile-duration">
-          <span class="icon icon-clock"></span>
-          {{format-duration repo.default_branch.last_build.duration}}</p>
-        <p class="tile-timeago">
-          <span class="icon icon-cal"></span>
-          {{format-time repo.default_branch.last_build.finished_at}}</p>
-      </div>
-    </div>
-  {{else}}
-    <p>there is no build</p>
-  {{/if}}
 </div>
+{{#if repo.default_branch.last_build}}
+  <div class="build">
+    {{#link-to "build" ownerName repoName repo.default_branch.last_build.id}}
+      <span class="icon-hash"></span>
+      <span>{{repo.default_branch.last_build.number}}</span>
+    {{/link-to}}
+  </div>
+  <div class="branch">
+    <span class="icon-{{repo.default_branch.last_build.event_type}}"></span>
+    <p>
+      {{repo.default_branch.name}}
+    </p>
+  </div>
+  <div class="commit">
+    <a href="{{repo.default_branch.last_build.commit.compare_url}}">
+      <span class="icon-github"></span>
+      <span>{{format-sha repo.default_branch.last_build.commit.sha}}</span>
+    </a>
+  </div>
+  <div class="duration">
+    <span class="icon-calendar"></span>
+    <span class="build-status">{{repo.default_branch.last_build.state}}</span>
+    <span>{{format-time repo.default_branch.last_build.finished_at}}</span>
+  </div>
+{{else}}
+  <p>there is no build</p>
+{{/if}}

app/templates/owner.hbs

@@ -10,13 +10,13 @@
 </header>
 
 <div class="tabs--owner">
-  <nav class="tabnav tabnav--owner row" role="tablist">
+{{!--   <nav class="tabnav tabnav--owner row" role="tablist">
     <ul class="tab">
       <li role="presentational">{{#link-to 'owner.repositories' owner.login}}All Repositories{{/link-to}}</li>
       <li role="presentational">{{#link-to 'owner.running' owner.login}}Running Builds{{/link-to}}</li>
-      {{!-- <li role="presentational"><a href="#" title="" role="tab">Members</a></li> --}}
+      <li role="presentational"><a href="#" title="" role="tab">Members</a></li>
     </ul>
-  </nav>
+  </nav> --}}
 
   <div class="tabbody">
     <section role="tabpanel">