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

rewrite tiles on landing and clean up css a bit

Browse Source
This commit is contained in:
Lisa Passing 2015-04-08 12:43:16 +02:00
parent 121859bf62
commit 986d59c70d
3 changed files with 114 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
app/styles/app/landing.sass
View File

@ -29,7 +29,7 @@
.wrapper.non-centered .topbar .wrapper.non-centered .topbar
background-color: #eff0ec background-color: #eff0ec
#landing .landing
margin: 0 auto 170px auto margin: 0 auto 170px auto
font-weight: 300 font-weight: 300
overflow: hidden overflow: hidden
@ -41,25 +41,24 @@
color: #8f9294 color: #8f9294
margin-bottom: 0 margin-bottom: 0
h2
font-size: 3.3em
line-height: 1.15em
font-weight: 300
color: #39a85b
p
font-color: #606162
font-size: 1.7em
font-weight: 300
.hero, .oss-testing, .customers, .recent-builds, .free-for-oss, .private-repos, .features-list, .build-flows, .user-testimonials .hero, .oss-testing, .customers, .recent-builds, .free-for-oss, .private-repos, .features-list, .build-flows, .user-testimonials
padding: 70px 0 70px 0 padding: 70px 0 70px 0
.hero, .oss-testing, .customers, .recent-builds-text, .free-for-oss, .private-repos, .features-list, .build-flows, .user-testimonials
h1, h2 h1, h2
margin-top: 0 margin-top: 0
h2
font-size: 3.3em
line-height: 1.15em
font-weight: 300
color: #39a85b
p p
line-height: 1.5em line-height: 1.5em
font-color: #606162
font-size: 1.7em
.hero.z-1 .hero.z-1
text-align: center text-align: center
@ -138,9 +137,10 @@
.recent-builds .recent-builds
background-color: #faf9f6 background-color: #faf9f6
text-align: center
min-height: 44rem min-height: 44rem
.recent-builds-text
text-align: center
h2 h2
color: #db4141 color: #db4141
text-align: right text-align: right
@ -173,95 +173,6 @@
padding: 10px 0 0 60px padding: 10px 0 0 60px
text-align: left text-align: left
.tile-status
position: absolute
top: 0
left: 0
bottom: 0
.owner, .name
display: block
.owner
font-size: 14px
line-height: 1.8em
.name
font-size: 22px
.state
display: inline-block
margin-left: 4px
.commit, .number, .branch, .finished-at
position: absolute
display: block
background-repeat: no-repeat
background-position: left center
padding-left: 23px
.number
left: 60px
top: 65px
background-image: inline-image('svg/build-number-icon.svg')
.commit
left: 251px
top: 65px
background-image: inline-image('svg/commit-icon.svg')
.branch
left: 250px
top: 90px
background-image: inline-image('dashboard/branch.svg')
background-size: 19px 19px
.finished-at
left: 60px
top: 90px
background-image: inline-image('svg/finished-icon.svg')
background-size: 19px 19px
&.started .tile-status,
&.created .tile-status,
&.received .tile-status,
&.queued .tile-status
background-color: $start-color
&.failed .tile-status
background-color: $fail-color
&.errored .tile-status
background-color: $error-color
&.canceled .tile-status
background-color: $cancel-color
&.passed .tile-status
background-color: $pass-color
&.inactive .tile-status
background-color: $cancel-color
&.started .owner,
&.started .name,
&.created .owner,
&.created .name,
&.received .owner,
&.received .name,
&.queued .owner,
&.queued .name
color: $start-color
&.failed .owner,
&.failed .name
color: $fail-color
&.errored .owner,
&.errored .name
color: $error-color
&.canceled .owner,
&.canceled .name
color: $cancel-color
&.passed .owner,
&.passed .name
color: $pass-color
&.inactive .owner,
&.inactive .name
color: $cancel-color
.free-for-oss .free-for-oss
text-align: center text-align: center
@ -432,8 +343,6 @@
.title .title
margin: 0 0 20px 0 margin: 0 0 20px 0
a a
font-size: 1.2em font-size: 1.2em
@ -552,3 +461,36 @@
position: relative position: relative
overflow: auto overflow: auto
transform: translateY(7%) transform: translateY(7%)
.tiles-landing
.db
padding: .4em 0
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
.db-job, .db-branch, .db-commit, .db-timeago
padding-left: 1.4em
.db-job a
color: #828282 !important
&:hover
text-decoration: underline

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

