Moved pinned button to the bottom

Changed breakpoint width to 1440px

6 files changed, 36 insertions, 21 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 704911aa13d..bd835436a03 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -259,7 +259,7 @@ $ ->
   new Aside()
 
   # Sidenav pinning
-  if bootstrapBreakpoint isnt 'lg' and $.cookie('pin_nav') is 'true'
+  if $(window).width() < 1440 and $.cookie('pin_nav') is 'true'
     $.cookie('pin_nav', 'false')
     $('.page-with-sidebar')
       .toggleClass('page-sidebar-collapsed page-sidebar-expanded')
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index bb09de4121f..0a8603b6702 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -8,9 +8,14 @@
  */
 @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
   .page-with-sidebar {
-    .collapse-nav {
+    .toggle-nav-collapse,
+    .pin-nav-btn {
       color: $color-light;
       background: $color;
+
+      &:hover {
+        color: $white-light;
+      }
     }
 
     .sidebar-wrapper {
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 1ac11989d7f..281c0a0e1e9 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -49,6 +49,10 @@
   font-size: 16px;
   line-height: 36px;
   transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
+
+  @media (min-width: $sidebar-breakpoint) {
+    bottom: 50px;
+  }
 }
 
 
@@ -70,6 +74,10 @@
   overflow-y: auto;
   overflow-x: hidden;
 
+  @media (min-width: $sidebar-breakpoint) {
+    bottom: 115px;
+  }
+
   &.navbar-collapse {
     padding: 0 !important;
   }
@@ -120,15 +128,15 @@
   }
 }
 
-.collapse-nav {
-  width: 100%;
+.toggle-nav-collapse {
+  width: $sidebar_width;
   position: absolute;
   top: 0;
   left: 0;
   min-height: 50px;
   padding: 5px 0;
   font-size: 18px;
-  background: transparent;
+  line-height: 30px;
 }
 
 .nav-header-btn {
@@ -143,16 +151,18 @@
   }
 }
 
-.toggle-nav-collapse {
-  position: relative;
-  left: 10px;
-  line-height: 40px;
-}
-
 .pin-nav-btn {
+  display: none;
   position: absolute;
-  right: 10px;
-  top: 2px;
+  left: 0;
+  bottom: 0;
+  height: 50px;
+  width: $sidebar_width;
+  line-height: 30px;
+
+  @media (min-width: $sidebar-breakpoint) {
+    display: block;
+  }
 
   .fa {
     transition: transform .15s;
@@ -182,14 +192,14 @@
 .page-sidebar-pinned {
   .content-wrapper,
   .layout-nav {
-    @media (min-width: $screen-lg-min) {
+    @media (min-width: $sidebar-breakpoint) {
       padding-left: $sidebar_width;
     }
   }
 }
 
 header.header-pinned-nav {
-  @media (min-width: $screen-lg-min) {
+  @media (min-width: $sidebar-breakpoint) {
     padding-left: ($sidebar_width + $gl-padding);
 
     .side-nav-toggle {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 670edb9300d..acada1f16a0 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -7,6 +7,7 @@ $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;
 $sidebar-transition-duration: .15s;
+$sidebar-breakpoint: 1440px;
 
 /*
  * UI elements
diff --git a/app/views/layouts/_collapse_button.html.haml b/app/views/layouts/_collapse_button.html.haml
index 5442ee4efe3..8c140a5943e 100644
--- a/app/views/layouts/_collapse_button.html.haml
+++ b/app/views/layouts/_collapse_button.html.haml
@@ -1,6 +1,3 @@
-= link_to '#', class: 'nav-header-btn toggle-nav-collapse', title: "Open/Close" do
+= link_to '#', class: 'nav-header-btn text-center toggle-nav-collapse', title: "Open/Close" do
   %span.sr-only Toggle navigation
   = icon('bars')
-= link_to '#', class: "nav-header-btn pin-nav-btn #{'is-active' if pinned_nav?} visible-lg-block js-nav-pin", title: 'Pin/Unpin navigation' do
-  %span.sr-only Toggle navigation pinning
-  = icon('thumb-tack')
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 90e872c461d..199ab3c38c3 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,7 +1,6 @@
 .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
-    %header.collapse-nav
-      = render partial: 'layouts/collapse_button'
+    = render partial: 'layouts/collapse_button'
     - if defined?(sidebar) && sidebar
       = render "layouts/nav/#{sidebar}"
     - elsif current_user
@@ -14,6 +13,9 @@
         = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'
         .username
           = current_user.username
+    = link_to '#', class: "nav-header-btn text-center pin-nav-btn #{'is-active' if pinned_nav?} js-nav-pin", title: 'Pin/Unpin navigation' do
+      %span.sr-only Toggle navigation pinning
+      = icon('thumb-tack')
   - if defined?(nav) && nav
     .layout-nav
       .container-fluid