refactor new styles

app/components/branch-row.coffee

@@ -8,7 +8,7 @@ BranchRowComponent = Ember.Component.extend
   routing: Ember.inject.service('-routing')
   tagName: 'li'
   classNameBindings: ['build.last_build.state']
-  classNames: ['branch-row']
+  classNames: ['branch-row', 'row-li']
   isLoading: false
   isTriggering: false
   hasTriggered: false

app/components/dashboard-row.coffee

@@ -6,7 +6,7 @@ DashboardRowComponent = Ember.Component.extend
 
   tagName: 'li'
   classNameBindings: ['repo.default_branch.last_build.state']
-  classNames: ['dashboard-row']
+  classNames: ['dashboard-row', 'row-li']
   isLoading: false
   isTriggering: false
   hasTriggered: false

app/components/owner-repo-tile.coffee

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

app/controllers/dashboard/repositories.coffee

@@ -12,7 +12,6 @@ Controller = Ember.Controller.extend
     org = @get('org')
  
     repos = repos.filter (item, index) ->
-      console.log(item)
       item.get('default_branch.last_build') != null
     .sortBy('default_branch.last_build.finished_at')
     .reverse()

app/styles/app.scss

@@ -24,6 +24,7 @@
 
 @import "app/animation/tractor";
 
+@import "app/modules/row";
 @import "app/modules/loader";
 @import "app/modules/tiles";
 @import "app/modules/buttons";

app/styles/app/_mixins/mixins.sass

@@ -29,17 +29,6 @@
   padding: 0
   list-style: none
 
-%border-radius-4px
-  border-radius: 4px
-
-%border-top-4px
-  border-top-left-radius: 4px
-  border-top-right-radius: 4px
-
-%border-bottom-4px
-  border-bottom-left-radius: 4px
-  border-bottom-right-radius: 4px
-
 %absolute-center
   position: absolute
   top: 0
@@ -66,7 +55,6 @@
   font-weight: 400
 
 
-
 // @todo simplyfiy coloring mixins
 
 @mixin colorStatusIcons($color, $status)
@@ -92,7 +80,8 @@
   &.#{$status}
     background: linear-gradient(to right, $color2 0%, $color2 9px, white 9px, white 100%) no-repeat
     .row-name,
-    .row-request a
+    .row-request a,
+    .row-color a
       color: $color
       &:hover
         border-color: $color

app/styles/app/layouts/branches.sass

@@ -4,19 +4,6 @@
     margin: 1.5em 0 0.7em
 
 .branch-row
-  border: 1px solid $cream-dark
-  font-size: 16px
-  text-align: right
-  margin-bottom: .3rem
-  color: $grey-dark
-  background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat
-
-  .icon
-    width: 1.3em
-    height: 1.3em
-    margin-right: .2em
-    display: inline-block
-    vertical-align: middle
 
   .avatar
     display: inline-block
@@ -27,21 +14,10 @@
     vertical-align: middle
     background-color: #E9EBEB
 
-  .row-item
-    margin: .2em
-    font-size: 16px
-    font-weight: $font-weight-normal
-    white-space: nowrap
-    overflow: hidden
-    a
-      color: $grey-dark
-      text-decoration: none
-      &:hover
-        text-decoration: underline
-
   @media #{$medium-up}
     & > div:first-of-type
       width: 30%
+      padding-left: 1em
     & > div:nth-of-type(2)
       width: 20%
     & > div:nth-of-type(3)
@@ -50,6 +26,7 @@
     //   width: 5%
     & > div:nth-of-type(4)
       width: 28%
+      float: right
   @media #{$large-up}
     & > div:nth-of-type(2)
       width: 21%
@@ -60,42 +37,6 @@
     & > div:nth-of-type(4)
       width: 25%
 
