remove old build header styles
delete old job styles cleanup templates and prepare for jobs list
This commit is contained in:
Lisa P
parent
a6e6cb0418
commit
fd885304f6
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
`import Ember from 'ember'`
|
||||
|
||||
JobsListComponent = Ember.Component.extend
|
||||
|
||||
tagName: 'section'
|
||||
classNames: ['jobs']
|
||||
|
||||
jobTableId: Ember.computed(->
|
||||
if @get('required')
|
||||
'jobs'
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -62,19 +62,19 @@
|
|||
svg g > *
|
||||
fill: $color
|
||||
|
||||
@mixin colorTiles($color, $status, $extra-bg: $color)
|
||||
&.#{$status}
|
||||
border-color: $extra-bg
|
||||
.tile-status
|
||||
background-color: $color
|
||||
.repo-header-title a,
|
||||
.repo-build-status a,
|
||||
.build-status a,
|
||||
.tile-header,
|
||||
.tile-header a,
|
||||
.tile-title a
|
||||
color: $color
|
||||
@include colorStatusIcons($color, $status)
|
||||
// @mixin colorTiles($color, $status, $extra-bg: $color)
|
||||
// &.#{$status}
|
||||
// border-color: $extra-bg
|
||||
// .tile-status
|
||||
// background-color: $color
|
||||
// .repo-header-title a,
|
||||
// .repo-build-status a,
|
||||
// .build-status a,
|
||||
// .tile-header,
|
||||
// .tile-header a,
|
||||
// .tile-title a
|
||||
// color: $color
|
||||
// @include colorStatusIcons($color, $status)
|
||||
|
||||
@mixin statusColors($color, $status, $width, $color2: $color)
|
||||
&.#{$status}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
@ -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
|
||||
|
||||
11
app/styles/app/layouts/jobs.sass
Normal file
11
app/styles/app/layouts/jobs.sass
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.jobs
|
||||
|
||||
|
||||
.jobs-list
|
||||
|
||||
|
||||
.section-title
|
||||
font-size: 16px
|
||||
color: $grey
|
||||
font-weight: 400
|
||||
margin: 3rem 0 1rem
|
||||
|
|
@ -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}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user