add component for landing page builds + styles
This commit is contained in:
Lisa P
parent
a6ca21f03d
commit
e4e29ff418
12
app/components/landing-row.coffee
Normal file
12
app/components/landing-row.coffee
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
`import Ember from 'ember'`
|
||||
`import { githubCommit as githubCommitUrl } from 'travis/utils/urls'`
|
||||
`import TravisRoute from 'travis/routes/basic'`
|
||||
`import config from 'travis/config/environment'`
|
||||
|
||||
LandingRowComponent = Ember.Component.extend
|
||||
|
||||
tagName: 'li'
|
||||
classNameBindings: ['repo.lastBuildState']
|
||||
classNames: ['landing-row', 'row-li']
|
||||
|
||||
`export default LandingRowComponent`
|
||||
|
|
@ -7,7 +7,7 @@ Route = TravisRoute.extend
|
|||
filter: { replace: true }
|
||||
model: ->
|
||||
apiEndpoint = config.apiEndpoint
|
||||
$.ajax(apiEndpoint + '/v3/repos?repository.active=true&include=user.repositories,organization.repositories,build.commit', {
|
||||
$.ajax(apiEndpoint + '/v3/repos?repository.active=true&include=build.commit', {
|
||||
headers: {
|
||||
Authorization: 'token ' + @auth.token()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -462,41 +462,17 @@
|
|||
overflow: auto
|
||||
transform: translateY(7%)
|
||||
|
||||
|
||||
.tiles-landing
|
||||
.db
|
||||
padding: .4em 0
|
||||
background-color: $white
|
||||
border-radius: 4px
|
||||
p
|
||||
font-size: $font-size-m
|
||||
line-height: 1.6
|
||||
color: #828282
|
||||
.db-controls
|
||||
padding-left: 3.7rem
|
||||
.icon
|
||||
width: 1em
|
||||
height: 1.1em
|
||||
.icon-branch
|
||||
width: 1.2em
|
||||
height: .7em
|
||||
.db-status
|
||||
.icon
|
||||
width: 1.2em
|
||||
height: 1.2em
|
||||
.db-repo
|
||||
padding-left: 3.7rem
|
||||
h2
|
||||
font-size: 22px
|
||||
line-height: 25px
|
||||
margin-bottom: .5em
|
||||
.db-job, .db-branch, .db-commit, .db-timeago
|
||||
padding-left: 1.4em
|
||||
.db-job a
|
||||
color: #828282 !important
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
.landing-page
|
||||
.navigation-nested
|
||||
background-color: $white
|
||||
|
||||
.landing-rows
|
||||
list-style: none
|
||||
margin: 0
|
||||
|
||||
.landing-row
|
||||
.two-line
|
||||
padding-left: 2rem
|
||||
h2
|
||||
padding-left: .5rem
|
||||
font-size: 18px
|
||||
|
|
|
|||
|
|
@ -18,6 +18,14 @@
|
|||
color: $grey-dark
|
||||
background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat
|
||||
|
||||
h2, h3
|
||||
margin: 0
|
||||
font-weight: $font-weight-normal
|
||||
font-size: 16px
|
||||
|
||||
.row-header
|
||||
width: 100%
|
||||
|
||||
.row-item
|
||||
margin: .2em
|
||||
font-size: 16px
|
||||
|
|
@ -30,10 +38,7 @@
|
|||
text-decoration: none
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
h2, h3
|
||||
margin: 0
|
||||
font-weight: $font-weight-normal
|
||||
font-size: 16px
|
||||
|
||||
@media #{$medium-up}
|
||||
display: inline-block
|
||||
padding-left: 0
|
||||
|
|
@ -79,4 +84,4 @@
|
|||
@include statusColors(#bfb502, 'queued', #e5da3f)
|
||||
@include statusColors(#bfb502, 'booting', #e5da3f)
|
||||
@include statusColors(#bfb502, 'received', #e5da3f)
|
||||
@include statusColors(#bfb502, 'created', #e5da3f)
|
||||
@include statusColors(#bfb502, 'created', #e5da3f)
|
||||
|
|
|
|||
108
app/templates/components/landing-row.hbs
Normal file
108
app/templates/components/landing-row.hbs
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
|
||||
<div class="two-line row-header fade-out">
|
||||
<div class="row-name row-color">
|
||||
<h3>{{#link-to "owner" repo.owner}}
|
||||
{{status-icon status=repo.lastBuildState}}
|
||||
<span class="label-align">{{repo.owner}}</span>{{/link-to}}
|
||||
</h3>
|
||||
<h2>{{#link-to "repo" repo.owner repo.name}}
|
||||
<span class="label-align">{{repo.name}}</span>
|
||||
{{/link-to}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-line">
|
||||
<div class="row-number">
|
||||
<div class="row-item row-color">
|
||||
{{#link-to "build" repo repo.lastBuildId}}
|
||||
<span class="icon">
|
||||
<svg version="1.1" id="Layer_1" x="0px" y="0px"
|
||||
viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
|
||||
<path fill="#A5ACAD" class="st0" d="M-272.4,198.4C-272.4,198.4-272.4,198.4-272.4,198.4l-3.4,0l0.3-3.3c0-0.3-0.2-0.6-0.5-0.6
|
||||
c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.4l-3.2,0l0.3-3.6c0-0.3-0.2-0.6-0.5-0.6c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.7l-3.2,0
|
||||
c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5c0,0,0,0,0,0l3.1,0l-0.2,2.9l-3.5,0c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5
|
||||
c0,0,0,0,0,0l3.4,0l-0.3,3.3c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.4l3.2,0l-0.3,3.6
|
||||
c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.7l3.2,0c0.3,0,0.5-0.2,0.5-0.6c0-0.3-0.2-0.5-0.5-0.5c0,0,0,0,0,0
|
||||
l-3.1,0l0.2-2.9l3.5,0c0.3,0,0.5-0.2,0.5-0.6C-271.8,198.7-272.1,198.4-272.4,198.4z M-277.2,202.4l-3.2,0l0.2-2.9l3.2,0
|
||||
L-277.2,202.4z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="label-align">
|
||||
{{repo.lastBuildNumber}} {{repo.lastBuildState}}</span>
|
||||
{{/link-to}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-calendar">
|
||||
<div class="row-item" title="{{repo.lastBuildFinishedAt}}">
|
||||
<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="label-align">
|
||||
{{landing-page-last-build-time repo.lastBuildFinishedAt}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-line">
|
||||
<div class="row-commit">
|
||||
<div class="row-item">
|
||||
<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="label-align">
|
||||
{{format-sha repo.lastBuild.commit.sha}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-commiter">
|
||||
<div class="row-item">
|
||||
<span class="icon">
|
||||
<svg version="1.1" id="Layer_1" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<g id="Push">
|
||||
<path fill="#A7AEAE" d="M16.9,9.4h-3.5c-0.3-1.6-1.7-2.8-3.4-2.8S6.9,7.8,6.6,9.4H3.1c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h3.5
|
||||
c0.3,1.6,1.7,2.8,3.4,2.8s3.1-1.2,3.4-2.8h3.5c0.3,0,0.6-0.3,0.6-0.6S17.2,9.4,16.9,9.4z M10,12.2c-1.2,0-2.2-1-2.2-2.2
|
||||
c0-1.2,1-2.2,2.2-2.2c1.2,0,2.2,1,2.2,2.2c0,0,0,0,0,0c0,0,0,0,0,0C12.2,11.2,11.2,12.2,10,12.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</span><span class="label-align">{{repo.lastBuild.commit.branch}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -51,35 +51,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="medium-6 columns">
|
||||
<ul class="tiles-landing">
|
||||
<ul class="landing-rows">
|
||||
{{#each repos as |repo|}}
|
||||
<li class="db column {{repo.lastBuild.state}}">
|
||||
<div class="db-status">
|
||||
<span class="icon icon-status {{repo.lastBuild.state}}"></span>
|
||||
</div>
|
||||
<div class="db-repo column">
|
||||
<h3>{{repo.owner}}</h3>
|
||||
<h2>{{#link-to "repo" repo}}{{repo.name}}{{/link-to}}</h2>
|
||||
</div>
|
||||
<div class="db-controls column end">
|
||||
<p class="db-job column medium-6">
|
||||
{{#link-to "build" repo repo.lastBuild.id}}
|
||||
<span class="icon icon-hash"></span>
|
||||
{{repo.lastBuild.number}}
|
||||
{{repo.lastBuild.state}}
|
||||
{{/link-to}}
|
||||
</p>
|
||||
<p class="db-commit column medium-6">
|
||||
<span class="icon icon-github"></span>
|
||||
{{format-sha repo.lastBuild.commit.sha}}</p>
|
||||
<p class="db-timeago column medium-6">
|
||||
<span class="icon icon-cal"></span>
|
||||
{{landing-page-last-build-time repo.lastBuild.finishedAt}}</p>
|
||||
<p class="db-branch column medium-6">
|
||||
<span class="icon icon-branch"></span>
|
||||
{{repo.lastBuild.branch}}</p>
|
||||
</div>
|
||||
</li>
|
||||
{{landing-row repo=repo}}
|
||||
{{else}}
|
||||
{{loading-indicator}}
|
||||
{{/each}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user