From f33161f95e2286d0a2109ea289f763840305ad76 Mon Sep 17 00:00:00 2001
From: Lisa P
Date: Thu, 8 Oct 2015 18:44:56 +0200
Subject: [PATCH 01/18] start working on broadcasts
---
app/controllers/top.coffee | 27 ++++++++++++
app/styles/app.scss | 1 +
app/styles/app/layouts/broadcasts.sass | 19 +++++++++
app/styles/app/layouts/top.sass | 18 ++++----
app/templates/top.hbs | 42 ++++++++++---------
.../line-icons/icon-broadcast-green.svg | 22 ++++++++++
.../images/line-icons/icon-broadcast-grey.svg | 14 +++++++
.../images/line-icons/icon-broadcast-red.svg | 22 ++++++++++
8 files changed, 135 insertions(+), 30 deletions(-)
create mode 100644 app/styles/app/layouts/broadcasts.sass
create mode 100644 public/images/line-icons/icon-broadcast-green.svg
create mode 100644 public/images/line-icons/icon-broadcast-grey.svg
create mode 100644 public/images/line-icons/icon-broadcast-red.svg
diff --git a/app/controllers/top.coffee b/app/controllers/top.coffee
index 7ef3d5be..9430cc57 100644
--- a/app/controllers/top.coffee
+++ b/app/controllers/top.coffee
@@ -1,4 +1,6 @@
`import Ember from 'ember'`
+`import Ajax from 'travis/utils/ajax'`
+`import config from 'travis/config/environment'`
Controller = Ember.Controller.extend
needs: ['currentUser']
@@ -12,6 +14,31 @@ Controller = Ember.Controller.extend
"#{location.protocol}//www.gravatar.com/avatar/#{@get('user.gravatarId')}?s=48&d=mm"
).property('user.gravatarId')
+ broadcasts: (->
+
+ if @get('auth.signedIn')
+ broadcasts = Ember.ArrayProxy.create(
+ content: [],
+ lastBroadcastStatus: '',
+ isLoading: true
+ )
+ apiEndpoint = config.apiEndpoint
+ options = {}
+ options.type = 'GET'
+ options.headers = { Authorization: "token #{@auth.token()}" }
+
+ $.ajax("#{apiEndpoint}/v3/broadcasts", options).then (response) ->
+ array = response.broadcasts.map( (broadcast) ->
+ Ember.Object.create(broadcast)
+ ).reverse()
+
+ broadcasts.set('lastBroadcastStatus', array[0].category)
+ broadcasts.set('content', array)
+ broadcasts.set('isLoading', false)
+
+ broadcasts
+ ).property()
+
actions: {
toggleBurgerMenu: ->
@toggleProperty('is-open')
diff --git a/app/styles/app.scss b/app/styles/app.scss
index fa7db947..3c3639f9 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -53,6 +53,7 @@
@import "app/layouts/top";
@import "app/layouts/owner";
@import "app/layouts/branches";
+@import "app/layouts/broadcasts";
@import "app/landing";
@import "app/layouts/requests";
diff --git a/app/styles/app/layouts/broadcasts.sass b/app/styles/app/layouts/broadcasts.sass
new file mode 100644
index 00000000..e4243fb1
--- /dev/null
+++ b/app/styles/app/layouts/broadcasts.sass
@@ -0,0 +1,19 @@
+.broadcasts
+ // display: none
+
+
+.icon-broadcast
+ display: inline-block
+ width: 1em
+ height: 1.9em
+ background:
+ image: inline-image('line-icons/icon-broadcast-grey.svg')
+ repeat: no-repeat
+ size: 100%
+ vertical-align: middle
+
+ &.warning
+ background-image: inline-image('line-icons/icon-broadcast-red.svg')
+
+ &.announcement
+ background-image: inline-image('line-icons/icon-broadcast-green.svg')
diff --git a/app/styles/app/layouts/top.sass b/app/styles/app/layouts/top.sass
index 50caa7e2..783b9bf6 100644
--- a/app/styles/app/layouts/top.sass
+++ b/app/styles/app/layouts/top.sass
@@ -89,18 +89,16 @@ $top-height: 55px
&.is-open
height: auto
- .navigation-handle
- position: relative
- margin: 0
-
- .navigation-sub
- position: relative
+ > li
+ position: relative
.navigation-nested
- @include resetul
+ margin: 0
+ padding: 0
+ list-style: none
a,
- .navigation-handle
+ .navigation-anchor
display: block
color: #898989
font-size: $font-size-m
@@ -137,7 +135,7 @@ $top-height: 55px
margin-right: 0
a,
- .navigation-handle span:not(.sync-spinner)
+ .navigation-anchor
padding: 0 .2em
.centered & .navigation li:last-child
@@ -159,6 +157,6 @@ $top-height: 55px
text-decoration: none
background-color: $cream-light
- .navigation-handle:hover + .navigation-nested,
+ .navigation-anchor:hover + .navigation-nested,
.navigation-nested:hover
display: block
diff --git a/app/templates/top.hbs b/app/templates/top.hbs
index 3e545b99..26cdf851 100644
--- a/app/templates/top.hbs
+++ b/app/templates/top.hbs
@@ -5,14 +5,24 @@
+
+ -
+
+ {{#if auth.signedIn}}
+
+ {{#each broadcasts.content as |broadcast|}}
+ - {{broadcast.category}} {{{broadcast.message}}}
+ {{/each}}
+
+ {{/if}}
+
+
- Blog
- Status
{{#unless config.pro}}
- -
+ Help
- Docs
- Imprint
@@ -22,26 +32,18 @@
{{#if config.pro}}
- Docs
- -
-
- Legal
-
+ -
+ Legal
{{/if}}
- -
-
+
-
+
{{#if auth.signedOut}}
{{/if}}
@@ -53,7 +55,7 @@
{{#if auth.signingIn}}
{{/if}}
-
+
{{#if auth.signedIn}}
-
diff --git a/public/images/line-icons/icon-broadcast-green.svg b/public/images/line-icons/icon-broadcast-green.svg
new file mode 100644
index 00000000..d2a7839d
--- /dev/null
+++ b/public/images/line-icons/icon-broadcast-green.svg
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/public/images/line-icons/icon-broadcast-grey.svg b/public/images/line-icons/icon-broadcast-grey.svg
new file mode 100644
index 00000000..9fad4f81
--- /dev/null
+++ b/public/images/line-icons/icon-broadcast-grey.svg
@@ -0,0 +1,14 @@
+
+
+
+
diff --git a/public/images/line-icons/icon-broadcast-red.svg b/public/images/line-icons/icon-broadcast-red.svg
new file mode 100644
index 00000000..01df6bf6
--- /dev/null
+++ b/public/images/line-icons/icon-broadcast-red.svg
@@ -0,0 +1,22 @@
+
+
+
+
From 9c403da80414975dbc835f2ac13a2357a4580020 Mon Sep 17 00:00:00 2001
From: Lisa P
Date: Thu, 8 Oct 2015 22:33:34 +0200
Subject: [PATCH 02/18] style broadcasts and toggle them
---
app/controllers/top.coffee | 6 ++-
app/styles/app/layouts/broadcasts.sass | 64 +++++++++++++++++++++++++-
app/styles/app/layouts/top.sass | 3 +-
app/templates/top.hbs | 6 +--
4 files changed, 73 insertions(+), 6 deletions(-)
diff --git a/app/controllers/top.coffee b/app/controllers/top.coffee
index 9430cc57..f4e37774 100644
--- a/app/controllers/top.coffee
+++ b/app/controllers/top.coffee
@@ -37,12 +37,16 @@ Controller = Ember.Controller.extend
broadcasts.set('isLoading', false)
broadcasts
- ).property()
+ ).property('broadcasts')
actions: {
toggleBurgerMenu: ->
@toggleProperty('is-open')
return false
+
+ toggleBroadcasts: ->
+ @toggleProperty('showBroadcasts')
+ return false
}
showCta: (->
diff --git a/app/styles/app/layouts/broadcasts.sass b/app/styles/app/layouts/broadcasts.sass
index e4243fb1..55005bb6 100644
--- a/app/styles/app/layouts/broadcasts.sass
+++ b/app/styles/app/layouts/broadcasts.sass
@@ -1,5 +1,67 @@
.broadcasts
- // display: none
+ position: absolute
+ top: 3.2em
+ width: 27em
+ z-index: 70
+ background-color: $white
+ list-style: none
+ padding: 0 1em
+ margin: 0
+ border: solid 2px $cream-dark
+ border-radius: 2px
+ margin-left: -0.7em
+
+ transform-origin: top left
+ transform: translateY(-100%) scale(.9)
+ opacity: 0
+ transition: transform 300ms ease, opacity 150ms ease
+
+ &:after
+ content: ""
+ position: absolute
+ display: block
+ width: 14px
+ height: 14px
+ background: $white
+ top: -0.5em
+ transform: rotate(45deg)
+ left: 1rem
+ border-top: solid 2px $cream-dark
+ border-left: solid 2px $cream-dark
+
+ li
+ border-bottom: solid 2px $cream-dark
+ &:last-of-type
+ border-bottom: none
+
+ p
+ margin: .5em 0
+ padding-left: 1.5rem
+ word-wrap: break-word
+
+ a
+ display: inline
+ line-height: 1.45
+
+ &.is-open
+ opacity: 1
+ transform: translateY(0) scale(1)
+
+
+.broadcast-status
+ display: inline-block
+ width: 10px
+ height: 10px
+ margin-right: .5rem
+ margin-left: -1.5rem
+ border-radius: 50%
+ background-color: $grey-medium
+
+ &.warning
+ background-color: $red-dark
+
+ &.announcement
+ background-color: $green-dark
.icon-broadcast
diff --git a/app/styles/app/layouts/top.sass b/app/styles/app/layouts/top.sass
index 783b9bf6..4c7a273e 100644
--- a/app/styles/app/layouts/top.sass
+++ b/app/styles/app/layouts/top.sass
@@ -74,6 +74,8 @@ $top-height: 55px
.top
background-color: #eff0ec
+ position: relative
+ z-index: 90
.topbar
font-size: $font-size-m
@@ -99,7 +101,6 @@ $top-height: 55px
a,
.navigation-anchor
- display: block
color: #898989
font-size: $font-size-m
cursor: pointer
diff --git a/app/templates/top.hbs b/app/templates/top.hbs
index 26cdf851..f8652980 100644
--- a/app/templates/top.hbs
+++ b/app/templates/top.hbs
@@ -7,11 +7,11 @@
-
-
+
{{#if auth.signedIn}}
-
+
{{#each broadcasts.content as |broadcast|}}
- - {{broadcast.category}} {{{broadcast.message}}}
+ {{{broadcast.message}}}
{{/each}}
{{/if}}
From bb544f8a7d7ed527693f20b448419d38f5413511 Mon Sep 17 00:00:00 2001
From: Lisa P
Date: Thu, 8 Oct 2015 22:40:35 +0200
Subject: [PATCH 03/18] only show tower when logged in
---
app/templates/top.hbs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/templates/top.hbs b/app/templates/top.hbs
index f8652980..944a01ab 100644
--- a/app/templates/top.hbs
+++ b/app/templates/top.hbs
@@ -7,8 +7,8 @@
-
-
{{#if auth.signedIn}}
+
{{#each broadcasts.content as |broadcast|}}
{{{broadcast.message}}}
From 1bbceeaf13d9bc14372778d11e9a44fb5e15717d Mon Sep 17 00:00:00 2001
From: Lisa P
Date: Mon, 12 Oct 2015 17:17:08 +0200
Subject: [PATCH 04/18] rewrite topbar to fix in broadcasts, plus some cleanup
---
app/styles/app.scss | 3 +
app/styles/app/_mixins/fonts.sass | 2 +
app/styles/app/_mixins/vars.sass | 9 --
app/styles/app/landing.sass | 6 +-
app/styles/app/layout.sass | 17 +--
app/styles/app/layouts/broadcasts.sass | 49 ++++---
app/styles/app/layouts/buildheader.sass | 1 +
app/styles/app/layouts/dashboard.sass | 1 -
app/styles/app/layouts/top.sass | 130 ++-----------------
app/styles/app/layouts/untitled | 17 +++
app/styles/app/modules/icons.sass | 31 -----
app/styles/app/modules/logo.sass | 21 +++
app/styles/app/modules/navigation.sass | 77 +++++++++++
app/styles/app/modules/tofuburger.sass | 16 +++
app/templates/components/orgs-filter.hbs | 1 -
app/templates/layouts/profile.hbs | 2 +-
app/templates/top.hbs | 96 +++++++-------
public/images/line-icons/icon-tofuburger.svg | 3 +-
18 files changed, 241 insertions(+), 241 deletions(-)
create mode 100644 app/styles/app/layouts/untitled
create mode 100644 app/styles/app/modules/logo.sass
create mode 100644 app/styles/app/modules/navigation.sass
create mode 100644 app/styles/app/modules/tofuburger.sass
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 3c3639f9..454f557d 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -24,6 +24,9 @@
@import "app/animation/tractor";
+@import "app/modules/logo";
+@import "app/modules/tofuburger";
+@import "app/modules/navigation";
@import "app/modules/row";
@import "app/modules/loader";
@import "app/modules/tiles";
diff --git a/app/styles/app/_mixins/fonts.sass b/app/styles/app/_mixins/fonts.sass
index 897a926e..ab3fc7c2 100644
--- a/app/styles/app/_mixins/fonts.sass
+++ b/app/styles/app/_mixins/fonts.sass
@@ -11,3 +11,5 @@ $line-height: 22px
$line-height-log: 19px
$font-weight-normal: 400
+
+$top-height: 55px
\ No newline at end of file
diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass
index 37e869da..c23a6330 100644
--- a/app/styles/app/_mixins/vars.sass
+++ b/app/styles/app/_mixins/vars.sass
@@ -8,15 +8,6 @@ $blue-grey: #404650
$blue-grey-light: #d8e2e6
$light-gray: #e9e9e7
-$logo-red: #dc4136
-
-$topbar-bg: $blue-grey
-$topbar-bg-darker: #31363d
-$topbar-height: 55px
-
-$main-repo-link-color: #50555b
-$main-repo-hover-color: #607a84
-
$travis-lint-color: #9b9d9e
$travis-lint-bg: #fafafa
diff --git a/app/styles/app/landing.sass b/app/styles/app/landing.sass
index 3af2d3c2..73c53721 100644
--- a/app/styles/app/landing.sass
+++ b/app/styles/app/landing.sass
@@ -8,14 +8,12 @@
background-color: #fff
.button--signin
- margin-top: -4px
background-color: #ffffff
background-image: inline-image('landing-page/signingithub.svg')
background-size: 16px 16px
border: 2px solid #e4e7e7
color: #a0a8a8
.button--signingin
- margin-top: -4px
border: 2px solid #3FA75F
.button--signin:hover
background-color: #73c78d
@@ -38,7 +36,7 @@
.landing
margin: 0 auto 170px auto
font-weight: 300
- overflow: hidden
+ overflow-x: hidden
h1
font-size: 5em
@@ -469,6 +467,8 @@
.landing-rows
list-style: none
margin: 0
+ @media #{$small-only}
+ padding: 0
.landing-row
.two-line
diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass
index aa3851bb..014a1754 100644
--- a/app/styles/app/layout.sass
+++ b/app/styles/app/layout.sass
@@ -8,7 +8,12 @@
padding-left: 0 !important
padding-right: 0 !important
padding-top: 30px !important
- overflow-y: auto
+ // overflow-y: auto
+ @media #{$medium-up}
+ .topbar
+ max-width: 1024px
+ margin: auto
+ padding: 0
.main,
.profile-view
@@ -31,16 +36,6 @@
background-color: $white
border-right: 2px solid #f2f2f2
-.duration_label
- display: inline-block
- height: 11px
- line-height: 13px
- text-indent: 14px
- margin-right: 1px
- overflow: hidden
- background: inline-image('ui/clock.svg') no-repeat 0px 0px
- background-size: contain
-
#main
position: relative
padding: 1.8em $column-gutter/2 5em
diff --git a/app/styles/app/layouts/broadcasts.sass b/app/styles/app/layouts/broadcasts.sass
index 55005bb6..fd6045cb 100644
--- a/app/styles/app/layouts/broadcasts.sass
+++ b/app/styles/app/layouts/broadcasts.sass
@@ -1,20 +1,26 @@
+.broadcast
+ display: inline-block
+ height: $top-height
+ width: 40px
+ line-height: $top-height
+ cursor: pointer
+ vertical-align: middle
+ float: left
+
.broadcasts
- position: absolute
- top: 3.2em
- width: 27em
- z-index: 70
+ position: relative
background-color: $white
list-style: none
padding: 0 1em
- margin: 0
- border: solid 2px $cream-dark
+ margin: 0 auto .7em
border-radius: 2px
- margin-left: -0.7em
-
- transform-origin: top left
- transform: translateY(-100%) scale(.9)
+ height: 0
+ transform-origin: top center
+ transform: translateY(50%) scale(.9)
opacity: 0
- transition: transform 300ms ease, opacity 150ms ease
+ z-index: -1
+ will-change: transform, opacity
+ transition: opacity 150ms ease, transform 50ms linear
&:after
content: ""
@@ -24,29 +30,42 @@
height: 14px
background: $white
top: -0.5em
+ left: 123px
transform: rotate(45deg)
- left: 1rem
border-top: solid 2px $cream-dark
border-left: solid 2px $cream-dark
-
li
border-bottom: solid 2px $cream-dark
&:last-of-type
border-bottom: none
-
p
margin: .5em 0
padding-left: 1.5rem
word-wrap: break-word
-
a
display: inline
line-height: 1.45
+ text-decoration: underline
&.is-open
+ z-index: 80
+ border: solid 2px $cream-dark
opacity: 1
+ height: auto
transform: translateY(0) scale(1)
+ @media #{$medium-up}
+ position: absolute
+ top: 3.3em
+ left: 130px
+ width: 27em
+ height: auto
+ z-index: 70
+ margin-left: -0.7em
+ .centered &
+ left: 118px
+ &:after
+ left: 1rem
.broadcast-status
display: inline-block
diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass
index 0793a265..c19fb891 100644
--- a/app/styles/app/layouts/buildheader.sass
+++ b/app/styles/app/layouts/buildheader.sass
@@ -14,6 +14,7 @@
margin: 0
font-weight: 400
font-size: 35px
+ line-height: 1
a
color: $grey-dark
&:hover
diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass
index f8a533c1..e0c160a5 100644
--- a/app/styles/app/layouts/dashboard.sass
+++ b/app/styles/app/layouts/dashboard.sass
@@ -16,7 +16,6 @@
margin: 3rem 0 5rem
list-style-type: none
-
.dashboard-active li
text-align: left
.one-line
diff --git a/app/styles/app/layouts/top.sass b/app/styles/app/layouts/top.sass
index 4c7a273e..020b471a 100644
--- a/app/styles/app/layouts/top.sass
+++ b/app/styles/app/layouts/top.sass
@@ -1,4 +1,3 @@
-$top-height: 55px
#auth #top .cta
display: none
@@ -32,132 +31,25 @@ $top-height: 55px
@media #{$medium-up}
display: block
-.centered .cta
- padding-right: 0
-
-.logo
- position: relative
- margin: 0 1.5rem 0 1.3rem
- float: left
- a
- display: block
- width: 100px
- height: $top-height
- z-index: 999
- outline: none
- text-indent: -9999px
- transition: background-color 200ms ease
- background: inline-image('svg/travis-ci-logo.svg') no-repeat 0 50%
-
- &:hover
- background: $cream-light inline-image('svg/travis-ci-logo-hover.svg') no-repeat 50%
- .centered &
- margin-left: 0
-
-.burger
- overflow: auto
- height: $top-height
- @media #{$medium-up}
- display: none
-
- .burger-btn
- float: right
- font-size: 50px
- background: none
- border: none
- line-height: 1
- color: $grey-medium
- outline: none !important
- @include clearfix
- &:hover
- cursor: pointer
-
.top
background-color: #eff0ec
- position: relative
- z-index: 90
.topbar
+ height: $top-height
+ padding: 0 $column-gutter/2
+ clear: both
+ overflow: hidden
font-size: $font-size-m
- background-color: #eff0ec
color: $grey-medium
-
- .navigation
- padding: 0 $column-gutter/2
- margin: 0
- height: 0
- list-style: none
- overflow: hidden
- &.is-open
- height: auto
-
- > li
- position: relative
-
- .navigation-nested
- margin: 0
- padding: 0
- list-style: none
-
- a,
- .navigation-anchor
- color: #898989
- font-size: $font-size-m
- cursor: pointer
- height: $top-height
- line-height: $top-height + 2px
- border: none
+ a
+ color: $grey-medium
&:hover
text-decoration: underline
-
- .profile
- float: right
- img
- border-radius: 50%;
- width: 2.7rem;
- height: 2.7rem;
- margin-left: 1rem;
- transform: translateY(-0.1rem);
-
+ &.has-autoheight
+ height: auto
@media #{$medium-up}
- &.row
- height: $top-height
-
- .navigation
- padding: 0
+ &,
+ &.has-autoheight
+ position: relative
height: $top-height
overflow: visible
- > li
- display: inline-block
- margin-right: 1rem
- .centered & li.signed-out
- .centered & li.signed-in
- .centered & li.signing-in
- margin-right: 0
-
- a,
- .navigation-anchor
- padding: 0 .2em
-
- .centered & .navigation li:last-child
- margin-right: 0
-
- .navigation-nested
- display: none
- position: absolute
- top: $top-height
- left: -1em
- z-index: 90
- background-color: #eff0ec
- a
- height: 35px
- line-height: 35px
- padding: 0 2em
- white-space: nowrap
- &:hover
- text-decoration: none
- background-color: $cream-light
-
- .navigation-anchor:hover + .navigation-nested,
- .navigation-nested:hover
- display: block
diff --git a/app/styles/app/layouts/untitled b/app/styles/app/layouts/untitled
new file mode 100644
index 00000000..ce1c8eb2
--- /dev/null
+++ b/app/styles/app/layouts/untitled
@@ -0,0 +1,17 @@
+.burger
+ overflow: auto
+ height: $top-height
+ @media #{$medium-up}
+ display: none
+
+ .burger-btn
+ float: right
+ font-size: 50px
+ background: none
+ border: none
+ line-height: 1
+ color: $grey-medium
+ outline: none !important
+ @include clearfix
+ &:hover
+ cursor: pointer
\ No newline at end of file
diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass
index bab6eaf2..2c9e488b 100644
--- a/app/styles/app/modules/icons.sass
+++ b/app/styles/app/modules/icons.sass
@@ -29,10 +29,6 @@
.icon--github-circle
background-image: inline-image('icons/github.svg')
-.icon-branch,
-.icon--branch
- background-image: inline-image('dashboard/branch.svg')
-
.icon-hash,
.icon--hash
background-image: inline-image('svg/build-number-icon.svg')
@@ -59,25 +55,6 @@
%icon-star-green
background-image: inline-image('svg/icon-star-green.svg')
-.icon-status.errored
- background-image: inline-image('dashboard/status-errored.svg')
-
-.icon-status.failed
- background-image: inline-image('dashboard/status-failed.svg')
-
-.icon-status.canceled
- background-image: inline-image('dashboard/status-cancelled.svg')
-
-.icon-status.passed
- background-image: inline-image('dashboard/status-passed.svg')
-
-.icon-status.started,
-.icon-status.queued,
-.icon-status.booting,
-.icon-status.received,
-.icon-status.created,
- background-image: inline-image('dashboard/status-pending.svg')
-
.icon.push
background-image: inline-image('svg/push-icon.svg')
@@ -97,14 +74,6 @@
.icon--grey.api
background-image: inline-image('svg/api-light-grey.svg')
-.icon-lock
- background-image: inline-image('dashboard/private-icon.svg')
-
-.icon-burger
- background-image: inline-image('dashboard/burger.svg')
- &:hover
- background-image: inline-image('dashboard/burger-hover.svg')
-
.icon--cancel
background-image: inline-image('svg/off.svg')
diff --git a/app/styles/app/modules/logo.sass b/app/styles/app/modules/logo.sass
new file mode 100644
index 00000000..17f01410
--- /dev/null
+++ b/app/styles/app/modules/logo.sass
@@ -0,0 +1,21 @@
+.logo
+ position: relative
+ display: inline-block
+ height: $top-height
+ width: 100px
+ margin: 0 1.5rem 0 0
+ vertical-align: middle
+ float: left
+ a
+ display: block
+ height: $top-height
+ z-index: 999
+ outline: none
+ text-indent: -9999px
+ transition: background-color 200ms ease
+ background: inline-image('svg/travis-ci-logo.svg') no-repeat 0 50%
+
+ &:hover
+ background: $cream-light inline-image('svg/travis-ci-logo-hover.svg') no-repeat 50%
+ .centered &
+ margin-left: 0
diff --git a/app/styles/app/modules/navigation.sass b/app/styles/app/modules/navigation.sass
new file mode 100644
index 00000000..395400d0
--- /dev/null
+++ b/app/styles/app/modules/navigation.sass
@@ -0,0 +1,77 @@
+$nav-line-height: 35px
+
+.navigation-toggle
+ float: right
+ @media #{$medium-up}
+ display: none
+
+.navigation
+ height: 0
+ will-change: height
+ transition: height 200ms ease
+ > ul
+ padding: 0
+ margin: 0
+ list-style: none
+ li
+ display: block
+ &.is-open
+ height: 100%
+
+ @media #{$medium-up}
+ > ul > li
+ display: inline-block
+ vertical-align: middle
+ margin-right: 1.5em
+
+ .profile
+ font-size: $font-size-m
+ color: $grey-medium
+ text-align: right
+ line-height: $top-height
+ img
+ border-radius: 50%
+ width: 2.7rem
+ height: 2.7rem
+ margin-left: 1rem
+ @media #{$medium-up}
+ margin-right: 0
+ float: right
+
+.navigation-anchor
+ display: block
+ width: 100%
+ line-height: $nav-line-height
+ &:hover
+ text-decoration: underline
+ cursor: pointer
+ @media #{$medium-up}
+ line-height: $top-height + 1px // such magic wow
+
+.navigation-nested
+ margin: 0
+ padding: 0 0 0 1em
+ list-style: none
+ line-height: $nav-line-height
+
+ @media #{$medium-up}
+ display: none
+ position: absolute
+ padding: 0 0 0 0
+ margin: -1px 0 0 -1em
+ z-index: 88
+ background-color: #eff0ec
+
+ li
+ display: block
+ text-align: left
+ a
+ display: block
+ padding: 0 2em
+ &:hover
+ text-decoration: none
+ background-color: $cream-light
+
+.navigation-anchor:hover ~ .navigation-nested,
+.navigation-nested:hover
+ display: block
diff --git a/app/styles/app/modules/tofuburger.sass b/app/styles/app/modules/tofuburger.sass
new file mode 100644
index 00000000..0c153479
--- /dev/null
+++ b/app/styles/app/modules/tofuburger.sass
@@ -0,0 +1,16 @@
+
+.tofuburger
+ height: $top-height
+ width: 30px
+ border: none
+ line-height: 1
+ outline: none
+ text-indent: -9999px
+ background:
+ image: inline-image('line-icons/icon-tofuburger.svg')
+ size: 100%
+ position: center center
+ repeat: no-repeat
+ color: transparent
+ &:hover
+ cursor: pointer
diff --git a/app/templates/components/orgs-filter.hbs b/app/templates/components/orgs-filter.hbs
index b929ac85..978f008a 100644
--- a/app/templates/components/orgs-filter.hbs
+++ b/app/templates/components/orgs-filter.hbs
@@ -34,4 +34,3 @@
{{/each}}
-
diff --git a/app/templates/layouts/profile.hbs b/app/templates/layouts/profile.hbs
index 707b4192..33ed9f24 100644
--- a/app/templates/layouts/profile.hbs
+++ b/app/templates/layouts/profile.hbs
@@ -1,5 +1,5 @@