From f9e6108537dedd63bf05df5d181657fe03435104 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Tue, 3 Feb 2015 17:53:33 +0100
Subject: [PATCH] also consider pro

---
 .../app/templates/layouts/dashboard.hbs       |  2 +-
 assets/scripts/app/templates/layouts/home.hbs | 37 ++++++-----
 .../scripts/app/templates/layouts/profile.hbs | 57 +++++++++--------
 assets/scripts/app/templates/repo.hbs         |  2 +-
 assets/scripts/app/templates/top.hbs          |  4 +-
 assets/styles/app/_mixins/vars.sass           |  4 +-
 assets/styles/app/auth.sass                   |  8 +--
 .../styles/app/components/travis-switch.sass  |  1 +
 assets/styles/app/layout.sass                 | 63 +++++++++++++++++++
 assets/styles/app/layouts/dashboard.sass      |  4 ++
 assets/styles/app/layouts/footer.sass         |  2 +-
 assets/styles/app/main/repository.sass        | 17 ++---
 assets/styles/app/main/tools.sass             |  4 ++
 assets/styles/app/maximize.sass               | 14 ++---
 assets/styles/app/pro.sass                    | 13 +---
 assets/styles/app/profile/hooks.sass          |  1 +
 assets/styles/app/right.sass                  |  7 +--
 assets/styles/app/top.sass                    | 19 +++---
 18 files changed, 170 insertions(+), 89 deletions(-)

diff --git a/assets/scripts/app/templates/layouts/dashboard.hbs b/assets/scripts/app/templates/layouts/dashboard.hbs
index 17f13918..34a3685d 100644
--- a/assets/scripts/app/templates/layouts/dashboard.hbs
+++ b/assets/scripts/app/templates/layouts/dashboard.hbs
@@ -1,5 +1,5 @@
 <div class="centered">
-  <div class="wrapper">
+  <div class="wrapper wrapper-dashboard">
     <div id="top">
       <div class="row">
         <div class="small-2 medium-2 columns" id="logo">
diff --git a/assets/scripts/app/templates/layouts/home.hbs b/assets/scripts/app/templates/layouts/home.hbs
index d4e31df8..b36de3c8 100644
--- a/assets/scripts/app/templates/layouts/home.hbs
+++ b/assets/scripts/app/templates/layouts/home.hbs
@@ -1,18 +1,23 @@
-<div id="top">
-  {{render "top"}}
-</div>
+<div class="wrapper">
+  
+  <header id="top">
+    {{render "top"}}
+  </header>
 
