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

refactor top styles and dashboard template

Browse Source
This commit is contained in:
Lisa Passing 2015-02-18 14:08:50 +01:00
parent 0f6a6a9551
commit 40e186d7c7
8 changed files with 183 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
app/styles/app/top.sass
View File

@ -1,30 +1,22 @@
#top
$top-height: 55px
.top
font-size: $font-size-normal
background : $topbar-bg
background: $topbar-bg
#logo
position: relative
float : left
width : 123px
height : 55px
margin-right : 14px
z-index: 999
text-indent : -9999px
background : $logo-red inline-image('ui/travis-logo.svg') no-repeat 20px 18px
a
display: block
ul
.navigation
@include resetul
line-height: 30px
#navigation
height: 0
overflow: hidden
line-height: $top-height
&.is-open
height: auto
ul
@include resetul
line-height: 30px
a, span
color: $white
text-decoration: none
@ -37,6 +29,15 @@
&:hover
color: $color-link-top-highlight
img
margin: 10px 10px 7px 10px
width : 30px
height : 30px
border-radius: 100px
@media #{$medium-up}
float : right
margin : 12px 0 0 10px
a.werehiring
background-color: $topbar-bg-darker
border-radius: 4px
@ -51,13 +52,13 @@
@media #{$medium-up}
overflow: visible
height: 55px
height: $top-height
#navigation
.navigation
height: auto
overflow: visible
ul
line-height: 55px
line-height: $top-height
position: relative
li
display: inline-block
@ -67,24 +68,6 @@
li.traviscicom
display: none
.nav-burger
overflow: auto
height: 55px
@media #{$medium-up}
display: none
#burger
float: right
font-size: 50px
background: none
border: none
line-height: 1
color: $white
outline: none !important
@include clearfix
&:hover
cursor: pointer
.menu
position: relative
@ -122,9 +105,6 @@
.menu.community
min-width: 120px
.user
text-align: right
.menu.profile
padding: 0.2em 0px 0.5em
@media #{$medium-up}
@ -161,81 +141,33 @@
display: none
#home #navigation .home,
#stats #navigation .stats,
#profile #navigation .profile
background-color: transparent
.logo
position: relative
float : left
width : 123px
height : $top-height
margin-right : 14px
z-index: 999
text-indent : -9999px
background : $logo-red inline-image('ui/travis-logo.svg') no-repeat 20px 18px
a
color: #ffffff
a:hover
color: $color-link-top-highlight
display: block
// .status-graph
// background : url('/images/dashboard/health-stats.svg') no-repeat
// background : contain
// margin-top : 17px
// height : 18px
// width : 78px
// text-indent : -9999px
// #user
// text-align : right
// cursor : pointer
// #user p
// display : none
#top img
margin: 10px 10px 7px 10px
width : 30px
height : 30px
border-radius: 100px
.burger
overflow: auto
height: $top-height
@media #{$medium-up}
float : right
margin : 12px 0 0 10px
// #user ul
// text-align : left
// display : inline
// margin : 0
// padding : 15px 0 17px 0
// list-style : none
// z-index : 1000
// #user ul li ul
// padding : 0
// position : absolute
// top : 55px
// right : 0
// width : 150px
// display : none
// opacity : 0
// visibility : hidden
// #user ul li ul li
// background : $topbar-bg
// color : $white
// display : block
// line-height : 18px
// padding : 8px 18px
// margin : 0
// #user ul li ul li:last-child
// border-bottom-left-radius : 4px
// border-bottom-right-radius : 4px
// #user ul li ul li:hover
// background : #5e869a
// color : $white
// a
// color: $white
// #user ul li:hover ul
// display : block
// opacity : 1
// visibility : visible
// #user .handle a
// display: inline
display: none
.burger-btn
float: right
font-size: 50px
background: none
border: none
line-height: 1
color: $white
outline: none !important
@include clearfix
&:hover
cursor: pointer

41
app/templates/footer.hbs Normal file
View File

