rewrite topbar to fix in broadcasts, plus some cleanup

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";

app/styles/app/_mixins/fonts.sass

@@ -11,3 +11,5 @@ $line-height: 22px
 $line-height-log: 19px
 
 $font-weight-normal: 400
+
+$top-height: 55px

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
 

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

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

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
+  position: relative
-  top: 3.2em
-  width: 27em
-  z-index: 70
   background-color: $white
   list-style: none
   padding: 0 1em
-  margin: 0
+  margin: 0 auto .7em
-  border: solid 2px $cream-dark
   border-radius: 2px
-  margin-left: -0.7em
+  height: 0
-
+  transform-origin: top center
-  transform-origin: top left
+  transform: translateY(50%) scale(.9)
-  transform: translateY(-100%) 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

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

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

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
-
+  a
-  .navigation
+    color: $grey-medium
-    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
     &:hover
       text-decoration: underline
-
+  &.has-autoheight
-  .profile
+    height: auto
-    float: right
-    img
-      border-radius: 50%;
-      width: 2.7rem;
-      height: 2.7rem;
-      margin-left: 1rem;
-      transform: translateY(-0.1rem);
-
   @media #{$medium-up}
-    &.row
+    &,
-      height: $top-height
+    &.has-autoheight
-
+      position: relative
-    .navigation
-      padding: 0
       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

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

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')
 

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

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

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

app/templates/components/orgs-filter.hbs

@@ -34,4 +34,3 @@
     {{/each}}
   </ul>
 </div>
-

app/templates/layouts/profile.hbs

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

app/templates/top.hbs

@@ -1,25 +1,25 @@
-<div class="row topbar">
+<div class="topbar {{if is-open 'has-autoheight'}} {{if showBroadcasts 'has-autoheight'}}">
   <h1 id="logo" class="logo">{{#link-to "main"}}Travis{{/link-to}}</h1>
-  <div class="burger">
+
-    <button type="button" id="burger" class="burger-btn" {{action 'toggleBurgerMenu'}}>&equiv;</button>
+  <div class="navigation-toggle">
+    <button type="button" id="tofuburger" class="tofuburger" {{action 'toggleBurgerMenu'}}>Toggle Menu</button>
   </div>
 
-  <ul id="navigation" class="navigation {{if is-open 'is-open'}}">
+{{#if auth.signedIn}}
-
+  <div class="broadcast">
-    <li class="">
+    <span class="icon-broadcast {{broadcasts.lastBroadcastStatus}}" title="broadcasts" {{action 'toggleBroadcasts'}}></span>
-      {{#if auth.signedIn}}
+  </div>
-        <span class="navigation-anchor" {{action 'toggleBroadcasts'}}><span class="icon-broadcast {{broadcasts.lastBroadcastStatus}}" title="broadcasts"></span></span>
+  <ul class="broadcasts {{if showBroadcasts 'is-open'}}">
-        <ul class="broadcasts {{if showBroadcasts 'is-open'}}">
+  {{#each broadcasts.content as |broadcast|}}
-        {{#each broadcasts.content as |broadcast|}}
+    <li><p><span class="broadcast-status {{broadcast.category}}" title="Transmitted on {{broadcast.updated_at}}"></span> {{{broadcast.message}}}</p></li>
-          <li><p><span class="broadcast-status {{broadcast.category}}" title="{{broadcast.updated_at}}"></span> {{{broadcast.message}}}</p></li>
+  {{/each}}
-        {{/each}}
+  </ul>
-        </ul>
+{{/if}}
-      {{/if}}
-    </li>
-
-    <li><a href="http://blog.travis-ci.com">Blog</a></li>
-    <li><a href="http://www.traviscistatus.com/">Status</a></li>
 
+  <nav id="navigation" class="navigation {{if is-open 'is-open'}}">
+    <ul>
+      <li><a href="http://blog.travis-ci.com" class="navigation-anchor">Blog</a></li>
+      <li><a href="http://www.traviscistatus.com/" class="navigation-anchor">Status</a></li>
     {{#unless config.pro}}
       <li>
         <span class="navigation-anchor">Help</span>
@@ -30,49 +30,47 @@
       </li>
     {{/unless}}
 
-    {{#if config.pro}}
+      {{#if config.pro}}
-      <li><a href="http://docs.travis-ci.com">Docs</a></li>
+        <li><a href="http://docs.travis-ci.com">Docs</a></li>
-      <li>
+        <li>
-        <span class="navigation-anchor">Legal</span>
+          <span class="navigation-anchor">Legal</span>
-        <ul class="navigation-nested">
+          <ul class="navigation-nested">
-          <li><a href={{config.urls.imprint}}>Imprint</a></li>
+            <li><a href={{config.urls.imprint}}>Imprint</a></li>
-          <li><a href={{config.urls.security}}>Security</a></li>
+            <li><a href={{config.urls.security}}>Security</a></li>
-          <li><a href={{config.urls.terms}}>Terms</a></li>
+            <li><a href={{config.urls.terms}}>Terms</a></li>
-        </ul>
+          </ul>
-      </li>
+        </li>
-    {{/if}}
+      {{/if}}
 
-    <li class="{{view.classProfile}}">
+      <li class="{{view.classProfile}}">
-      <span class="navigation-anchor">
         {{#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"}}{{userName}}
+          {{#link-to "profile" class="navigation-anchor signed-in"}}{{userName}}<img src={{gravatarUrl}} />
-            <img src={{gravatarUrl}} />
           {{/link-to}}
         {{/if}}
         {{#if auth.signingIn}}
           <button class="signing-in button--signingin">Signing In <span class="loading-indicator--white"><i></i><i></i><i></i></span></button>
         {{/if}}
-      </span>
+        {{#if auth.signedIn}}
-      {{#if auth.signedIn}}
+          <ul class="navigation-nested">
-        <ul class="navigation-nested">
-          <li>
-            {{#link-to "profile" class="signed-in"}}Accounts{{/link-to}}
-          </li>
-          {{#if config.billingEndpoint}}
             <li>
-              <a href={{config.billingEndpoint}}>Billing</a>
+              {{#link-to "profile" class="signed-in"}}Accounts{{/link-to}}
             </li>
-          {{/if}}
+            {{#if config.billingEndpoint}}
-          <li>
+              <li>
-            <a href="/" {{action "signOut" target="auth"}}>Sign Out</a>
+                <a href={{config.billingEndpoint}}>Billing</a>
-          </li>
+              </li>
-        </ul>
+            {{/if}}
-      {{/if}}
+            <li>
-    </li>
+              <a href="/" {{action "signOut" target="auth"}}>Sign Out</a>
-  </ul>
+            </li>
+          </ul>
+        {{/if}}
+      </li>
+    </ul>
+  </nav>
 </div>
 
 {{#if showCta}}

public/images/line-icons/icon-tofuburger.svg

@@ -1,4 +1,5 @@
-<svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
 	<g id="Tofuburger">
 		<path fill="#A7AEAE" d="M17.9,6.2H2.1C1.8,6.2,1.5,6,1.5,5.6C1.5,5.3,1.8,5,2.1,5h15.7c0.4,0,0.6,0.3,0.6,0.6
 			C18.5,6,18.2,6.2,17.9,6.2z"/>