suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

expand job env on hover and hide duration

Browse Source
This commit is contained in:
Lisa Passing 2015-03-18 12:14:12 +01:00
parent 69d6f9e8a1
commit c32f4a1c83
2 changed files with 42 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/styles/app/layouts/build-job.sass
View File

@ -3,19 +3,22 @@
color: $color color: $color
&:hover &:hover
background-color: $color-bg background-color: $color-bg
// .job-env, .job-env,
.job-lang .job-lang
background-color: $color-bg
&:after &:after
@include fadeOut(right, -90deg, $color-bg) @include fadeOut(right, -90deg, $color-bg)
.job-anchor
position: relative
// job matrix // job matrix
.tile--jobs .tile--jobs
padding: 0.5em 0.4em 0.4em 3.5rem padding: 0.5em 0.4em 0.4em 3.5rem
margin-bottom: 0.35rem margin-bottom: 0.35rem
p
@media #{$medium-up} white-space: normal
height: 38px
a a
color: $grey1 color: $grey1
.tile-status--job .tile-status--job
@ -35,6 +38,9 @@
width: 1.1em width: 1.1em
@media #{$medium-up} @media #{$medium-up}
height: 38px
p
white-space: nowrap
.icon--lang, .icon--lang,
.icon--env .icon--env
margin-right: .4em margin-right: .4em
@ -56,11 +62,20 @@
// max-width: 180px // max-width: 180px
&:after &:after
@include fadeOut(right, -90deg, $cream-light) @include fadeOut(right, -90deg, $cream-light)
.job-anchor
width: grid-calc(14, 24)
.job-env .job-env
width: grid-calc(8, 24) width: grid-calc(14, 24)
// max-width: 395px // max-width: 395px
&:after
@include fadeOut(right, -90deg, $cream-light)
&:hover
position: absolute
width: 100%
z-index: 999
.job-duration .job-duration
width: grid-calc(6, 24) width: grid-calc(9, 24)
max-width: 165px max-width: 165px
float: right float: right
@ -68,15 +83,10 @@
.job-id .job-id
width: grid-calc(2, 24) width: grid-calc(2, 24)
.job-os .job-os
width: grid-calc(1, 24)
margin: 0 1em margin: 0 1em
.job-lang .job-lang
width: grid-calc(4, 24) width: grid-calc(4, 24)
margin-right: 2em margin-right: 2em
.job-env
width: grid-calc(10, 24)
.job-duration
width: grid-calc(4, 24)
&.failed, &.failed,
&.errored &.errored

33
app/templates/jobs.hbs
View File

@ -31,23 +31,24 @@
{{/if}} {{/if}}
</p> </p>
<p {{bind-attr class=":job-os :jobs-item :build-os config.os"}}> <p {{bind-attr class=":job-os :jobs-item :build-os config.os"}}>
<span {{bind-attr class=":icon config.os"}}></span> <span {{bind-attr class=":icon config.os"}}></span>
{{!-- {{config.os}} --}} {{!-- {{config.os}} --}}
</p>
{{#if view.languages}}
<p class="job-lang jobs-item build-lang">
<span class="icon icon--lang"></span>
{{view.languages}}
</p> </p>
{{else}}
<p class="job-lang jobs-item build-lang is-empty">
<span class="icon icon--lang"></span>
no language set
</p>
{{/if}}
{{#if view.languages}} <div class="job-anchor jobs-item">
<p class="job-lang jobs-item build-lang">
<span class="icon icon--lang"></span>
{{view.languages}}
</p>
{{else}}
<p class="job-lang jobs-item build-lang is-empty">
<span class="icon icon--lang"></span>
no language set
</p>
{{/if}}
{{#if config.env}} {{#if config.env}}
<p class="job-env jobs-item build-env"> <p class="job-env jobs-item build-env">
<span class="icon icon--env"></span> <span class="icon icon--env"></span>
@ -65,6 +66,8 @@
{{format-duration duration}} {{format-duration duration}}
</p> </p>
</div>
{{!-- <p class="" {{bind-attr title="formattedFinishedAt"}}> {{!-- <p class="" {{bind-attr title="formattedFinishedAt"}}>
<span class="icon icon--cal"></span> <span class="icon icon--cal"></span>
{{format-time finishedAt}} {{format-time finishedAt}}