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

refactor new styles

Browse Source
This commit is contained in:
Lisa P 2015-09-29 18:15:29 +02:00
parent 6e7a27da87
commit 3a366a234a
13 changed files with 201 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/branch-row.coffee
View File

@ -8,7 +8,7 @@ BranchRowComponent = Ember.Component.extend
routing: Ember.inject.service('-routing')
tagName: 'li'
classNameBindings: ['build.last_build.state']
classNames: ['branch-row']
classNames: ['branch-row', 'row-li']
isLoading: false
isTriggering: false
hasTriggered: false

2
app/components/dashboard-row.coffee
View File

@ -6,7 +6,7 @@ DashboardRowComponent = Ember.Component.extend
tagName: 'li'
classNameBindings: ['repo.default_branch.last_build.state']
classNames: ['dashboard-row']
classNames: ['dashboard-row', 'row-li']
isLoading: false
isTriggering: false
hasTriggered: false

2
app/components/owner-repo-tile.coffee
View File

@ -3,7 +3,7 @@
OwnerRepoTileComponent = Ember.Component.extend
tagName: 'li'
classNames: ['owner-tile']
classNames: ['owner-tile', 'row-li']
classNameBindings: ['repo.default_branch.last_build.state']
ownerName: (->

1
app/controllers/dashboard/repositories.coffee
View File

@ -12,7 +12,6 @@ Controller = Ember.Controller.extend
org = @get('org')
repos = repos.filter (item, index) ->
console.log(item)
item.get('default_branch.last_build') != null
.sortBy('default_branch.last_build.finished_at')
.reverse()

1
app/styles/app.scss
View File

@ -24,6 +24,7 @@
@import "app/animation/tractor";
@import "app/modules/row";
@import "app/modules/loader";
@import "app/modules/tiles";
@import "app/modules/buttons";

15
app/styles/app/_mixins/mixins.sass
View File

@ -29,17 +29,6 @@
padding: 0
list-style: none
%border-radius-4px
border-radius: 4px
%border-top-4px
border-top-left-radius: 4px
border-top-right-radius: 4px
%border-bottom-4px
border-bottom-left-radius: 4px
border-bottom-right-radius: 4px
%absolute-center
position: absolute
top: 0
@ -66,7 +55,6 @@
font-weight: 400
// @todo simplyfiy coloring mixins
@mixin colorStatusIcons($color, $status)
@ -92,7 +80,8 @@
&.#{$status}
background: linear-gradient(to right, $color2 0%, $color2 9px, white 9px, white 100%) no-repeat
.row-name,
.row-request a
.row-request a,
.row-color a
color: $color
&:hover
border-color: $color

67
app/styles/app/layouts/branches.sass
View File

@ -4,19 +4,6 @@
margin: 1.5em 0 0.7em
.branch-row
border: 1px solid $cream-dark
font-size: 16px
text-align: right
margin-bottom: .3rem
color: $grey-dark
background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat
.icon
width: 1.3em
height: 1.3em
margin-right: .2em
display: inline-block
vertical-align: middle
.avatar
display: inline-block
@ -27,21 +14,10 @@
vertical-align: middle
background-color: #E9EBEB
.row-item
margin: .2em
font-size: 16px
font-weight: $font-weight-normal
white-space: nowrap
overflow: hidden
a
color: $grey-dark
text-decoration: none
&:hover
text-decoration: underline
@media #{$medium-up}
& > div:first-of-type
width: 30%
padding-left: 1em
& > div:nth-of-type(2)
width: 20%
& > div:nth-of-type(3)
@ -50,6 +26,7 @@
// width: 5%
& > div:nth-of-type(4)
width: 28%
float: right
@media #{$large-up}
& > div:nth-of-type(2)
width: 21%
@ -60,42 +37,6 @@
& > div:nth-of-type(4)
width: 25%
@include statusColors($green-dark, 'passed')
@include statusColors($red-dark, 'failed')
@include statusColors($red-dark, 'errored')
@include statusColors($grey-medium, 'canceled')
@include statusColors(#bfb502, 'started', #e5da3f)
@include statusColors(#bfb502, 'queued', #e5da3f)
@include statusColors(#bfb502, 'booting', #e5da3f)
@include statusColors(#bfb502, 'received', #e5da3f)
@include statusColors(#bfb502, 'created', #e5da3f)
%row-element
vertical-align: middle
@media #{$medium-up}
display: inline-block
.row-item
vertical-align: middle
.two-line
@extend %row-element
padding: .4em 0
margin-left: 2em
text-align: left
@media #{$medium-up}
margin-left: 0
.one-line
@extend %row-element
.row-item
display: inline-block
.row-nav
display: none
text-align: center
@media #{$medium-up}
display: block
.row-last-build
@media #{$medium-up}
padding-left: 1em
@ -222,10 +163,6 @@
path
fill: $teal-dark
.label-align
vertical-align: middle
line-height: 1.5
// @todo refactor to status-icon module
.status-icon
.is-rotating

81
app/styles/app/layouts/dashboard.sass
View File

@ -1,20 +1,3 @@
.fade-out
@media #{$medium-up}
white-space: nowrap
position:relative
overflow: hidden
&:after
content: ""
@include fadeOut(right, -90deg, $white, 30%)
@mixin colorDashboardTiles($color, $status, $color2: $color)
&.#{$status}
.row-request
color: $color
.row-name a,
.row-request a
color: $color
.dashboard
.centered
@ -33,51 +16,20 @@
margin: 3rem 0 5rem
list-style-type: none
.dashboard-active li
border: 1px solid $cream-dark
font-size: 16px
text-align: left
margin-bottom: .3rem
color: $grey-dark
background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 9px, white 100%) no-repeat
.icon
width: 1.3em
height: 1.3em
margin-right: .2em
display: inline-block
vertical-align: middle
h2, h3
margin: 0
font-weight: $font-weight-normal
h3
font-size: 16px
h2
font-size: 18px
.one-line
margin-left: 2em
text-align: left
.two-line
padding: .1em 0
.row-item
margin: .2em
font-size: 16px
font-weight: $font-weight-normal
white-space: nowrap
overflow: hidden
a
color: $grey-dark
text-decoration: none
&:hover
text-decoration: underline
.row-item h2
font-size: 18px
@media #{$medium-up}
& > div:first-of-type
width: 28%
width: 30%
position: relative
padding-left: 1em
&:after
@ -100,26 +52,3 @@
li
border: none
transform: translate(-19%, -170%)
@include statusColors($green-dark, 'passed')
@include statusColors($red-dark, 'failed')
@include statusColors($red-dark, 'errored')
@include statusColors($grey-medium, 'canceled')
@include statusColors(#bfb502, 'started', #e5da3f)
@include statusColors(#bfb502, 'queued', #e5da3f)
@include statusColors(#bfb502, 'booting', #e5da3f)
@include statusColors(#bfb502, 'received', #e5da3f)
@include statusColors(#bfb502, 'created', #e5da3f)
@include colorDashboardTiles($green-dark, 'passed')
@include colorDashboardTiles($red-dark, 'failed')
@include colorDashboardTiles($red-dark, 'errored')
@include colorDashboardTiles($grey-medium, 'canceled')
@include colorDashboardTiles(#bfb502, 'started', #e5da3f)
@include colorDashboardTiles(#bfb502, 'queued', #e5da3f)
@include colorDashboardTiles(#bfb502, 'booting', #e5da3f)
@include colorDashboardTiles(#bfb502, 'received', #e5da3f)
@include colorDashboardTiles(#bfb502, 'created', #e5da3f)

92
app/styles/app/layouts/owner.sass
View File

@ -82,87 +82,21 @@
padding: 0
list-style-type: none
%one-line
font-size: 16px
font-weight: 400
vertical-align: middle
margin: 0
display: inline-block
*
display: inline-block
font-size: inherit
font-weight: 400
vertical-align: middle
margin: 0
padding: 0
line-height: 1
.owner-tile
padding: .8em 0 .8em 2em
margin-bottom: .5em
border: #F2F0F0 solid 1px
a
text-decoration: none
&:hover
span
text-decoration: underline
.repo-title a:hover
text-decoration: underline
.icon
width: 1.3em
height: 1.1em
.build-status
text-transform: capitalize
.repo
@extend %one-line
white-space: nowrap
width: grid-calc(9, 12)
.build
@extend %one-line
width: grid-calc(5, 12)
.branch
@extend %one-line
width: grid-calc(6, 12)
.commit
@extend %one-line
width: grid-calc(6, 12)
.duration
@extend %one-line
width: grid-calc(12, 12)
.owner-tile
padding: .4em 0 .3em
@media #{$medium-up}
display: flex
flex-direction: row
flex-flow: space-between
align-items: baseline
height: 3.8em
padding: .8em 0
.build
width: grid-calc(2, 12)
.branch
width: grid-calc(2, 12)
.commit
width: grid-calc(2, 12)
.duration
width: grid-calc(4, 12)
.repo
width: grid-calc(4, 12)
margin-left: 2em
@include statusColors($green-dark, 'passed')
@include statusColors($red-dark, 'failed')
@include statusColors($red-dark, 'errored')
@include statusColors($grey-medium, 'canceled')
@include statusColors(#ECCE4B, 'started')
@include statusColors(#ECCE4B, 'queued')
@include statusColors(#ECCE4B, 'booting')
@include statusColors(#ECCE4B, 'received')
@include statusColors(#ECCE4B, 'created')
& > div:first-of-type
width: 30%
padding-left: 1em
& > div:nth-of-type(2)
width: 10%
& > div:nth-of-type(3)
width: 15%
& > div:nth-of-type(4)
width: 15%
& > div:nth-of-type(5)
width: 25%

79
app/styles/app/modules/row.sass Normal file
View File

@ -0,0 +1,79 @@
.fade-out
@media #{$medium-up}
white-space: nowrap
position:relative
overflow: hidden
&:after
content: ""
@include fadeOut(right, -90deg, $white, 30%)
.label-align
vertical-align: middle
line-height: 1.5
.row-li
border: 1px solid $cream-dark
font-size: 16px
margin-bottom: .3rem
color: $grey-dark
background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat
.row-item
display: inline-block
margin: .2em
font-size: 16px
font-weight: $font-weight-normal
white-space: nowrap
overflow: hidden
a
color: $grey-dark
text-decoration: none
&:hover
text-decoration: underline
h2, h3
margin: 0
font-weight: $font-weight-normal
font-size: 16px
%row-element
vertical-align: middle
@media #{$medium-up}
display: inline-block
.row-item
vertical-align: middle
.two-line
@extend %row-element
padding: .4em 0
margin-left: 2em
text-align: left
@media #{$medium-up}
margin-left: 0
.one-line
@extend %row-element
.row-item
display: inline-block
.row-nav
display: none
text-align: center
@media #{$medium-up}
display: block
.icon
width: 1.3em
height: 1.3em
margin-right: .2em
display: inline-block
vertical-align: middle
@include statusColors($green-dark, 'passed')
@include statusColors($red-dark, 'failed')
@include statusColors($red-dark, 'errored')
@include statusColors($grey-medium, 'canceled')
@include statusColors(#bfb502, 'started', #e5da3f)
@include statusColors(#bfb502, 'queued', #e5da3f)
@include statusColors(#bfb502, 'booting', #e5da3f)
@include statusColors(#bfb502, 'received', #e5da3f)
@include statusColors(#bfb502, 'created', #e5da3f)

2
app/templates/components/branch-row.hbs
View File

@ -33,7 +33,7 @@
</div>
</div>
</div>
<div class="two-line row-last-build">
<div class="two-line row-last-build fade-out">
<div class="row-request">
<div class="row-item">
{{#if build.last_build}}

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

@ -1,6 +1,6 @@
<div class="two-line fade-out">
<div class="row-name row-item">
<div class="row-name row-item row-color">
<h3>{{#link-to "owner" repo.owner.login}}{{status-icon status=repo.default_branch.last_build.state}} {{repo.owner.login}}{{/link-to}}</h3>
<h2>{{#link-to "repo" repo.owner.login repo.name}}<span class="label-align">{{repo.name}}</span>{{/link-to}}</h2>
</div>

26
app/templates/components/owner-repo-tile.hbs
View File

@ -1,7 +1,8 @@
{{!-- {{#if repo.private }}
<div class="tile-lock"><span class="icon icon-lock"></span></div>
{{/if}} --}}
<div class="repo fade-out">
<div class="row-item fade-out">
<div clas="one-line">
<h2 class="repo-title">
{{status-icon status=repo.default_branch.last_build.state}}
{{#link-to "repo" ownerName repoName }}
@ -9,8 +10,10 @@
{{/link-to}}
</h2>
</div>
</div>
{{#if repo.default_branch.last_build}}
<div class="build">
<div class="row-item">
<div class="one-line">
{{#link-to "build" ownerName repoName repo.default_branch.last_build.id}}
<span class="icon">
<svg version="1.1" id="Layer_1" x="0px" y="0px"
@ -24,15 +27,20 @@
L-277.2,202.4z"/>x
</svg>
</span>
<span>{{repo.default_branch.last_build.number}}</span>
<span class="label-align">{{repo.default_branch.last_build.number}}</span>
{{/link-to}}
</div>
<div class="branch fade-out">
</div>
<div class="row-item fade-out">
<div class="one-line">
{{request-icon build=repo.default_branch.last_build}}
<span class="label-align">{{repo.default_branch.name}}</span>
</div>
<div class="commit">
</div>
<div class="row-item">
<div class="one-line">
<a href="{{repo.default_branch.last_build.commit.compare_url}}">
<span class="icon">
<svg x="0px" y="0px" viewBox="2 0 20 20" xml:space="preserve">
@ -63,7 +71,10 @@
<span class="label-align">{{format-sha repo.default_branch.last_build.commit.sha}}</span>
</a>
</div>
<div class="duration">
</div>
<div class="row-item fade-out">
<div class="one-line">
<span class="icon">
<svg viewBox="0 0 20 20">
<g id="Cal">
@ -83,6 +94,7 @@
<span class="build-status label-align">{{repo.default_branch.last_build.state}}</span>
<span class="finished-at label-align">{{format-time repo.default_branch.last_build.finished_at}}</span>
</div>
</div>
{{else}}
<p>there is no build</p>
{{/if}}