diff options
author | Phil Hughes <me@iamphill.com> | 2016-06-15 19:35:37 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-06-15 19:35:37 +0100 |
commit | 7886692147ac76e749729505ab368782e76f174e (patch) | |
tree | 2b4f2ccc7bff351679c00057711d12586a8a4535 | |
parent | 7d9157ff47c1380492a64aa3c7a1e1a7fa6b8e37 (diff) | |
download | gitlab-ce-7886692147ac76e749729505ab368782e76f174e.tar.gz |
Moved pinned button to the bottom
Changed breakpoint width to 1440px
-rw-r--r-- | app/assets/javascripts/application.js.coffee | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/gitlab-theme.scss | 7 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 36 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 1 | ||||
-rw-r--r-- | app/views/layouts/_collapse_button.html.haml | 5 | ||||
-rw-r--r-- | app/views/layouts/_page.html.haml | 6 |
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 |