remove old build header styles

delete old job styles

cleanup templates and prepare for jobs list

app/components/jobs-item.coffee

@@ -5,7 +5,7 @@
 JobsItemComponent = Ember.Component.extend
   tagName: 'li'
   classNameBindings: ['job.state']
-  classNames: ['tile', 'tile--jobs', 'row']
+  classNames: ['jobs-item']
 
   isAnimating: (->
     state = @get('job.state')

app/components/jobs-list.coffee

@@ -1,6 +1,10 @@
 `import Ember from 'ember'`
 
 JobsListComponent = Ember.Component.extend
+  
+  tagName: 'section'
+  classNames: ['jobs']
+
   jobTableId: Ember.computed(->
     if @get('required')
       'jobs'

app/styles/app.scss

@@ -49,9 +49,6 @@
 @import "app/layouts/dashboard";
 @import "app/layouts/error";
 @import "app/layouts/footer";
-// @import "app/layouts/buildheader";
-// @import "app/layouts/build-job";
-@import "app/layouts/sidebar";
 @import "app/layouts/sidebar";
 @import "app/layouts/profile";
 @import "app/layouts/top";
@@ -59,6 +56,7 @@
 @import "app/layouts/branches";
 @import "app/layouts/broadcasts";
 @import "app/layouts/repo";
+@import "app/layouts/jobs";
 
 @import "app/layouts/requests";
 @import "app/layouts/caches";

app/styles/app/_mixins/mixins.sass

@@ -62,19 +62,19 @@
     svg g > *
       fill: $color
 
-@mixin colorTiles($color, $status, $extra-bg: $color)
+// @mixin colorTiles($color, $status, $extra-bg: $color)
-  &.#{$status}
+//   &.#{$status}
-    border-color: $extra-bg
+//     border-color: $extra-bg
-    .tile-status
+//     .tile-status
-      background-color: $color
+//       background-color: $color
-    .repo-header-title a,
+//     .repo-header-title a,
-    .repo-build-status a,
+//     .repo-build-status a,
-    .build-status a,
+//     .build-status a,
-    .tile-header,
+//     .tile-header,
-    .tile-header a,
+//     .tile-header a,
-    .tile-title a
+//     .tile-title a
-      color: $color
+//       color: $color
-    @include colorStatusIcons($color, $status)
+//     @include colorStatusIcons($color, $status)
 
 @mixin statusColors($color, $status, $width, $color2: $color)
   &.#{$status}

app/styles/app/layouts/build-job.sass

@@ -1,129 +0,0 @@
-
-@mixin colorJobs($color, $color-bg)
-  .job-id
-    color: $color
-  &:hover
-    background-color: $color-bg
-    .job-anchor,
-    .job-env,
-    .job-lang
-      background-color: $color-bg
-    .job-env
-      &:after
-        content: none
-    .job-anchor,
-    .job-lang
-      &:after
-        @include fadeOut(right, -90deg, $color-bg)
-
-.job-anchor
-  position: relative
-
-.build-title
-  .icon--question
-    width: 1.3em;
-    height: 1.3em;
-    transform: translate(0.3em, 0.2em);
-    cursor: pointer
-
-// job matrix
-.tile--jobs
-  @extend .tile--xs
-  font-size: $font-size-sm
-  padding-left: 3.5rem
-  p
-    white-space: normal
-  a
-    color: $grey-medium
-  .tile-status--job
-    width: 2em
-
-    .svg-booting
-      margin: 0.7em 0.3em
-
-  .jobs-item
-    padding: .1em 0
-    .icon
-      height: 1.2em
-      margin-right: .1em
-    .job-os .icon
-      height: 1.3em
-    .icon--lang
-      height: 1em
-      width: 1.4em
-    .icon--env
-      width: 1.1em
-    .icon.api
-      height: 1.5em
-
-  @media #{$medium-up}
-    height: 36px
-    p
-      white-space: nowrap
-    .icon--lang,
-    .icon--env
-      margin-right: .4em
-    .jobs-item
-      position: relative
-      float: left
-      white-space: nowrap
-      padding: 0
-      overflow: hidden
-    .job-id
-      width: grid-calc(3, 24)
-      border-right: solid 1px $cream-dark
-    .job-os
-      width: grid-calc(1, 24)
-      text-align: center
-    .job-lang
-      width: grid-calc(6, 24)
-      &:after
-        @include fadeOut(right, -90deg, $cream-light)
-    .job-anchor
-      width: grid-calc(14, 24)
-      &:after
-        @include fadeOut(right, -90deg, $cream-light)
-        z-index: 999
-    .job-env
-      min-width: grid-calc(16, 24)
-      width: grid-calc(16, 24)
-      &:after
-        @include fadeOut(right, -90deg, $cream-light)
-      &:hover
-        position: absolute
-        width: auto
-        padding-right: 1em
-        z-index: 88
-    .job-duration
-      width: grid-calc(8, 24)
-      max-width: 165px
-      float: right
-
-  @media #{$xlarge-up}
-    .job-id
-      width: grid-calc(2, 24)
-    .job-os
-      margin: 0 1em
-    .job-lang
-      width: grid-calc(4, 24)
-      margin-right: 2em
-
-  &.failed,
-  &.errored
-    @include colorJobs($fail-color, #fbebe6)
-  &.passed
-    @include colorJobs($pass-color, #e5efe4)
-  &.canceled
-    @include colorJobs($cancel-color, #e5e5e5)
-  &.started,
-  &.created,
-  &.received,
-  &.queued
-    @include colorJobs($created-color, #f4efd8)
-
-.is-empty
-  opacity: .5
-
-.jobs-list
-  @include resetul
-

app/styles/app/layouts/buildheader.sass

@@ -1,152 +0,0 @@
-
-.repo
-  font-size: $font-size-m
-  color: $grey-medium
-
-.repo-header
-  header
-    margin: .5rem 0 2.6rem
-    > *
-      vertical-align: middle
-
-.repo-header-title
-  @extend %inline-block
-  margin: 0
-  font-weight: 400
-  font-size: 35px
-  line-height: 1
-  a
-    color: $grey-dark
-    &:hover
-      text-decoration: underline
-
-.repo-header-icons
-  line-height: 1
-  vertical-align: middle
-  a
-    @extend %inline-block
-    height: 1.7em
-    margin-left: .7em
-  .icon
-    width: 1.5em
-    height: 100%
-    position: relative
-    top: 0.65em
-
-  @media #{$medium-up}
-    @extend %inline-block
-
-.repo-menus
-  @media #{$medium-up}
-    .dropdown
-      position: absolute
-      top: -0.8em
-      right: 0
-      z-index: 50
-    .tabnav
-      position: absolute
-      top: -0.4em
-    .repo-menu-header
-      position: relative
-      height: 1.6em
-      margin-bottom: 1em
-      border-bottom: solid $cream-dark 2px
-
-.repo-main
-  .button--showmore
-    margin-top: 2em
-  .build-title
-    margin-top: 2.5rem
-    font-size: $font-size-sm
-    font-weight: 400
-    & span:hover + .tooltip
-      display: block
-
-.repo-main-commit
-  position: relative
-  padding-bottom: 0.5em
-  font-weight: 400
-  color: $grey-dark
-  &,
-  small
-    margin: 0
-    font-size: $font-size-m
-    line-height: 1
-  small
-    margin-right: .3em
-    font-weight: 600
-  @media #{$medium-up}
-    white-space: nowrap
-    overflow: hidden
-    &:after
-      @include fadeOut(right, -90deg, $cream-light)
-
-.repo-main-description
-  p
-    margin: 0
-  @media #{$medium-up}
-    position: relative
-    height: 4.9em
-    overflow: hidden
-    &:after
-      @include fadeOut(bottom, 0deg, $cream-light)
-
-  .body
-    display: block
-    font-size: 13px
-    font-family: Monaco, monospace
-    margin-top: 0.6em
-    overflow: hidden
-    word-break: break-word
-    white-space: pre-wrap
-
-.repo-main-info
-  @include resetul
-  position: relative
-  padding-right: 2em
-  margin-right: 1.4em
-  border-right: $cream-dark 1px solid
-  line-height: $line-height-m
-  overflow: hidden
-  &:after
-    @include fadeOut(right, -90deg, $cream-light)
-    white-space: nowrap
-    &:hover
-      text-decoration: underline
-  li
-    white-space: nowrap
-
-.repo-main-tools
-  position: absolute
-  top: 0
-  bottom: 0
-  right: 0
-  a
-    display: block
-    margin-bottom: .5em
-    background-color: $grey-lighter
-    line-height: 24px
-    &:hover
-      background-color: darken($grey-medium, 10)
-  .icon--trigger
-    width: 15px
-    height: 19px
-    margin-left: 6px
-  .icon--cancel
-    width: 16px
-    height: 16px
-    margin-left: 6px
-  .icon--codeclimate
-    width: 1.2em
-    height: 1.1em
-    margin-left: 4px
-
-.build-os.linux
-  text-transform: capitalize
-.build-os.osx
-  text-transform: uppercase
-
-.build-list
-  padding: 0
-  margin: 0
-

app/styles/app/layouts/jobs.sass

@@ -0,0 +1,11 @@
+.jobs
+
+
+.jobs-list
+
+
+.section-title
+  font-size: 16px
+  color: $grey
+  font-weight: 400
+  margin: 3rem 0 1rem

app/templates/components/jobs-list.hbs

@@ -1,12 +1,11 @@
 {{#if jobs.length}}
-  <section>
 
   {{#if required}}
-    <h2 class="build-title">Build Jobs</h2>
+    <h2 class="section-title">Build Jobs</h2>
   {{else}}
-    <h2 class="build-title">Allowed Failures
+    <h2 class="section-title">Allowed Failures
       <div class="tooltip--jobs">
-        <span class="icon icon--question"></span>
+        <span class="icon icon--question tooltip-trigger"></span>
         <p class="tooltip-bubble">These are jobs you can allow to fail <br> without failing your entire build</p>
       </div>
     </h2>
@@ -17,5 +16,4 @@
       {{jobs-item job=job repo=repo}}
     {{/each}}
     </ul>
-  </section>
 {{/if}}