-  @include statusColors($green-dark, 'passed')
-  @include statusColors($red-dark, 'failed')
-  @include statusColors($red-dark, 'errored')
-  @include statusColors($grey-medium, 'canceled')
-  @include statusColors(#bfb502, 'started', #e5da3f)
-  @include statusColors(#bfb502, 'queued', #e5da3f)
-  @include statusColors(#bfb502, 'booting', #e5da3f)
-  @include statusColors(#bfb502, 'received', #e5da3f)
-  @include statusColors(#bfb502, 'created', #e5da3f)
-
-%row-element
-  vertical-align: middle
-  @media #{$medium-up}
-    display: inline-block
-  .row-item
-    vertical-align: middle
-
-.two-line
-  @extend %row-element
-  padding: .4em 0
-  margin-left: 2em
-  text-align: left
-
-  @media #{$medium-up}
-    margin-left: 0
-
-.one-line
-  @extend %row-element
-  .row-item
-    display: inline-block
-  .row-nav
-    display: none
-    text-align: center
-    @media #{$medium-up}
-      display: block
-
   .row-last-build
     @media #{$medium-up}
       padding-left: 1em
@@ -222,10 +163,6 @@
   path
     fill: $teal-dark
 
-.label-align
-  vertical-align: middle
-  line-height: 1.5
-
 // @todo refactor to status-icon module
 .status-icon
   .is-rotating

app/styles/app/layouts/dashboard.sass

@@ -1,20 +1,3 @@
-.fade-out
-  @media #{$medium-up}
-    white-space: nowrap
-    position:relative
-    overflow: hidden
-    &:after
-      content: ""
-      @include fadeOut(right, -90deg, $white, 30%)
-
-@mixin colorDashboardTiles($color, $status, $color2: $color)
-  &.#{$status}
-    .row-request
-      color: $color
-    .row-name a,
-    .row-request a
-      color: $color
-
 
 .dashboard
   .centered
@@ -33,51 +16,20 @@
   margin: 3rem 0 5rem
   list-style-type: none
 
+
 .dashboard-active li
-
-  border: 1px solid $cream-dark
-  font-size: 16px
   text-align: left
-  margin-bottom: .3rem
-  color: $grey-dark
-  background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 9px, white 100%) no-repeat
-
-  .icon
-    width: 1.3em
-    height: 1.3em
-    margin-right: .2em
-    display: inline-block
-    vertical-align: middle
-
-  h2, h3
-    margin: 0
-    font-weight: $font-weight-normal
-
-  h3
-    font-size: 16px
-
-  h2
-    font-size: 18px
   .one-line
     margin-left: 2em
+    text-align: left
   .two-line
     padding: .1em 0
-
+  .row-item h2
-  .row-item
+    font-size: 18px
-    margin: .2em
-    font-size: 16px
-    font-weight: $font-weight-normal
-    white-space: nowrap
-    overflow: hidden
-    a
-      color: $grey-dark
-      text-decoration: none
-      &:hover
-        text-decoration: underline
 
   @media #{$medium-up}
     & > div:first-of-type
-      width: 28%
+      width: 30%
       position: relative
       padding-left: 1em
       &:after
@@ -100,26 +52,3 @@
       li
         border: none
       transform:  translate(-19%, -170%)
-
-
-  @include statusColors($green-dark, 'passed')
-  @include statusColors($red-dark, 'failed')
-  @include statusColors($red-dark, 'errored')
-  @include statusColors($grey-medium, 'canceled')
-  @include statusColors(#bfb502, 'started', #e5da3f)
-  @include statusColors(#bfb502, 'queued', #e5da3f)
-  @include statusColors(#bfb502, 'booting', #e5da3f)
-  @include statusColors(#bfb502, 'received', #e5da3f)
-  @include statusColors(#bfb502, 'created', #e5da3f)
-
-  @include colorDashboardTiles($green-dark, 'passed')
-  @include colorDashboardTiles($red-dark, 'failed')
-  @include colorDashboardTiles($red-dark, 'errored')
-  @include colorDashboardTiles($grey-medium, 'canceled')
-  @include colorDashboardTiles(#bfb502, 'started', #e5da3f)
-  @include colorDashboardTiles(#bfb502, 'queued', #e5da3f)
-  @include colorDashboardTiles(#bfb502, 'booting', #e5da3f)
-  @include colorDashboardTiles(#bfb502, 'received', #e5da3f)
-  @include colorDashboardTiles(#bfb502, 'created', #e5da3f)
-
-

app/styles/app/layouts/owner.sass

@@ -82,87 +82,21 @@
   padding: 0
   list-style-type: none
 
-%one-line
-  font-size: 16px
-  font-weight: 400
-  vertical-align: middle
-  margin: 0
-  display: inline-block
-  *
-    display: inline-block
-    font-size: inherit
-    font-weight: 400
-    vertical-align: middle
-    margin: 0
-    padding: 0
-    line-height: 1
-
-.owner-tile
-  padding: .8em 0 .8em 2em
-  margin-bottom: .5em
-  border: #F2F0F0 solid 1px
-
-  a
-    text-decoration: none
-    &:hover
-      span
-        text-decoration: underline
-  .repo-title a:hover
-    text-decoration: underline
-
-  .icon
-    width: 1.3em
-    height: 1.1em
-
   .build-status
     text-transform: capitalize
 
-  .repo
+.owner-tile
-    @extend %one-line
+  padding: .4em 0 .3em
-    white-space: nowrap
-    width: grid-calc(9, 12)
-  .build
-    @extend %one-line
-    width: grid-calc(5, 12)
-  .branch
-    @extend %one-line
-    width: grid-calc(6, 12)
-  .commit
-    @extend %one-line
-    width: grid-calc(6, 12)
-  .duration
-    @extend %one-line
-    width: grid-calc(12, 12)
 
   @media #{$medium-up}
-    display: flex
+    & > div:first-of-type
-    flex-direction: row
+      width: 30%
-    flex-flow: space-between
+      padding-left: 1em
-    align-items: baseline
+    & > div:nth-of-type(2)
-    height: 3.8em
+      width: 10%
-    padding: .8em 0
+    & > div:nth-of-type(3)
-
+      width: 15%
-    .build
+    & > div:nth-of-type(4)
-      width: grid-calc(2, 12)
+      width: 15%
-    .branch
+    & > div:nth-of-type(5)
-      width: grid-calc(2, 12)
+      width: 25%
-    .commit
-      width: grid-calc(2, 12)
-    .duration
-      width: grid-calc(4, 12)
-    .repo
-      width: grid-calc(4, 12)
-      margin-left: 2em
-
-
-  @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/row.sass

@@ -0,0 +1,79 @@
+.fade-out
+  @media #{$medium-up}
+    white-space: nowrap
+    position:relative
+    overflow: hidden
+    &:after
+      content: ""
+      @include fadeOut(right, -90deg, $white, 30%)
+
+.label-align
+  vertical-align: middle
+  line-height: 1.5
+
+.row-li
+  border: 1px solid $cream-dark
+  font-size: 16px
+  margin-bottom: .3rem
+  color: $grey-dark
+  background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat
+
+  .row-item
+    display: inline-block
+    margin: .2em
+    font-size: 16px
+    font-weight: $font-weight-normal
+    white-space: nowrap
+    overflow: hidden
+    a
+      color: $grey-dark
+      text-decoration: none
+      &:hover
+        text-decoration: underline
+    h2, h3
+      margin: 0
+      font-weight: $font-weight-normal
+      font-size: 16px
+
+  %row-element
+    vertical-align: middle
+    @media #{$medium-up}
+      display: inline-block
+    .row-item
+      vertical-align: middle
+
+  .two-line
+    @extend %row-element
+    padding: .4em 0
+    margin-left: 2em
+    text-align: left
+
+    @media #{$medium-up}
+      margin-left: 0
+
+  .one-line
+    @extend %row-element
+    .row-item
+      display: inline-block
+    .row-nav
+      display: none
+      text-align: center
+      @media #{$medium-up}
+        display: block
+
+  .icon
+    width: 1.3em
+    height: 1.3em
+    margin-right: .2em
+    display: inline-block
+    vertical-align: middle
+
+  @include statusColors($green-dark, 'passed')
+  @include statusColors($red-dark, 'failed')
+  @include statusColors($red-dark, 'errored')
+  @include statusColors($grey-medium, 'canceled')
+  @include statusColors(#bfb502, 'started', #e5da3f)
+  @include statusColors(#bfb502, 'queued', #e5da3f)
+  @include statusColors(#bfb502, 'booting', #e5da3f)
+  @include statusColors(#bfb502, 'received', #e5da3f)
+  @include statusColors(#bfb502, 'created', #e5da3f)

app/templates/components/branch-row.hbs

@@ -33,7 +33,7 @@
     </div>
   </div>
 </div>
-<div class="two-line row-last-build">
+<div class="two-line row-last-build fade-out">
   <div class="row-request">
     <div class="row-item">
       {{#if build.last_build}}

app/templates/components/dashboard-row.hbs

@@ -1,6 +1,6 @@
 
 <div class="two-line fade-out">
-  <div class="row-name row-item"> 
+  <div class="row-name row-item row-color"> 
     <h3>{{#link-to "owner" repo.owner.login}}{{status-icon status=repo.default_branch.last_build.state}} {{repo.owner.login}}{{/link-to}}</h3>
     <h2>{{#link-to "repo" repo.owner.login repo.name}}<span class="label-align">{{repo.name}}</span>{{/link-to}}</h2>
   </div>

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

@@ -1,7 +1,8 @@
 {{!-- {{#if repo.private }}
   <div class="tile-lock"><span class="icon icon-lock"></span></div>
 {{/if}} --}}
-<div class="repo fade-out">
+<div class="row-item fade-out">
+  <div clas="one-line">
     <h2 class="repo-title">
     {{status-icon status=repo.default_branch.last_build.state}}
     {{#link-to "repo" ownerName repoName }}
@@ -9,8 +10,10 @@
     {{/link-to}}
     </h2>
   </div>
+</div>
 {{#if repo.default_branch.last_build}}
-  <div class="build">
+  <div class="row-item">
+    <div class="one-line">
       {{#link-to "build" ownerName repoName repo.default_branch.last_build.id}}
         <span class="icon">
             <svg version="1.1" id="Layer_1" x="0px" y="0px"
@@ -24,15 +27,20 @@
               L-277.2,202.4z"/>x
             </svg>
           </span>
-      <span>{{repo.default_branch.last_build.number}}</span>
+        <span class="label-align">{{repo.default_branch.last_build.number}}</span>
       {{/link-to}}
     </div>
-  <div class="branch fade-out">
+  </div>
+  
+  <div class="row-item fade-out">
+    <div class="one-line">
       {{request-icon build=repo.default_branch.last_build}}
       <span class="label-align">{{repo.default_branch.name}}</span>
-    
     </div>
-  <div class="commit">
+  </div>
+
+  <div class="row-item">
+    <div class="one-line">
       <a href="{{repo.default_branch.last_build.commit.compare_url}}">
         <span class="icon">
           <svg x="0px" y="0px" viewBox="2 0 20 20" xml:space="preserve">
@@ -63,7 +71,10 @@
         <span class="label-align">{{format-sha repo.default_branch.last_build.commit.sha}}</span>
       </a>
     </div>
-  <div class="duration">
+  </div>
+
+  <div class="row-item fade-out">
+    <div class="one-line">
       <span class="icon">
         <svg viewBox="0 0 20 20">
           <g id="Cal">
@@ -83,6 +94,7 @@
       <span class="build-status label-align">{{repo.default_branch.last_build.state}}</span>
       <span class="finished-at label-align">{{format-time repo.default_branch.last_build.finished_at}}</span>
     </div>
+  </div>
 {{else}}
   <p>there is no build</p>
 {{/if}}