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

style requests

Browse Source 
some spacing tweaks

implement Justine's feedback
This commit is contained in:
Lisa P 2015-11-30 18:12:10 +01:00
parent 3fa79819dd
commit 495c3b50f8
11 changed files with 96 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/requests-item.coffee
View File

@ -2,7 +2,7 @@
`import config from 'travis/config/environment'`
RequestsItemComponent = Ember.Component.extend
classNames: ['tile', 'tile--jobs', 'row']
classNames: ['request-item']
classNameBindings: ['requestClass']
tagName: 'li'

4
app/components/status-icon.coffee
View File

@ -7,11 +7,11 @@ StatusIconComponent = Ember.Component.extend
classNameBindings: ['status']
hasPassed: (->
@get('status') == 'passed'
@get('status') == 'passed' || @get('status') == 'accepted'
).property('status')
hasFailed: (->
@get('status') == 'failed'
@get('status') == 'failed' || @get('status') == 'rejected'
).property('status')
hasErrored: (->

1
app/styles/app/layouts/pull-requests.sass
View File

@ -18,6 +18,7 @@
.row-committer
padding-left: 1.6em
margin-bottom: 0
.row-message
margin-bottom: .5em

11
app/styles/app/layouts/repo.sass
View File

@ -4,9 +4,11 @@
font-weight: $font-weight-normal
a
color: #808080
border-bottom: 2px solid transparent
transition: border-color 100ms ease
&:hover,
&:active
text-decoration: underline
border-color: #808080
.repo-header
header
@ -48,7 +50,6 @@ $dropdown-button-margin: -9px
display: block
height: $dropdown-button-height
padding: 0 0.7em 0 2.3em
margin-top: $dropdown-button-margin
background:
color: white
repeat: no-repeat
@ -79,6 +80,8 @@ $dropdown-button-margin: -9px
@extend %icon-line-cog-teal
&:after
@extend %icon-line-dropdown-teal
@media #{$medium-up}
margin-top: $dropdown-button-margin
.settings-dropdown
display: none
@ -86,7 +89,7 @@ $dropdown-button-margin: -9px
top: $dropdown-button-height + ($dropdown-button-margin * .8)
width: 100%
padding: 0
margin: -1px 0 0
margin: 6px 0 0
list-style: none
z-index: 60
background-color: white
@ -99,6 +102,8 @@ $dropdown-button-margin: -9px
&:hover
color: white
background-color: $teal
@media #{$medium-up}
margin-top: -3px
.settings-menu
position: relative

106
app/styles/app/layouts/requests.sass
View File

@ -1,58 +1,62 @@
@mixin colorRequests($color-bg)
&:hover
background-color: $color-bg
.requests-commit,
.requests-branch,
.requests-message,
.requests-time
&:after
@include fadeOut(right, -90deg, $color-bg, 30%)
=requestFadeOut($status, $color)
@media #{$medium-up}
&.#{$status}:hover
.fade-out
&:after
@include fadeOut(right, -90deg, $color)
.requests
@include resetul
padding: 0
margin: 0
list-style: none
.accepted:hover
@include colorRequests(#e5efe4)
.rejected:hover
@include colorRequests(#fbebe6)
.request-item
border: 1px solid $cream-dark
margin-bottom: 5px
font-size: 15px
padding-left: 1em
@include colorJobs($green, 'accepted', 6px, rgba($green, .1))
@include colorJobs($red, 'rejected', 6px, rgba($red, .1))
margin-top: 2.5rem
color: #969496
a:hover
@include requestFadeOut('accepted',#ECF6EF)
@include requestFadeOut('rejected', #FBECEB)
strong
font-weight: $font-weight-bold
margin-right: .5em
.status-icon
width: 1.3em
height: 1.3em
vertical-align: middle
a:hover,
a:active
text-decoration: underline
.requests-commit,
.requests-branch,
.requests-message,
.requests-time
position: relative
&:after
content: ""
@include fadeOut(right, -90deg, $cream-light, 30%)
.requests-time
@media #{$medium-up}
padding-left: 2em
border-left: 1px solid $cream-dark
.tile--jobs
padding-left: 2.5em
.icon.push
width: 1.2em
height: .8em
.icon.pull_request
height: 1.5em
@media #{$medium-up}
.requests-time
width: grid-calc(4, 24)
.requests-branch
width: grid-calc(4, 24)
.requests-commit
width: grid-calc(9, 24)
.requests-build
width: grid-calc(2, 24)
.requests-message
width: grid-calc(5, 24)
display: flex
justify-content: space-between
flex-flow: row wrap
align-items: center
padding: .3em 0
white-space: nowrap
.row-item
overflow: hidden
.row-item:first-of-type
flex: 0 0 3em
padding-left: .7em
border-right: 1px solid $cream-dark
.row-item:nth-of-type(2)
flex: 1 0 15%
padding-left: 1em
.row-item:nth-of-type(3)
flex: 0 0 15%
.row-item:nth-of-type(4)
flex: 1 0 30%
.row-item:nth-of-type(5)
flex: 0 0 8%
.row-item:last-of-type
flex: 0 0 20%

2
app/styles/app/misc.sass
View File

@ -29,5 +29,5 @@
.monospace
font-family: Monaco, monospace
font-size: 14px
font-size: 13px
line-height: 1

2
app/styles/app/modules/buttons.sass
View File

@ -176,7 +176,7 @@ $button-border-color: #d4d4d4
%log-button
display: inline-block
height: 28px
padding: 0 1.1em 0 2.3em
padding: 0 0.8em 0 2.3em
border: 1px solid #f1f1f1
color: #f1f1f1
border-radius: 2px

4
app/styles/app/modules/icons.sass
View File

@ -158,13 +158,13 @@
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560"><path fill="%23A7AEAE" d="M418.4 490c-8.4 0-14-5.6-14-14v-28c-11.2 0-28 2.8-39.2-2.8-11.2-2.8-36.4-14-50.4-47.6-2.8-5.6-8.4-11.2-11.2-16.8-2.8-2.8-5.6-8.4-8.4-11.2C284 358.4 284 336 292.4 322c8.4-11.2 19.6-14 33.6-8.4 19.6 5.6 30.8 25.2 39.2 36.4 2.8 2.8 2.8 5.6 5.6 5.6 11.2 11.2 28 8.4 39.2 2.8l8.4-8.4h-5.6c-19.6-2.8-36.4-11.2-53.2-19.6-5.6-5.6-16.8-11.2-22.4-19.6-8.4-8.4-14-19.6-19.6-33.6-2.8-14-5.6-25.2-8.4-39.2 0-11.2-2.8-25.2 0-39.2C312 182 317.6 168 326 154c2.8-2.8 2.8-5.6 5.6-8.4v-2.8c-2.8-8.4-2.8-16.8-2.8-28s2.8-22.4 8.4-33.6C340 72.8 345.6 70 354 70s22.4 2.8 33.6 8.4C398.8 84 410 89.6 421.2 98c14-2.8 28-5.6 44.8-5.6h56c14 0 28 2.8 39.2 5.6l5.6-2.8c5.6-2.8 14-8.4 19.6-11.2 11.2-5.6 19.6-8.4 30.8-8.4h8.4c8.4 0 14 2.8 16.8 11.2 5.6 16.8 11.2 33.6 5.6 56v2.8c0 2.8 0 5.6-2.8 8.4 14 16.8 19.6 36.4 22.4 58.8V238c0 14-2.8 28-5.6 39.2-5.6 14-11.2 28-19.6 39.2-8.4 11.2-19.6 16.8-28 22.4-16.8 8.4-33.6 16.8-50.4 19.6 5.6 11.2 8.4 22.4 8.4 36.4v89.6c0 8.4-5.6 14-14 14l-140-8.4zM536 350c-2.8-2.8-2.8-8.4-2.8-14 2.8-5.6 5.6-8.4 11.2-8.4h8.4c19.6-2.8 36.4-8.4 53.2-19.6 8.4-5.6 16.8-11.2 19.6-16.8 5.6-8.4 11.2-16.8 14-28 5.6-11.2 5.6-22.4 8.4-36.4v-19.6c-2.8-19.6-8.4-33.6-19.6-47.6-5.602-5.6-5.602-11.2-2.802-16.8 0-2.8 2.8-5.6 2.8-8.4v-2.8c2.8-11.2 0-22.4-2.8-33.6h-2.8c-5.6 0-14 2.8-19.6 5.6-5.6 2.8-11.2 5.6-19.6 11.2l-11.2 5.6c-2.8 2.8-8.4 2.8-11.2 2.8-14-2.8-25.2-5.6-39.2-5.6h-53.2c-16.8-2.8-30.8 0-44.8 5.6-2.8 0-8.4 0-14-2.8-11.2-8.4-22.4-14-33.6-19.6-5.6-2.8-11.2-2.8-16.8-2.8-2.8 5.6-2.8 14-2.8 19.6 0 8.4 0 14 2.8 19.6 0 2.8 0 2.8 2.8 5.6 2.8 5.6 0 11.2-2.8 14l-5.6 5.6c0 2.8-2.8 5.6-5.6 8.4-5.6 8.4-11.2 19.6-14 33.6-2.8 11.2 0 22.4 0 30.8 0 11.2 2.8 22.4 5.6 33.6 2.8 11.2 8.4 19.6 14 25.2 8.4 5.6 14 11.2 19.6 14 14 8.4 28 14 44.8 16.8 5.6 0 19.6 2.8 19.6 2.8 2.8 0 8.4 2.8 8.4 5.6 2.8 2.8 2.8 5.6 2.8 11.2 0 2.8-8.4 28-25.2 39.2-19.6 11.2-50.4 14-70-8.4l-8.4-8.4c-5.6-8.398-16.8-22.398-28-28h-2.8l-2.8 2.8c0 5.602 0 11.2 2.8 16.802 2.8 2.8 5.6 5.6 8.4 11.2 5.6 8.4 11.2 14 14 22.4 11.2 22.4 28 30.8 33.6 33.6 14 0 36.4-2.8 47.6-2.8-2.8 0-2.8 0 0 0s5.6 0 8.4 2.8c2.8 2.8 5.6 5.6 5.6 8.4v28H550v-75.6c0-11.2-2.8-19.602-5.6-28-2.8-5.602-2.8-8.402-5.6-8.402"/></svg>')
.icon-github
display: inline-block
width: 1em
width: 1.1em
height: 1.1em
margin-right: 0.3em
vertical-align: middle
background:
repeat: no-repeat
size: auto 23px
size: auto 21px
position: -9px -3px
@extend %icon-github

44
app/templates/components/dashboard-row.hbs
View File

@ -21,32 +21,7 @@
<div class="row-commit">
<div class="row-item">
<a href="{{urlGithubCommit}}" title="commit on GitHub">
<span class="icon">
<svg x="0px" y="0px" viewBox="2 0 20 20" xml:space="preserve">
<g id="Commit">
<path fill="#A7AEAE" d="M7.8,17.5c-0.3,0-0.5-0.2-0.5-0.5l0-1c-0.4,0-1,0.1-1.4-0.1c-0.4-0.1-1.3-0.5-1.8-1.7
c-0.1-0.2-0.3-0.4-0.4-0.6c-0.1-0.1-0.2-0.3-0.3-0.4C3,12.8,3,12,3.3,11.5c0.3-0.4,0.7-0.5,1.2-0.3c0.7,0.2,1.1,0.9,1.4,1.3
c0.1,0.1,0.1,0.2,0.2,0.2c0.4,0.4,1,0.3,1.4,0.1c0.1-0.1,0.2-0.2,0.3-0.3c-0.1,0-0.1,0-0.2,0c-0.7-0.1-1.3-0.4-1.9-0.7
c-0.2-0.2-0.6-0.4-0.8-0.7c-0.3-0.3-0.5-0.7-0.7-1.2C4.1,9.4,4,9,3.9,8.5c0-0.4-0.1-0.9,0-1.4C4,6.5,4.2,6,4.5,5.5
c0.1-0.1,0.1-0.2,0.2-0.3c0,0,0-0.1,0-0.1c-0.1-0.3-0.1-0.6-0.1-1c0-0.4,0.1-0.8,0.3-1.2C5,2.6,5.2,2.5,5.5,2.5
c0.3,0,0.8,0.1,1.2,0.3c0.4,0.2,0.8,0.4,1.2,0.7c0.5-0.1,1-0.2,1.6-0.2c0.4,0,1.6,0,2,0c0.5,0,1,0.1,1.4,0.2l0.2-0.1
c0.2-0.1,0.5-0.3,0.7-0.4c0.4-0.2,0.7-0.3,1.1-0.3c0.1,0,0.2,0,0.3,0c0.3,0,0.5,0.1,0.6,0.4c0.2,0.6,0.4,1.2,0.2,2l0,0.1
c0,0.1,0,0.2-0.1,0.3c0.5,0.6,0.7,1.3,0.8,2.1c0,0.3,0,0.6,0,0.9c0,0.5-0.1,1-0.2,1.4c-0.2,0.5-0.4,1-0.7,1.4
c-0.3,0.4-0.7,0.6-1,0.8c-0.6,0.3-1.2,0.6-1.8,0.7c0.2,0.4,0.3,0.8,0.3,1.3c0,0,0,0,0,0c0,0.8,0,3.2,0,3.2c0,0.3-0.2,0.5-0.5,0.5
L7.8,17.5L7.8,17.5z M7.8,15.1c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.2,0.2,0.2,0.3l0,1l4.2,0c0-0.7,0-2.1,0-2.7c0-0.4-0.1-0.7-0.2-1
c-0.1-0.2-0.1-0.3-0.2-0.3l0.3-0.4l0,0L12,12.5c-0.1-0.1-0.1-0.3-0.1-0.5c0.1-0.2,0.2-0.3,0.4-0.3l0.3,0c0.7-0.1,1.3-0.3,1.9-0.7
c0.3-0.2,0.6-0.4,0.7-0.6c0.2-0.3,0.4-0.6,0.5-1C15.9,9,15.9,8.6,16,8.1c0-0.2,0-0.5,0-0.7c-0.1-0.7-0.3-1.2-0.7-1.7
c-0.2-0.2-0.2-0.4-0.1-0.6c0-0.1,0.1-0.2,0.1-0.3l0-0.1c0.1-0.4,0-0.8-0.1-1.2c0,0,0,0-0.1,0c-0.2,0-0.5,0.1-0.7,0.2
c-0.2,0.1-0.4,0.2-0.7,0.4l-0.4,0.2c-0.1,0.1-0.3,0.1-0.4,0.1c-0.5-0.1-0.9-0.2-1.4-0.2c-0.4,0-1.5,0-1.9,0C9,4.1,8.5,4.2,8,4.4
c-0.1,0-0.3,0-0.5-0.1C7.1,4,6.7,3.8,6.3,3.6C6.1,3.5,5.9,3.5,5.7,3.5C5.6,3.7,5.6,4,5.6,4.2c0,0.3,0,0.5,0.1,0.7
c0,0.1,0,0.1,0.1,0.2c0.1,0.2,0,0.4-0.1,0.5L5.5,5.8C5.5,5.9,5.4,6,5.3,6.1C5.1,6.4,4.9,6.8,4.8,7.3c-0.1,0.4,0,0.8,0,1.1
c0,0.4,0.1,0.8,0.2,1.2c0.1,0.4,0.3,0.7,0.5,0.9C5.8,10.7,6,10.9,6.2,11c0.5,0.3,1,0.5,1.6,0.6c0.2,0,0.7,0.1,0.7,0.1
c0.1,0,0.3,0.1,0.3,0.2c0.1,0.1,0.1,0.2,0.1,0.4c0,0.1-0.3,1-0.9,1.4c-0.7,0.4-1.8,0.5-2.5-0.3c-0.1-0.1-0.2-0.2-0.3-0.3
c-0.2-0.3-0.6-0.8-1-1c-0.1,0-0.1,0-0.1,0c0,0,0,0-0.1,0.1c0,0.2,0,0.4,0.1,0.6c0.1,0.1,0.2,0.2,0.3,0.4c0.2,0.3,0.4,0.5,0.5,0.8
c0.4,0.8,1,1.1,1.2,1.2C6.6,15.2,7.4,15.1,7.8,15.1C7.7,15.1,7.7,15.1,7.8,15.1z"/>
</g>
</svg>
</span>
<span class="icon-github"></span>
<span class="label-align">
{{format-sha repo.default_branch.last_build.commit.sha}}
</span>
@ -58,22 +33,7 @@
<div class="one-line">
<div class="row-calendar">
<div class="row-item" title="{{repo.default_branch.last_build.finished_at}}">
<span class="icon">
<svg viewBox="0 0 20 20">
<g id="Cal">
<path fill="#A7AEAE" d="M16.7,2.5H3.3C3,2.5,2.8,2.7,2.8,3V17c0,0.3,0.2,0.5,0.5,0.5h13.4c0.3,0,0.5-0.2,0.5-0.5V3
C17.2,2.7,17,2.5,16.7,2.5z M16.2,3.4v3.1H3.8V3.4H16.2z M3.8,16.6v-9h12.5v9H3.8z"/>
<path fill="#A7AEAE" d="M8.7,13.4c-0.1,0-0.3,0-0.4,0c0.2-0.2,0.4-0.4,0.5-0.6c0.2-0.2,0.3-0.4,0.5-0.6c0.1-0.2,0.2-0.4,0.3-0.6
c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.3-0.3-0.4C9.2,10,9.1,9.9,8.9,9.8C8.7,9.7,8.5,9.7,8.3,9.7
C8,9.7,7.7,9.8,7.5,9.9C7.2,10,7,10.2,6.8,10.4L7.3,11c0.1-0.1,0.2-0.2,0.4-0.3c0.1-0.1,0.3-0.1,0.4-0.1c0.2,0,0.4,0.1,0.5,0.2
c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2,0,0.3-0.1,0.5c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.2-0.4,0.4-0.6,0.7c-0.2,0.2-0.5,0.5-0.8,0.8v0.6
H10v-0.9H9.1C9,13.4,8.8,13.4,8.7,13.4z"/>
<path fill="#A7AEAE" d="M10.6,10.7h2c-0.2,0.3-0.4,0.6-0.5,0.8c-0.1,0.3-0.3,0.6-0.4,0.8c-0.1,0.3-0.2,0.6-0.2,0.9
c0,0.3-0.1,0.7-0.1,1h1c0-0.4,0-0.8,0.1-1.2c0-0.3,0.1-0.7,0.2-0.9c0.1-0.3,0.2-0.6,0.4-0.9c0.2-0.3,0.4-0.6,0.6-0.9V9.8h-3.1
V10.7z"/>
</g>
</svg>
</span>
<span class="icon-calendar"></span>
<span class="label-align">
{{#if repo.default_branch.last_build}}
{{format-time repo.default_branch.last_build.finished_at}}

39
app/templates/components/requests-item.hbs
View File

@ -1,30 +1,35 @@
<div class="tile-status tile-status--job">
<span class="icon icon--job {{requestClass}}"></span>
<div class="row-item">
{{status-icon status=requestClass}}
</div>
<p class="jobs-item requests-time column">{{format-time request.created_at}}</p>
<p class="jobs-item requests-branch column">
<span class="icon icon--grey {{type}}"></span>
<div class="row-item fade-out {{requestClass}}">
{{request-icon event=request.event_type state=requestClass}}
{{#if request.isPullRequest}}
<strong>#{{request.pullRequestNumber}}</strong>
<strong class="label-align">#{{request.pullRequestNumber}}</strong>
{{else}}
<strong>{{request.branchName}}</strong>
<strong class="label-align">{{request.branchName}}</strong>
{{/if}}
{{github-commit-link request.repo.slug request.commit.sha}}
</p>
<span class="label-align">{{github-commit-link request.repo.slug request.commit.sha}}</span>
</div>
<p class="jobs-item requests-commit column">
<div class="row-item fade-out">
<span class="icon-calendar"></span>
<span class="label-align">{{format-time request.created_at}}</span></div>
<div class="row-item fade-out">
{{{format-message request.commit.message short="true" repoBinding=request.build.repo}}}
</p>
</div>
<p class="jobs-item requests-build column">
<div class="row-item">
{{#if request.build}}
<span class="icon icon-hash"></span>
{{#link-to "build" request.build}}
{{request.build.number}}{{/link-to}}
<span class="icon-hash"></span>
<span class="label-align">{{request.build.number}}</span>{{/link-to}}
{{else}}
-
{{/if}}
</p>
<p class="jobs-item requests-message column">{{message}}</p>
</div>
<div class="row-item fade-out">
<span class="label-align">{{message}}</span>
</div>

2
app/templates/requests.hbs
View File

@ -1,7 +1,7 @@
{{#if config.pro}}
<div class="travis-lint">
<p>Travis Lint for clean .yml files
<a href={{lintUrl}}>lint.travis-ci.org/{{repo.slug}}</a>
<a href={{lintUrl}} title="Travis WebLint">lint.travis-ci.org/{{repo.slug}}</a>
</p>
</div>
{{/if}}