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
background-color: #eff0ec
#landing
.landing
margin: 0 auto 170px auto
font-weight: 300
overflow: hidden
@ -41,25 +41,24 @@
color: #8f9294
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
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
margin-top: 0
h2
font-size: 3.3em
line-height: 1.15em
font-weight: 300
color: #39a85b
p
line-height: 1.5em
font-color: #606162
font-size: 1.7em
.hero.z-1
text-align: center
@ -138,9 +137,10 @@
.recent-builds
background-color: #faf9f6
text-align: center
min-height: 44rem
.recent-builds-text
text-align: center
h2
color: #db4141
text-align: right
@ -173,95 +173,6 @@
padding: 10px 0 0 60px
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
text-align: center
@ -432,8 +343,6 @@
.title
margin: 0 0 20px 0
a
font-size: 1.2em
@ -552,3 +461,36 @@
position: relative
overflow: auto
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%)
.db
@include resetul
position: relative
margin-bottom: 1em
background: $white
@ -130,6 +131,12 @@ $db-text-color: #ACAAAA
z-index: 30
overflow: hidden
.db-branch
position: relative
&:after
content: ""
@include fadeOut(right, -90deg, $white)
.db-lock
position: absolute
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="landing-centered-wrapper">
<div class="large-12 columns" id="hero-copy">
@ -37,27 +37,41 @@
<div class="row recent-builds">
<div class="landing-centered-wrapper">
<div class="medium-6 columns">
<div class="medium-6 columns recent-builds-text">
<div class="landing-vert-center-m">
<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>
</div>
</div>
<div class="medium-6 columns">
<ul class="repos">
<ul class="tiles-landing">
{{#each repo in repos}}
<li {{bind-attr class=":repo repo.lastBuild.state"}}>
<span class="tile-status">
<li {{bind-attr class=":db :column repo.lastBuild.state"}}>
<div class="db-status">
<span {{bind-attr class=":icon :icon-status repo.lastBuild.state"}}></span>
</span>
<span class="owner">{{repo.owner}}</span>
<span class="name">{{repo.name}}</span>
{{#link-to "build" repo repo.lastBuild.id class="number"}}{{repo.lastBuild.number}} <span class="state">{{repo.lastBuild.state}}</span>{{/link-to}}
<span class="commit">{{format-sha repo.lastBuild.commit.sha}}</span>
<span class="branch">{{repo.lastBuild.branch}}</span>
<span class="finished-at">
{{landing-page-last-build-time repo.lastBuild.finishedAt}}
</span>
</div>
<div class="db-repo column">
<h3>{{repo.owner}}</h3>
<h2>{{repo.name}}</h2>
</div>
<div class="db-controls column end">
<p class="db-job column small-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 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>
{{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
@ -217,39 +231,39 @@
</div>
</div>
<div class="row user-testimonials">
<div class="landing-centered-wrapper">
<div class="medium-6 columns">
<h2>Some people have said some pretty nice things about us</h2>
</div>
<div class="medium-6 columns">
<div class="small-3 columns">
<img src="../images/landing-page/dhh.png" class="avatar">
</div>
<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 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>
</div>
<div class="row user-testimonials">
<div class="landing-centered-wrapper">
<div class="medium-6 columns">
<h2>Some people have said some pretty nice things about us</h2>
</div>
<div class="medium-6 columns">
<div class="small-3 columns">
<img src="../images/landing-page/dhh.png" class="avatar">
</div>
<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 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>
</div>
<div class="small-3 columns">
<img src="../images/landing-page/chris.png" class="avatar">
</div>
<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 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>
</div>
<div class="small-3 columns">
<img src="../images/landing-page/chris.png" class="avatar">
</div>
<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 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>
</div>
<div class="small-3 columns">
<img src="../images/landing-page/alex.png" class="avatar">
</div>
<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 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>
</div>
</div>
</div>
</div>
<div class="small-3 columns">
<img src="../images/landing-page/alex.png" class="avatar">
</div>
<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 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>
</div>
</div>
</div>
</div>
</div>