@ -44,6 +44,7 @@ $db-text-color: #ACAAAA
transform: translate(-20%, 18%) transform: translate(-20%, 18%)
.db .db
@include resetul
position: relative position: relative
margin-bottom: 1em margin-bottom: 1em
background: $white background: $white
@ -130,6 +131,12 @@ $db-text-color: #ACAAAA
z-index: 30 z-index: 30
overflow: hidden overflow: hidden
.db-branch
position: relative
&:after
content: ""
@include fadeOut(right, -90deg, $white)
.db-lock .db-lock
position: absolute position: absolute
left: -2.1em; left: -2.1em;

108
app/templates/home.hbs
View File

@ -1,4 +1,4 @@
<div id="landing"> <div id="landing" class="landing">
<div class="row hero z-1"> <div class="row hero z-1">
<div class="landing-centered-wrapper"> <div class="landing-centered-wrapper">
<div class="large-12 columns" id="hero-copy"> <div class="large-12 columns" id="hero-copy">
@ -37,27 +37,41 @@
<div class="row recent-builds"> <div class="row recent-builds">
<div class="landing-centered-wrapper"> <div class="landing-centered-wrapper">
<div class="medium-6 columns"> <div class="medium-6 columns recent-builds-text">
<div class="landing-vert-center-m"> <div class="landing-vert-center-m">
<h2>Every minute there’s<br>a new build being run</h2> <h2>Every minute there’s<br>a new build being run</h2>
<p>Here are just a few projects<br>currently running on Travis CI</p> <p>Here are just a few projects<br>currently running on Travis CI</p>
</div> </div>
</div> </div>
<div class="medium-6 columns"> <div class="medium-6 columns">
<ul class="repos"> <ul class="tiles-landing">
{{#each repo in repos}} {{#each repo in repos}}
<li {{bind-attr class=":repo repo.lastBuild.state"}}> <li {{bind-attr class=":db :column repo.lastBuild.state"}}>
<span class="tile-status"> <div class="db-status">
<span {{bind-attr class=":icon :icon-status repo.lastBuild.state"}}></span> <span {{bind-attr class=":icon :icon-status repo.lastBuild.state"}}></span>
</span> </div>
<span class="owner">{{repo.owner}}</span> <div class="db-repo column">
<span class="name">{{repo.name}}</span> <h3>{{repo.owner}}</h3>
{{#link-to "build" repo repo.lastBuild.id class="number"}}{{repo.lastBuild.number}} <span class="state">{{repo.lastBuild.state}}</span>{{/link-to}} <h2>{{repo.name}}</h2>
<span class="commit">{{format-sha repo.lastBuild.commit.sha}}</span> </div>
<span class="branch">{{repo.lastBuild.branch}}</span> <div class="db-controls column end">
<span class="finished-at"> <p class="db-job column small-6">
{{landing-page-last-build-time repo.lastBuild.finishedAt}} {{#link-to "build" repo repo.lastBuild.id}}
</span> <span class="icon icon-hash"></span>
{{repo.lastBuild.number}}
{{repo.lastBuild.state}}
{{/link-to}}
</p>
<p class="db-commit column small-6">
<span class="icon icon-github"></span>
{{format-sha repo.lastBuild.commit.sha}}</p>
<p class="db-timeago column small-6">
<span class="icon icon-cal"></span>
{{landing-page-last-build-time repo.lastBuild.finishedAt}}</p>
<p class="db-branch column small-6">
<span class="icon icon-branch"></span>
{{repo.lastBuild.branch}}</p>
</div>
</li> </li>
{{else}} {{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
@ -217,39 +231,39 @@
</div> </div>
</div> </div>
<div class="row user-testimonials"> <div class="row user-testimonials">
<div class="landing-centered-wrapper"> <div class="landing-centered-wrapper">
<div class="medium-6 columns"> <div class="medium-6 columns">
<h2>Some people have said some pretty nice things about us</h2> <h2>Some people have said some pretty nice things about us</h2>
</div> </div>
<div class="medium-6 columns"> <div class="medium-6 columns">
<div class="small-3 columns"> <div class="small-3 columns">
<img src="../images/landing-page/dhh.png" class="avatar"> <img src="../images/landing-page/dhh.png" class="avatar">
</div> </div>
<div class="small-9 columns"> <div class="small-9 columns">
<p>Travis CI makes it so much easier for us to coordinate the thousands of commits and contributors that flow through the Rails code base. The test suite for such a large project is vast, and we wouldn’t be catching issues as quickly or smoothly without the help of Travis.</p> <p>Travis CI makes it so much easier for us to coordinate the thousands of commits and contributors that flow through the Rails code base. The test suite for such a large project is vast, and we wouldn’t be catching issues as quickly or smoothly without the help of Travis.</p>
<p class="author">David Heinemeier Hansson</p> <img src="../images/landing-page/twitter.svg" class="social"><a href="https://twitter.com/dhh" alt="DHH Twitter" target="_blank">dhh</a> <p class="author">David Heinemeier Hansson</p> <img src="../images/landing-page/twitter.svg" class="social"><a href="https://twitter.com/dhh" alt="DHH Twitter" target="_blank">dhh</a>
<p class="title">Creator of Ruby on Rails</p> <p class="title">Creator of Ruby on Rails</p>
</div> </div>
<div class="small-3 columns"> <div class="small-3 columns">
<img src="../images/landing-page/chris.png" class="avatar"> <img src="../images/landing-page/chris.png" class="avatar">
</div> </div>
<div class="small-9 columns"> <div class="small-9 columns">
<p>We love Travis CI at @TwitterOSS and use it for the majority of our open source projects on GitHub. Travis CI is simple to use, we love their API to build tooling and adore the new container infrastructure for speedier builds.</p> <p>We love Travis CI at @TwitterOSS and use it for the majority of our open source projects on GitHub. Travis CI is simple to use, we love their API to build tooling and adore the new container infrastructure for speedier builds.</p>
<p class="author">Chris Aniszczyk</p> <img src="../images/landing-page/twitter.svg" class="social"><a href="https://twitter.com/cra" alt="Chris Twitter" target="_blank">cra</a> <p class="author">Chris Aniszczyk</p> <img src="../images/landing-page/twitter.svg" class="social"><a href="https://twitter.com/cra" alt="Chris Twitter" target="_blank">cra</a>
<p class="title">Head of Open Source at Twitter</p> <p class="title">Head of Open Source at Twitter</p>
</div> </div>
<div class="small-3 columns"> <div class="small-3 columns">
<img src="../images/landing-page/alex.png" class="avatar"> <img src="../images/landing-page/alex.png" class="avatar">
</div> </div>
<div class="small-9 columns"> <div class="small-9 columns">
<p>Not only is Travis CI the best way to test your software, it is the right way. rm -rf jenkins &amp;&amp; touch .travis.yml</p> <p>Not only is Travis CI the best way to test your software, it is the right way. rm -rf jenkins &amp;&amp; touch .travis.yml</p>
<p class="author">Alex Gaynor</p> <img src="../images/landing-page/github.svg" class="social"><a href="https://github.com/alex" alt="Alex github" target="_blank">alex</a> <p class="author">Alex Gaynor</p> <img src="../images/landing-page/github.svg" class="social"><a href="https://github.com/alex" alt="Alex github" target="_blank">alex</a>
<p class="title">PyPy and Python Core Team Member</p> <p class="title">PyPy and Python Core Team Member</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>