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

changed layout of getting_started to two columns and reorganized typographic styles and heirarchy

Browse Source
This commit is contained in:
Justine Arreche 2013-10-04 23:27:30 -04:00
parent 0feb1684dc
commit 1bc7bbee67
2 changed files with 121 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
assets/scripts/app/templates/no_owned_repos.hbs
View File

@ -1,58 +1,77 @@
<div id="getting-started">
<h3>Welcome to Travis CI!</h3>
<h2>Hey, it looks like you're new around here and have yet to set up your first repository on Travis CI. We're here to help you get started, it's easy!</h2>
<h2>Hey, it looks like you're new around here and have yet to set up your first<br>repository on Travis CI. We're here to help you get started, it's easy!</h2>
<div class="getting-started-row">
<div class="column">
<img src="/images/getting-started/project-switch.png">
</div>
<div class="column-right">
<span class="steps">Step 1: &nbsp; Enabling your projects</span>
<p>
Start by going to your {{#linkTo "profile.index"}}profile{{/linkTo}} and enable one of your projects. We've been
synchronizing all repositories you have administrative access to. Pick one and flip the switch next to it.
</p>
</div>
</div>
<span class="steps">STEP 1: &nbsp; Enabling your projects</span>
<div class="getting-started-row">
<div class="column">
<img src="/images/getting-started/first-build.png">
</div>
<img src="/images/getting-started/project-switch.png">
<div class="column-right">
<span class="steps">Step 2: &nbsp; Adding Travis</span>
<p>
Once you've enabled one of your projects, add a <a
href="http://about.travis-ci.org/docs/user/build-configuration/#.travis.yml-file%3A-what-it-is-and-how-it-is-used"><code>.travis.yml</code></a> to your project, push some code, and we'll start processing your builds. Wait a
whee while and reload the page, and your newly setup and built project will show up on the right.
</p>
</div>
</div>
<p>
Start by going to your {{#linkTo "profile.index"}}profile{{/linkTo}} and enable one of your projects. We've been
synchronizing all repositories you have administrative access to. Pick one and flip the switch next to it.
</p>
<div class="getting-started-row">
<div class="column">
<img src="/images/getting-started/build-email.png">
</div>
<span class="steps">STEP 2: &nbsp; Adding Travis</span>
<div class="column-right">
<span class="steps">Step 3: &nbsp; Wait for your build to finish</span>
<p>
We'll be sending you an email once the build has finished. Then, it's up to you to do the happy dance.
</p>
</div>
</div>
<img src="/images/getting-started/first-build.png">
<div class="getting-started-row">
<span class="after-steps steps">Build Configuration</span>
<p>
We use sensible defaults for <a href="http://about.travis-ci.org/docs/">most languages</a>, but you can customize
both the <a href="http://about.travis-ci.org/docs/user/build-configuration/">build process</a> and the <a
href="http://about.travis-ci.org/docs/user/build-configuration/">build
environment</a> to fit your project's needs.
</p>
<p>
Once you've enabled one of your projects, add a <a
href="http://about.travis-ci.org/docs/user/build-configuration/#.travis.yml-file%3A-what-it-is-and-how-it-is-used"><code>.travis.yml</code></a> to your project, push some code, and we'll start processing your builds. Wait a
whee while and reload the page, and your newly setup and built project will show up on the right.
</p>
<span class="steps">Notifications</span>
<p>
You can also configure how you want to be notified of build results. Email is only one channel you can use. We
support <a href="http://about.travis-ci.org/docs/user/notifications/#Campfire-notification">Campfire</a>, <a
href="http://about.travis-ci.org/docs/user/notifications/#HipChat-notification">HipChat</a>, <a
href="http://about.travis-ci.org/docs/user/notifications/#Flowdock-notification">Flowdock</a>, <a
href="http://about.travis-ci.org/docs/user/notifications/#IRC-notification">IRC</a>, and <a
href="http://about.travis-ci.org/docs/user/notifications/#Webhook-notification">webhooks</a>. To avoid
exposing any private credentials, you can shield them from the public using <a
href="http://about.travis-ci.org/docs/user/build-configuration/#Secure-environment-variables">encrypted
configuration settings</a>.
</p>
<span class="steps">STEP 3: &nbsp; Wait for your build to finish</span>
<img src="/images/getting-started/build-email.png">
<p class="end-of-steps">
We'll be sending you an email once the build has finished. Then, it's up to you to do the happy dance.
</p>
<p class="after-steps">
We use sensible defaults for <a href="http://about.travis-ci.org/docs/">most languages</a>, but you can customize
both the <a href="http://about.travis-ci.org/docs/user/build-configuration/">build process</a> and the <a
href="http://about.travis-ci.org/docs/user/build-configuration/">build
environment</a> to fit your project's needs.
</p>
<p>
You can also configure how you want to be notified of build results. Email is only one channel you can use. We
support <a href="http://about.travis-ci.org/docs/user/notifications/#Campfire-notification">Campfire</a>, <a
href="http://about.travis-ci.org/docs/user/notifications/#HipChat-notification">HipChat</a>, <a
href="http://about.travis-ci.org/docs/user/notifications/#Flowdock-notification">Flowdock</a>, <a
href="http://about.travis-ci.org/docs/user/notifications/#IRC-notification">IRC</a>, and <a
href="http://about.travis-ci.org/docs/user/notifications/#Webhook-notification">webhooks</a>. To avoid
exposing any private credentials, you can shield them from the public using <a
href="http://about.travis-ci.org/docs/user/build-configuration/#Secure-environment-variables">encrypted
configuration settings</a>.
</p>
<p>
Should you have any questions or issues, have a look at <a href="http://about.travis-ci.org/docs/" location="_top">our
documentation</a>, <a href="https://github.com/travis-ci/travis-ci/issues/new" location="_top">open an issue</a> or
<a href="mailto:support@travis-ci.com">send us an email</a>.
</p>
<span class="steps">Questions</span>
<p>
Should you have any questions or issues, have a look at <a href="http://about.travis-ci.org/docs/" location="_top">our
documentation</a>, <a href="https://github.com/travis-ci/travis-ci/issues/new" location="_top">open an issue</a> or
<a href="mailto:support@travis-ci.com">send us an email</a>.
</p>
</div>
</div>

94
assets/styles/getting_started.sass
View File

@ -1,57 +1,75 @@
#getting-started
min-width: 600px
max-width: 800px
width: 850px
margin: 0 auto
padding-top: 30px
font-family: 'Source Sans Pro'
text-align: center
text-align: left
h2
color: #919191
font-weight: 400
line-height: 30px
text-align: center
h3
font-size: 35px
font-size: 30px
color: #337389
text-align: center
span
.getting-started-row
display: inline-block
margin-top: 50px
clear: all
padding-top: 30px
.steps
font-size: 20px
font-weight: 600
color: #939386
p
font-size: 15px
.end-of-steps
padding-bottom: 50px
border-bottom : 1px solid #AAAAAA
.after-steps
padding-top: 50px
a
color: #a53230
text-decoration: none
&:hover
color: #607a84
a
color: #337389
text-decoration: underline
img
padding: 0
float: none
margin: 15px 0 0 0
max-width: 800px
min-width: 600px
&:hover
color: #607a84
text-decoration: underline
&.spinner
border: 0px
padding: 0px
img
padding: 0
float: none
margin: 0px
margin-left: 5px
margin: 15px 0 0 0
width: 450px
&.spinner
border: 0px
padding: 0px
float: none
margin: 0px
margin-left: 5px
p
font-size: 17px
line-height: 26px
.after-steps
padding-top: 50px
border-top : 1px solid #AAAAAA
.column
padding-right: 20px
max-width: 450px
display: block
float: left
clear: all
.column-right
width: 40%
display: block
float: left
clear: all
.steps
display: block
margin-top: 10px
font-size: 22px
line-height: 30px
font-weight: 400
color: #bc3c3c
.end-of-steps
padding-bottom: 50px