refactor top styles and dashboard template
This commit is contained in:
Lisa Passing
parent
0f6a6a9551
commit
40e186d7c7
|
|
@ -1,30 +1,22 @@
|
||||||
|
|
||||||
#top
|
$top-height: 55px
|
||||||
|
|
||||||
|
.top
|
||||||
font-size: $font-size-normal
|
font-size: $font-size-normal
|
||||||
background: $topbar-bg
|
background: $topbar-bg
|
||||||
|
|
||||||
#logo
|
.navigation
|
||||||
position: relative
|
@include resetul
|
||||||
float : left
|
height: 0
|
||||||
width : 123px
|
overflow: hidden
|
||||||
height : 55px
|
line-height: $top-height
|
||||||
margin-right : 14px
|
&.is-open
|
||||||
z-index: 999
|
height: auto
|
||||||
text-indent : -9999px
|
|
||||||
background : $logo-red inline-image('ui/travis-logo.svg') no-repeat 20px 18px
|
|
||||||
a
|
|
||||||
display: block
|
|
||||||
|
|
||||||
ul
|
ul
|
||||||
@include resetul
|
@include resetul
|
||||||
line-height: 30px
|
line-height: 30px
|
||||||
|
|
||||||
#navigation
|
|
||||||
height: 0
|
|
||||||
overflow: hidden
|
|
||||||
&.is-open
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
a, span
|
a, span
|
||||||
color: $white
|
color: $white
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
|
@ -37,6 +29,15 @@
|
||||||
&:hover
|
&:hover
|
||||||
color: $color-link-top-highlight
|
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
|
a.werehiring
|
||||||
background-color: $topbar-bg-darker
|
background-color: $topbar-bg-darker
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
|
|
@ -51,13 +52,13 @@
|
||||||
|
|
||||||
@media #{$medium-up}
|
@media #{$medium-up}
|
||||||
overflow: visible
|
overflow: visible
|
||||||
height: 55px
|
height: $top-height
|
||||||
|
|
||||||
#navigation
|
.navigation
|
||||||
height: auto
|
height: auto
|
||||||
overflow: visible
|
overflow: visible
|
||||||
ul
|
ul
|
||||||
line-height: 55px
|
line-height: $top-height
|
||||||
position: relative
|
position: relative
|
||||||
li
|
li
|
||||||
display: inline-block
|
display: inline-block
|
||||||
|
|
@ -67,24 +68,6 @@
|
||||||
li.traviscicom
|
li.traviscicom
|
||||||
display: none
|
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
|
.menu
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
|
|
@ -122,9 +105,6 @@
|
||||||
.menu.community
|
.menu.community
|
||||||
min-width: 120px
|
min-width: 120px
|
||||||
|
|
||||||
.user
|
|
||||||
text-align: right
|
|
||||||
|
|
||||||
.menu.profile
|
.menu.profile
|
||||||
padding: 0.2em 0px 0.5em
|
padding: 0.2em 0px 0.5em
|
||||||
@media #{$medium-up}
|
@media #{$medium-up}
|
||||||
|
|
@ -161,81 +141,33 @@
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
|
|
||||||
#home #navigation .home,
|
.logo
|
||||||
#stats #navigation .stats,
|
position: relative
|
||||||
#profile #navigation .profile
|
float : left
|
||||||
background-color: transparent
|
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
|
a
|
||||||
color: #ffffff
|
display: block
|
||||||
a:hover
|
|
||||||
color: $color-link-top-highlight
|
|
||||||
|
|
||||||
|
|
||||||
// .status-graph
|
.burger
|
||||||
// background : url('/images/dashboard/health-stats.svg') no-repeat
|
overflow: auto
|
||||||
// background : contain
|
height: $top-height
|
||||||
// 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
|
|
||||||
@media #{$medium-up}
|
@media #{$medium-up}
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.burger-btn
|
||||||
float: right
|
float: right
|
||||||
margin : 12px 0 0 10px
|
font-size: 50px
|
||||||
|
background: none
|
||||||
// #user ul
|
border: none
|
||||||
// text-align : left
|
line-height: 1
|
||||||
// display : inline
|
color: $white
|
||||||
// margin : 0
|
outline: none !important
|
||||||
// padding : 15px 0 17px 0
|
@include clearfix
|
||||||
// list-style : none
|
&:hover
|
||||||
// z-index : 1000
|
cursor: pointer
|
||||||
|
|
||||||
// #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
|
|
||||||
|
|
||||||
41
app/templates/footer.hbs
Normal file
41
app/templates/footer.hbs
Normal 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>©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>
|
||||||
|
|
@ -1,82 +1,16 @@
|
||||||
<div class="centered">
|
<div class="centered">
|
||||||
<div class="wrapper wrapper-dashboard">
|
<div class="wrapper wrapper-dashboard">
|
||||||
<div id="top">
|
<header id="top" class="top">
|
||||||
<div class="row">
|
|
||||||
<div class="small-2 medium-2 columns" id="logo">
|
{{render "top"}}
|
||||||
<h1>{{#link-to "main"}}Home{{/link-to}}</h1>
|
|
||||||
</div>
|
</header>
|
||||||
<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>
|
|
||||||
|
|
||||||
{{yield}}
|
{{yield}}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="row">
|
{{render "footer"}}
|
||||||
<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>©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>
|
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,5 @@
|
||||||
<div id="top">
|
<div id="top" class="top">
|
||||||
<div class="row">
|
{{render 'top'}}
|
||||||
<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'}}>≡</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>
|
</div>
|
||||||
|
|
||||||
<main class="main main--error" role="main">
|
<main class="main main--error" role="main">
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
||||||
<header id="top">
|
<header id="top" class="top">
|
||||||
{{render "top"}}
|
{{render "top"}}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<header id="top">
|
<header id="top" class="top">
|
||||||
{{render "top"}}
|
{{render "top"}}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div id="top">
|
<div id="top" class="top">
|
||||||
{{render "top"}}
|
{{render "top"}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,15 @@
|
||||||
|
<div class="row">
|
||||||
{{#link-to "main"}}
|
{{#link-to "main"}}
|
||||||
<div id="logo">
|
<div id="logo" class="logo">
|
||||||
<h1>Travis</h1>
|
<h1>Travis</h1>
|
||||||
</div>
|
</div>
|
||||||
{{/link-to}}
|
{{/link-to}}
|
||||||
|
|
||||||
<div class="nav-burger">
|
<div class="burger">
|
||||||
<button type="button" id="burger" {{action 'toggleBurgerMenu'}}>≡</button>
|
<button type="button" id="burger" class="burger-btn" {{action 'toggleBurgerMenu'}}>≡</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul id="navigation" {{bind-attr class="is-open"}}>
|
<ul id="navigation" {{bind-attr class=":navigation is-open"}}>
|
||||||
<li class="home">
|
<li class="home">
|
||||||
{{#link-to "main"}}Home{{/link-to}}
|
{{#link-to "main"}}Home{{/link-to}}
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -92,3 +93,4 @@
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user