prepare and change jobs markup
This commit is contained in:
Lisa Passing
parent
51323fbd1c
commit
e198c618cc
|
|
@ -60,4 +60,5 @@
|
|||
@import "app/layouts/error";
|
||||
@import "app/layouts/footer";
|
||||
@import "app/layouts/buildheader";
|
||||
@import "app/layouts/build-job";
|
||||
@import "app/top";
|
||||
|
|
|
|||
49
app/styles/app/layouts/build-job.sass
Normal file
49
app/styles/app/layouts/build-job.sass
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
@mixin colorJobs($color)
|
||||
.build-status a
|
||||
color: $color
|
||||
|
||||
// job matrix
|
||||
.tile--jobs
|
||||
padding-left: 2.7rem
|
||||
margin-bottom: 0.35rem
|
||||
@media #{$medium-up}
|
||||
height: 38px
|
||||
.tile-main
|
||||
color: #7d8282
|
||||
// variations if env and/or code are set
|
||||
p.tile-single-line
|
||||
padding: 0
|
||||
line-height: 1.4
|
||||
&:only-of-type
|
||||
padding: .7em 0
|
||||
.icon--env
|
||||
height: 1.2em
|
||||
.icon--code
|
||||
width: 1.3em
|
||||
height: 1.2em
|
||||
.icon
|
||||
margin-right: .3em
|
||||
.icon.mac
|
||||
height: 1.6em
|
||||
@media #{$medium-up}
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
border-right: solid 1px $grey4
|
||||
&:after
|
||||
@include fadeOut(right, -90deg, $cream-light)
|
||||
@media #{$xlarge-up}
|
||||
@include grid-column(5)
|
||||
.tile-additional
|
||||
@media #{$xlarge-up}
|
||||
@include grid-column(7)
|
||||
|
||||
&.failed
|
||||
@include colorJobs($fail-color)
|
||||
&.errored
|
||||
@include colorJobs(#939292)
|
||||
&.passed
|
||||
@include colorJobs($pass-color)
|
||||
&.started,
|
||||
&.created,
|
||||
&.received
|
||||
@include colorJobs($created-color)
|
||||
|
|
@ -58,6 +58,7 @@
|
|||
margin-top: 2.5rem
|
||||
color: $grey1
|
||||
font-size: $font-size-sm
|
||||
font-weight: 400
|
||||
& span:hover + .tooltip
|
||||
display: block
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,8 @@
|
|||
.build-status a
|
||||
color: $color
|
||||
|
||||
@mixin colorJobs($color)
|
||||
.build-status a
|
||||
color: $color
|
||||
|
||||
.tile
|
||||
@extend border-radius-4px
|
||||
@extend %border-radius-4px
|
||||
overflow: hidden
|
||||
position: relative
|
||||
padding: .8rem .8rem .8rem 3rem
|
||||
|
|
@ -40,18 +36,6 @@
|
|||
&.inactive
|
||||
@include colorTiles($cancel-color)
|
||||
|
||||
&.tile--jobs
|
||||
&.failed
|
||||
@include colorJobs($fail-color)
|
||||
&.errored
|
||||
@include colorJobs(#939292)
|
||||
&.passed
|
||||
@include colorJobs($pass-color)
|
||||
&.started,
|
||||
&.created,
|
||||
&.received
|
||||
@include colorJobs($created-color)
|
||||
|
||||
@media #{$medium-up}
|
||||
height: 145px
|
||||
|
||||
|
|
@ -163,42 +147,6 @@
|
|||
@media #{$xlarge-up}
|
||||
@include grid-column(4)
|
||||
|
||||
// job matrix
|
||||
.tile--jobs
|
||||
padding-left: 2.7rem
|
||||
margin-bottom: 0.3em
|
||||
@media #{$medium-up}
|
||||
height: 64px
|
||||
.tile-main
|
||||
color: #7d8282
|
||||
// variations if env and/or code are set
|
||||
p.tile-single-line
|
||||
padding: 0
|
||||
line-height: 1.4
|
||||
&:only-of-type
|
||||
padding: .7em 0
|
||||
.icon--env
|
||||
height: 1.2em
|
||||
.icon--code
|
||||
width: 1.3em
|
||||
height: 1.2em
|
||||
.icon
|
||||
margin-right: .3em
|
||||
.icon.mac
|
||||
height: 1.6em
|
||||
@media #{$medium-up}
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
border-right: solid 1px $grey4
|
||||
&:after
|
||||
@include fadeOut(right, -90deg, $cream-light)
|
||||
@media #{$xlarge-up}
|
||||
@include grid-column(5)
|
||||
.tile-additional
|
||||
@media #{$xlarge-up}
|
||||
@include grid-column(7)
|
||||
|
||||
|
||||
p.tile-single-line
|
||||
padding: .7em 0
|
||||
.icon--code
|
||||
|
|
|
|||
|
|
@ -15,42 +15,64 @@
|
|||
{{#each job in view.jobs}}
|
||||
{{#view 'jobs-item' context=job}}
|
||||
<div {{bind-attr class=":tile :tile--small :tile--jobs :row job.state" }}>
|
||||
<div class="tile-status tile-status--job">
|
||||
<span {{bind-attr class=":icon :icon--job job.state"}}></span>
|
||||
</div>
|
||||
{{#link-to "job" repo job}}
|
||||
|
||||
<div class="tile-main medium-4 columns">
|
||||
{{#if config.env}}
|
||||
<p class="build-env tile-single-line"><span class="icon icon--env"></span>{{config.env}}</p>
|
||||
{{/if}}
|
||||
{{#if view.languages}}
|
||||
<p class="build-lang tile-single-line"><span class="icon icon--lang"></span>{{view.languages}}</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="tile-status tile-status--job">
|
||||
<span {{bind-attr class=":icon :icon--job job.state"}}></span>
|
||||
</div>
|
||||
|
||||
<div class="tile-additional medium-8 columns end">
|
||||
<p class="columns small-6 medium-2 large-3 tile-single-line build-status">
|
||||
<p class="job-id build-status">
|
||||
<span class="icon icon--hash"></span>
|
||||
{{#if job.id}}
|
||||
{{#if job.repo.slug}}
|
||||
{{#link-to "job" repo job}}{{number}}{{/link-to}}
|
||||
{{number}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</p>
|
||||
<p class="columns small-6 medium-4 large-3 tile-single-line" {{bind-attr title="startedAt"}}>
|
||||
|
||||
<p {{bind-attr class=":job-os :build-os config.os"}}>
|
||||
<span {{bind-attr class=":icon config.os"}}></span>
|
||||
{{config.os}}
|
||||
</p>
|
||||
|
||||
{{#if view.languages}}
|
||||
<p class="job-lang build-lang">
|
||||
<span class="icon icon--lang"></span>
|
||||
{{view.languages}}
|
||||
</p>
|
||||
{{else}}
|
||||
<p class="job-lang build-lang is-empty">
|
||||
<span class="icon icon--lang"></span>
|
||||
no language set
|
||||
</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if config.env}}
|
||||
<p class="job-env build-env">
|
||||
<span class="icon icon--env"></span>
|
||||
{{config.env}}
|
||||
</p>
|
||||
{{else}}
|
||||
<p class="job-lang build-lang is-empty">
|
||||
<span class="icon icon--env"></span>
|
||||
no environments set
|
||||
</p>
|
||||
{{/if}}
|
||||
|
||||
<p class="job-duration" {{bind-attr title="startedAt"}}>
|
||||
<span class="icon icon--clock"></span>
|
||||
{{format-duration duration}}
|
||||
</p>
|
||||
<p class="columns small-6 medium-5 large-5 tile-single-line" {{bind-attr title="formattedFinishedAt"}}>
|
||||
|
||||
{{!-- <p class="" {{bind-attr title="formattedFinishedAt"}}>
|
||||
<span class="icon icon--cal"></span>
|
||||
{{format-time finishedAt}}
|
||||
</p>
|
||||
<p {{bind-attr class=":columns :small-6 :medium-1 :large-1 :tile-single-line :build-os config.os"}}><span {{bind-attr class=":icon config.os"}}></span>{{config.os}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</p> --}}
|
||||
|
||||
{{/link-to}}
|
||||
</div>
|
||||
{{/view}}
|
||||
{{job.configKeys}}
|
||||
{{!-- {{job.configKeys}} --}}
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user