@ -0,0 +1,41 @@
<div class="row">
<div class="small-6 medium-4 large-4 columns">
<img src="/images/dashboard/footer-logo.svg">
</div>
<div class="small-6 medium-2 large-2 columns">
<h3>&copy;Travis CI, GmbH</h3>
<ul>
<li>Rigaer Straße 8</li>
<li>10247 Berlin, Germany</li>
</ul>
</div>
<div class="small-6 medium-2 large-2 columns">
<h3>Help</h3>
<ul>
<li><a href="http://docs.travis-ci.com/">Documentation</a></li>
<li><a href="http://blog.travis-ci.com/">Blog</a></li>
<li><a href="mailto:support@travis-ci.com">Email</a></li>
<li><a href="https://travisci.campfirenow.com">Live Chat</a></li>
<li><a href="https://twitter.com/travisci">Twitter</a></li>
</ul>
</div>
{{#if config.pro}}
<div class="small-6 medium-2 large-2 columns">
<h3>Legal</h3>
<ul>
<li><a href="http://docs.travis-ci.com/imprint.html">Imprint</a></li>
<li><a href="https://billing.travis-ci.com/pages/terms">Terms of Service</a></li>
<li><a href="https://billing.travis-ci.com/pages/security">Security Statement</a></li>
</ul>
</div>
{{/if}}
<div class="small-6 medium-2 large-2 columns">
<h3>Travis CI Status</h3>
<ul>
<li><div class="status-circle">Status:</div>
<a href="http://www.traviscistatus.com/">Travis CI Status</a>
</li>
</ul>
</div>
</div>

78
app/templates/layouts/dashboard.hbs
View File

@ -1,82 +1,16 @@
<div class="centered">
<div class="wrapper wrapper-dashboard">
<div id="top">
<div class="row">
<div class="small-2 medium-2 columns" id="logo">
<h1>{{#link-to "main"}}Home{{/link-to}}</h1>
</div>
<ul>
<li><a href="#">Docs</a></li>
<li><a href="#">Blog</a></li>
<!-- <div class="small-4 medium-3 columns" id="status">
<div class="status-graph">Status Graph</div>
</div> -->
<li class="menu float-right user">
<p class="handle">
{{#if auth.signedOut}}
<a class="signed-out" href="#" {{action "signIn" target="auth"}}>Sign in with GitHub</a>
{{/if}}
{{#if auth.signedIn}}
{{#link-to "profile" class="signed-in"}}<img {{bind-attr src="auth.gravatarUrl"}}/>{{auth.userName}}{{/link-to}}
{{/if}}
{{#if auth.signingIn}}
<span class="signing-in">Signing In</span>
{{/if}}
</p>
<ul>
<li><a href="#" title="">Help</a></li>
<li><a href="/" {{action "signOut" target="auth"}}>Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
<header id="top" class="top">
{{render "top"}}
</header>
{{yield}}
</div>
<footer>
<div class="row">
<div class="small-6 medium-4 large-4 columns">
<img src="/images/dashboard/footer-logo.svg">
</div>
<div class="small-6 medium-2 large-2 columns">
<h3>&copy;Travis CI, GmbH</h3>
<ul>
<li>Rigaer Straße 8</li>
<li>10247 Berlin, Germany</li>
</ul>
</div>
<div class="small-6 medium-2 large-2 columns">
<h3>Help</h3>
<ul>
<li><a href="http://docs.travis-ci.com/">Documentation</a></li>
<li><a href="http://blog.travis-ci.com/">Blog</a></li>
<li><a href="mailto:support@travis-ci.com">Email</a></li>
<li><a href="https://travisci.campfirenow.com">Live Chat</a></li>
<li><a href="https://twitter.com/travisci">Twitter</a></li>
</ul>
</div>
<div class="small-6 medium-2 large-2 columns">
<h3>Legal</h3>
<ul>
<li><a href="http://docs.travis-ci.com/imprint.html">Imprint</a></li>
<li><a href="https://billing.travis-ci.com/pages/terms">Terms of Service</a></li>
<li><a href="https://billing.travis-ci.com/pages/security">Security Statement</a></li>
</ul>
</div>
<div class="small-6 medium-2 large-2 columns">
<h3>Travis CI Status</h3>
<ul>
<li><div class="status-circle">Status:</div>
<a href="http://www.traviscistatus.com/">Travis CI Status</a>
</li>
</ul>
</div>
</div>
{{render "footer"}}
</footer>
</div>

35
app/templates/layouts/error.hbs
View File

@ -1,36 +1,5 @@
<div id="top">
<div class="row">
<div class="small-2 medium-2 columns" id="logo">
<h1>{{#link-to "main"}}Home{{/link-to}}</h1>
</div>
<div class="nav-burger">
<button type="button" id="burger" {{action 'toggleBurgerMenu'}}>&equiv;</button>
</div>
<ul id="navigation" {{bind-attr class="is-open"}}>
<li><a href="#">Blog</a></li>
<li><a href="#">Status</a></li>
<!-- <div class="small-4 medium-3 columns" id="status">
<div class="status-graph">Status Graph</div>
</div> -->
<li class="menu float-right user">
<p class="handle">
{{#if auth.signedOut}}
<a class="signed-out" href="#" {{action "signIn" target="auth"}}>Sign in with GitHub</a>
{{/if}}
{{#if auth.signedIn}}
{{#link-to "profile" class="signed-in"}}<img {{bind-attr src="auth.gravatarUrl"}}/>{{auth.userName}}{{/link-to}}
{{/if}}
{{#if auth.signingIn}}
<span class="signing-in">Signing In</span>
{{/if}}
</p>
<ul>
<li><a href="#" title="">Help</a></li>
<li><a href="/" {{action "signOut" target="auth"}}>Sign Out</a></li>
</ul>
</li>
</ul>
</div>
<div id="top" class="top">
{{render 'top'}}
</div>
<main class="main main--error" role="main">

2
app/templates/layouts/home.hbs
View File

@ -1,6 +1,6 @@
<div class="wrapper">
<header id="top">
<header id="top" class="top">
{{render "top"}}
</header>

2
app/templates/layouts/profile.hbs
View File

@ -1,5 +1,5 @@
<div class="wrapper">
<header id="top">
<header id="top" class="top">
{{render "top"}}
</header>

2
app/templates/layouts/simple.hbs
View File

@ -1,4 +1,4 @@
<div id="top">
<div id="top" class="top">
{{render "top"}}
</div>

166
app/templates/top.hbs
View File

@ -1,94 +1,96 @@
{{#link-to "main"}}
<div id="logo">
<h1>Travis</h1>
<div class="row">
{{#link-to "main"}}
<div id="logo" class="logo">
<h1>Travis</h1>
</div>
{{/link-to}}
<div class="burger">
<button type="button" id="burger" class="burger-btn" {{action 'toggleBurgerMenu'}}>&equiv;</button>
</div>
{{/link-to}}
<div class="nav-burger">
<button type="button" id="burger" {{action 'toggleBurgerMenu'}}>&equiv;</button>
</div>
<ul id="navigation" {{bind-attr class=":navigation is-open"}}>
<li class="home">
{{#link-to "main"}}Home{{/link-to}}
</li>
{{#if config.pro}}
<li><a href="http://docs.travis-ci.com">Docs</a></li>
{{/if}}
{{#if config.enterprise}}
<li><a href="http://docs.travis-ci.com">Docs</a></li>
{{else}}
<li>
<a href="http://blog.travis-ci.com">Blog</a>
</li>
<li>
<a href="http://traviscistatus.com">Status</a>
</li>
{{/if}}
{{#unless config.pro}}
<li class="menu community">
<p class="handle">
<a href="#">Help</a>
</p>
<ul>
<li><a href="http://docs.travis-ci.com">Docs</a></li>
<li><a href="http://stackoverflow.com/questions/ask?tags=travis-ci">Ask a Question</a></li>
<li><a href="irc://irc.freenode.net/#travis">IRC</a></li>
<li><a href="mailto:support@travis-ci.com">E-Mail us</a></li>
<li><a href="http://docs.travis-ci.com/imprint.html" alt="Imprint">Imprint</a></li>
</ul>
</li>
{{/unless}}
<ul id="navigation" {{bind-attr class="is-open"}}>
<li class="home">
{{#link-to "main"}}Home{{/link-to}}
</li>
{{#if config.pro}}
<li><a href="http://docs.travis-ci.com">Docs</a></li>
{{/if}}
{{#if config.enterprise}}
<li><a href="http://docs.travis-ci.com">Docs</a></li>
{{else}}
<li>
<a href="http://blog.travis-ci.com">Blog</a>
</li>
<li>
<a href="http://traviscistatus.com">Status</a>
</li>
{{/if}}
{{#unless config.pro}}
<li class="menu community">
{{#if config.pagesEndpoint}}
<li class="menu legal">
<p class="handle">
<a {{bind-attr href="config.url_legal"}}>Legal</a>
</p>
<ul>
<li>
<a {{bind-attr href="config.url_imprint"}}>Imprint</a>
</li>
<li>
<a {{bind-attr href="config.url_security"}}>Security</a>
</li>
<li>
<a {{bind-attr href="config.url_terms"}}>Terms</a>
</li>
</ul>
</li>
{{/if}}
{{#unless config.pro}}
<li class="traviscicom">
<a href="http://travis-ci.com">Travis CI for Private Repositories</a>
</li>
{{/unless}}
<li {{bind-attr class="view.classProfile"}}>
<p class="handle">
<a href="#">Help</a>
</p>
<ul>
<li><a href="http://docs.travis-ci.com">Docs</a></li>
<li><a href="http://stackoverflow.com/questions/ask?tags=travis-ci">Ask a Question</a></li>
<li><a href="irc://irc.freenode.net/#travis">IRC</a></li>
<li><a href="mailto:support@travis-ci.com">E-Mail us</a></li>
<li><a href="http://docs.travis-ci.com/imprint.html" alt="Imprint">Imprint</a></li>
</ul>
</li>
{{/unless}}
{{#if config.pagesEndpoint}}
<li class="menu legal">
<p class="handle">
<a {{bind-attr href="config.url_legal"}}>Legal</a>
{{#if auth.signedOut}}
<button class="signed-out button--signin" {{action "signIn" target="auth"}}>Sign in with GitHub</button>
{{/if}}
{{#if auth.signedIn}}
{{#link-to "profile" class="signed-in"}}<img {{bind-attr src="gravatarUrl"}}/>{{userName}}{{/link-to}}
{{/if}}
{{#if auth.signingIn}}
<button class="signing-in button--signin">Signing In</button>
{{/if}}
</p>
<ul>
<li>
<a {{bind-attr href="config.url_imprint"}}>Imprint</a>
{{#link-to "profile" class="signed-in"}}Accounts{{/link-to}}
</li>
{{#if config.billingEndpoint}}
<li>
<a {{bind-attr href="config.billingEndpoint"}}>Billing</a>
</li>
{{/if}}
<li>
<a {{bind-attr href="config.url_security"}}>Security</a>
</li>
<li>
<a {{bind-attr href="config.url_terms"}}>Terms</a>
<a href="/" {{action "signOut" target="auth"}}>Sign Out</a>
</li>
</ul>
</li>
{{/if}}
{{#unless config.pro}}
<li class="traviscicom">
<a href="http://travis-ci.com">Travis CI for Private Repositories</a>
</li>
{{/unless}}
<li {{bind-attr class="view.classProfile"}}>
<p class="handle">
{{#if auth.signedOut}}
<button class="signed-out button--signin" {{action "signIn" target="auth"}}>Sign in with GitHub</button>
{{/if}}
{{#if auth.signedIn}}
{{#link-to "profile" class="signed-in"}}<img {{bind-attr src="gravatarUrl"}}/>{{userName}}{{/link-to}}
{{/if}}
{{#if auth.signingIn}}
<button class="signing-in button--signin">Signing In</button>
{{/if}}
</p>
<ul>
<li>
{{#link-to "profile" class="signed-in"}}Accounts{{/link-to}}
</li>
{{#if config.billingEndpoint}}
<li>
<a {{bind-attr href="config.billingEndpoint"}}>Billing</a>
</li>
{{/if}}
<li>
<a href="/" {{action "signOut" target="auth"}}>Sign Out</a>
</li>
</ul>
</li>
</ul>
</ul>
</div>