-<div id="main">
-  {{render "flash"}}
-  {{yield}}
-</div>
-
-<div id="left">
-  {{outlet "left"}}
-</div>
-
-{{#if config.pro}}
-  <div id="right">
-    {{render "sidebar"}}
+  <div class="wrapper-main">
+    <main id="main" role="main">
+      {{render "flash"}}
+      {{yield}}
+    </main>
+    {{#if config.pro}}
+      <aside id="right">
+        {{render "sidebar"}}
+      </aside>
+    {{/if}}
   </div>
-{{/if}}
+
+  <aside id="left">
+    {{outlet "left"}}
+  </aside>
+
+</div>
diff --git a/assets/scripts/app/templates/layouts/profile.hbs b/assets/scripts/app/templates/layouts/profile.hbs
index 736b3899..030f7f8c 100644
--- a/assets/scripts/app/templates/layouts/profile.hbs
+++ b/assets/scripts/app/templates/layouts/profile.hbs
@@ -1,32 +1,37 @@
-<div id="top">
-  {{render "top"}}
-</div>
+<div class="wrapper">
+  <header id="top">
+    {{render "top"}}
+  </header>
 
-<div id="left">
-  {{outlet "left"}}
-</div>
+  <div class="wrapper-main">
+    <main id="main" role="main">
+      {{render "flash"}}
+      {{yield}}
+    </main>
 
-<div id="main">
-  {{render "flash"}}
-  {{yield}}
-</div>
+    <aside id="right">
+      <div id="slider" {{action "toggle" target=Travis.slider}}>
+        <div class='icon'></div>&nbsp;
+      </div>
 
-<div id="right">
-  <div id="slider" {{action "toggle" target=Travis.slider}}>
-    <div class='icon'></div>&nbsp;
+      <div class="box">
+        <h4>Getting started?</h4>
+        <p>
+          Please read our <a href="http://docs.travis-ci.com/user/getting-started">guide</a>.
+          You'll be up and running in no time!
+        </p>
+        <p>
+          You can find detailed docs on our <a href="http://docs.travis-ci.com">documentation</a> site.
+        </p>
+        <p>
+          If you need help <a href="http://stackoverflow.com/questions/ask?tags=travis-ci">ask a question</a> or hop on <a href="irc://irc.freenode.net/#travis">#travis</a> on irc.freenode.net
+        </p>
+      </div>
+    </aside>
   </div>
 
-  <div class="box">
-    <h4>Getting started?</h4>
-    <p>
-      Please read our <a href="http://docs.travis-ci.com/user/getting-started">guide</a>.
-      You'll be up and running in no time!
-    </p>
-    <p>
-      You can find detailed docs on our <a href="http://docs.travis-ci.com">documentation</a> site.
-    </p>
-    <p>
-      If you need help <a href="http://stackoverflow.com/questions/ask?tags=travis-ci">ask a question</a> or hop on <a href="irc://irc.freenode.net/#travis">#travis</a> on irc.freenode.net
-    </p>
-  </div>
+  <aside id="left">
+    {{outlet "left"}}
+  </aside>
+
 </div>
diff --git a/assets/scripts/app/templates/repo.hbs b/assets/scripts/app/templates/repo.hbs
index 0be0cf77..ec2626c4 100644
--- a/assets/scripts/app/templates/repo.hbs
+++ b/assets/scripts/app/templates/repo.hbs
@@ -17,8 +17,8 @@
 
       <p class="description">{{description}}</p>
 
-      {{view 'repo-show-tabs'}}
       {{view 'repo-actions'}}
+      {{view 'repo-show-tabs'}}
 
       <div class="tab">
         {{outlet}}
diff --git a/assets/scripts/app/templates/top.hbs b/assets/scripts/app/templates/top.hbs
index 91994178..8852a0a1 100644
--- a/assets/scripts/app/templates/top.hbs
+++ b/assets/scripts/app/templates/top.hbs
@@ -4,7 +4,9 @@
   </div>
 {{/link-to}}
 
-<button type="button" id="burger">&equiv;</button>
+<div class="nav-burger">
+  <button type="button" id="burger">&equiv;</button>
+</div>
 
 <ul id="navigation">
   <li class="home">
diff --git a/assets/styles/app/_mixins/vars.sass b/assets/styles/app/_mixins/vars.sass
index 34f63469..d0d538df 100644
--- a/assets/styles/app/_mixins/vars.sass
+++ b/assets/styles/app/_mixins/vars.sass
@@ -1,5 +1,6 @@
 
 $blue-grey: #404650
+$light-gray: #e9e9e7
 
 $logo-red: #dc4136
 
@@ -12,7 +13,8 @@ $main-repo-hover-color: #607a84
 $travis-lint-color: #9b9d9e
 $travis-lint-bg: #fafafa
 
-$left-bg: #e9e9e7
+$left-bg: $light-gray
+$right-bg: $light-gray
 
 // dashboard
 $pass-color: #3ba85d
diff --git a/assets/styles/app/auth.sass b/assets/styles/app/auth.sass
index a93ec6cb..6f6cc32b 100644
--- a/assets/styles/app/auth.sass
+++ b/assets/styles/app/auth.sass
@@ -5,10 +5,7 @@
     margin: 0 auto
     padding: 100px 50px 0 50px
     height: 100px
-
-    -webkit-flex: none
-    flex: none
-    width: 300px
+    width: 400px
     min-width: auto
     max-height: 400px
     @include border-radius(8px)
@@ -24,6 +21,7 @@
       color: #337389
       text-align: center
       margin: 0
+      line-height: 1
 
     p
       text-align: center
@@ -56,7 +54,7 @@
   width: 850px
   margin: 0 auto
   padding-top: 30px
-  font-family: 'Source Sans Pro', Helvetica, sans-serif
+  // font-family: 'Source Sans Pro', Helvetica, sans-serif
   font-size: 17px
   line-height: 26px
   text-align: center
diff --git a/assets/styles/app/components/travis-switch.sass b/assets/styles/app/components/travis-switch.sass
index 0ca98cdf..72a7bb5e 100644
--- a/assets/styles/app/components/travis-switch.sass
+++ b/assets/styles/app/components/travis-switch.sass
@@ -13,6 +13,7 @@ p.settings-row
   line-height: 30px
 
 .travis-switch
+  box-sizing: content-box
   position: relative
   display: inline-block
   float: left
diff --git a/assets/styles/app/layout.sass b/assets/styles/app/layout.sass
index ba7e5c07..2c2aa14b 100644
--- a/assets/styles/app/layout.sass
+++ b/assets/styles/app/layout.sass
@@ -40,12 +40,25 @@
   position: relative
   padding: 20px 30px 80px
 
+
+.wrapper
+  overflow: hidden
+  #main,
+  #left,
+  #right
+    margin-bottom: -99999px
+    padding-bottom: 100034px
+
 @media #{$medium-up}
 
   #main
     width: grid-calc(22, 24)
     margin: auto
 
+  #auth
+    #main
+      float: none
+
   #profile
     #main
       width: grid-calc(18, 24)
@@ -56,6 +69,32 @@
       width: grid-calc(6, 24)
       float: right
 
+  .pro,
+  #profile.pro
+    .wrapper-main
+      overflow: auto
+      width: grid-calc(24, 24)
+      clear: both
+    #main
+      width: grid-calc(18, 24)
+      float: left
+      overflow: hidden
+    #right
+      width: grid-calc(6, 24)
+      float: right
+
+  .pro.maximized,
+  #profile.pro.maximized
+    .wrapper-main
+      width: grid-calc(24, 24)
+      clear: both
+    #main
+      width: grid-calc(24, 24)
+      float: none
+      overflow: hidden
+    #right
+      width: 0
+
 
 @media #{$large-up}
   #left
@@ -74,6 +113,30 @@
     #right
       width: grid-calc(4, 24)
 
+  .pro,
+  #profile.pro
+    .wrapper-main
+      width: grid-calc(19, 24)
+      float: right
+    #main
+      width: grid-calc(19, 24)
+      float: left
+    #right
+      width: grid-calc(5, 24)
+      float: right
+
+  .pro.maximized,
+  #profile.pro.maximized
+    .wrapper-main
+      overflow: auto
+      width: grid-calc(19, 24)
+      float: right
+    #main
+      width: grid-calc(24, 24)
+      float: none
+    #right
+      width: 0
+
 .travis-lint
   background-color: $travis-lint-bg
   width: 100%
diff --git a/assets/styles/app/layouts/dashboard.sass b/assets/styles/app/layouts/dashboard.sass
index 4b8cef5f..9e8eddb5 100644
--- a/assets/styles/app/layouts/dashboard.sass
+++ b/assets/styles/app/layouts/dashboard.sass
@@ -5,6 +5,10 @@
 
 @import "app/_mixins/all"
 
+
+.wrapper-dashboard
+  background-color: $wrapper-bg-color
+
 .current-org-avatar
   display     : inline-block
   height      : 20px
diff --git a/assets/styles/app/layouts/footer.sass b/assets/styles/app/layouts/footer.sass
index bc30331d..baa933a7 100644
--- a/assets/styles/app/layouts/footer.sass
+++ b/assets/styles/app/layouts/footer.sass
@@ -1,6 +1,7 @@
 /*
  * Footer on the dashboard
  */
+@import "app/_mixins/all"
 
 footer
   padding          : 20px 0
@@ -14,7 +15,6 @@ footer
   padding-bottom: 334px
   min-height: 100%
   height: auto
-  background-color: $wrapper-bg-color
 @media (min-width: 640px)
   .wrapper
     padding-bottom: 204px
diff --git a/assets/styles/app/main/repository.sass b/assets/styles/app/main/repository.sass
index 2f5b2eb8..4f66cd18 100644
--- a/assets/styles/app/main/repository.sass
+++ b/assets/styles/app/main/repository.sass
@@ -12,18 +12,13 @@
 
   .status-image
     position: relative
-    top: 10px
     width: 90px
     height: 25px
-    display: inline-block
-    margin-left: 15px
     vertical-align: top
 
     a#status-image-popup
       display: inline-block
       opacity: 1.0
-      //margin-top: 8px
-
       img
         border: none
 
@@ -32,12 +27,10 @@
     height: 21px
     display: inline-block
     position: relative
-    top: 9px
     vertical-align: top
 
   .github-icon
     img
-      margin-top: 2px
       opacity: 0.65
 
   .not-found
@@ -89,3 +82,13 @@
         background-size: 12px
         opacity: 1
       padding-right: 16px
+
+
+  @media #{$medium-up}
+    .github-icon
+      display: inline-block
+      top: 9px
+    .status-image
+      display: inline-block
+      top: 9px
+
diff --git a/assets/styles/app/main/tools.sass b/assets/styles/app/main/tools.sass
index 5e3dbc7d..71dedd0f 100644
--- a/assets/styles/app/main/tools.sass
+++ b/assets/styles/app/main/tools.sass
@@ -2,6 +2,8 @@
 
 #tools
 
+  position: relative
+
   @media #{$medium-up}
     position: relative
     float: right
@@ -67,6 +69,8 @@
 
   @media #{$medium-up}
     float: right
+    position: relative
+    top: 1.8em
     ul
       margin-top: -27px
     li
diff --git a/assets/styles/app/maximize.sass b/assets/styles/app/maximize.sass
index b8a469c1..deb4a98a 100644
--- a/assets/styles/app/maximize.sass
+++ b/assets/styles/app/maximize.sass
@@ -2,23 +2,23 @@
 
 .pro.maximized
   #right
-    width: 0
-    padding: 0
-    flex: 0
-    -webkit-flex: 0
-    -moz-flex: 0
-    -ms-flex: 0
+    display: none
     *:not(#slider):not(.icon):not(.ember-view)
       display: none
 
   #slider
+    top: 45px
     left: -20px
     width: 20px
     height: 20px
     background-image: inline-image('ui/slider-open.svg')
     background-position: 6px 5px
     @include border-bottom-left-radius(4px)
-    top: 45px
+    display: none
+
+    @media #{$medium-up}
+      display: block
+
 
 #top .profile
   margin-right: 15px
diff --git a/assets/styles/app/pro.sass b/assets/styles/app/pro.sass
index 09e9e330..7321c0cf 100644
--- a/assets/styles/app/pro.sass
+++ b/assets/styles/app/pro.sass
@@ -104,10 +104,8 @@
     .group a
       cursor: pointer
 
-  @import "app/_mixins/all"
-
   #right
-    padding-bottom: 80px
+    // padding-bottom: 80px
 
     h4
       margin: 24px 0 0 0
@@ -160,15 +158,8 @@
     text-decoration: underline
     cursor: pointer
 
-  @mixin flex($grow, $shrink, $size)
-    -webkit-flex: $grow $shrink $size
-    flex:         $grow $shrink $size
-
   #right
-    @include flex(1, 1, 300px)
-    max-width: 180px
-    padding: 25px 20px 80px 20px
-    background-color: #E9E9E7
+    background-color: $right-bg
     border-left: 1px solid $color-border-normal
 
   #settings li.env-var span.name
diff --git a/assets/styles/app/profile/hooks.sass b/assets/styles/app/profile/hooks.sass
index 342040f2..aeb2145a 100644
--- a/assets/styles/app/profile/hooks.sass
+++ b/assets/styles/app/profile/hooks.sass
@@ -15,6 +15,7 @@
   margin-top: 10px
 
   li
+    box-sizing: content-box
     position: relative
     height: 19px
     padding: 10px
diff --git a/assets/styles/app/right.sass b/assets/styles/app/right.sass
index 7c0b1642..1ac9939b 100644
--- a/assets/styles/app/right.sass
+++ b/assets/styles/app/right.sass
@@ -2,11 +2,10 @@
 
 #profile
   #right
-    //min-width: 180px
-    //max-width: 180px
-    padding: 13px 20px 80px 20px
+    padding-top: 13px
+    padding-right: 20px
+    padding-left: 20px
     background-color: #E9E9E7
-    //float: right
     border-left: 1px solid $color-border-normal
 
     h4
diff --git a/assets/styles/app/top.sass b/assets/styles/app/top.sass
index 7eb5693b..e35376bd 100644
--- a/assets/styles/app/top.sass
+++ b/assets/styles/app/top.sass
@@ -55,7 +55,13 @@
     li.traviscicom
       display: none
 
+  .nav-burger
+    overflow: auto
+    @media #{$medium-up}
+      display: none
+
   #burger
+    float: right
     font-size: 50px
     background: none
     border: none
@@ -65,8 +71,7 @@
     @include clearfix
     &:hover
       cursor: pointer
-    @media #{$medium-up}
-      display: none
+    
 
   &.is-open
     height: auto
@@ -118,8 +123,6 @@
       width: 30px
       height: 30px
       border-radius: 100px
-      -webkit-border-radius: 100px
-      -moz-border-radius: 100px
 
     ul
       min-width: 145px
@@ -175,13 +178,13 @@
 //   display : none
 
 #top img
-  float  : right
-  margin : 14px 0 0 10px
+  margin: 10px 10px 7px 10px
   width  : 30px
   height : 30px
   border-radius: 100px
-
-
+  @media #{$medium-up}
+    float  : right
+    margin : 14px 0 0 10px
 
 // #user ul
 //   text-align : left