Commit 78866921 authored by Phil Hughes's avatar Phil Hughes

Moved pinned button to the bottom

Changed breakpoint width to 1440px
parent 7d9157ff
...@@ -259,7 +259,7 @@ $ -> ...@@ -259,7 +259,7 @@ $ ->
new Aside() new Aside()
# Sidenav pinning # 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') $.cookie('pin_nav', 'false')
$('.page-with-sidebar') $('.page-with-sidebar')
.toggleClass('page-sidebar-collapsed page-sidebar-expanded') .toggleClass('page-sidebar-collapsed page-sidebar-expanded')
......
...@@ -8,9 +8,14 @@ ...@@ -8,9 +8,14 @@
*/ */
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
.page-with-sidebar { .page-with-sidebar {
.collapse-nav { .toggle-nav-collapse,
.pin-nav-btn {
color: $color-light; color: $color-light;
background: $color; background: $color;
&:hover {
color: $white-light;
}
} }
.sidebar-wrapper { .sidebar-wrapper {
......
...@@ -49,6 +49,10 @@ ...@@ -49,6 +49,10 @@
font-size: 16px; font-size: 16px;
line-height: 36px; line-height: 36px;
transition: width $sidebar-transition-duration, padding $sidebar-transition-duration; transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
@media (min-width: $sidebar-breakpoint) {
bottom: 50px;
}
} }
...@@ -70,6 +74,10 @@ ...@@ -70,6 +74,10 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@media (min-width: $sidebar-breakpoint) {
bottom: 115px;
}
&.navbar-collapse { &.navbar-collapse {
padding: 0 !important; padding: 0 !important;
} }
...@@ -120,15 +128,15 @@ ...@@ -120,15 +128,15 @@
} }
} }
.collapse-nav { .toggle-nav-collapse {
width: 100%; width: $sidebar_width;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
min-height: 50px; min-height: 50px;
padding: 5px 0; padding: 5px 0;
font-size: 18px; font-size: 18px;
background: transparent; line-height: 30px;
} }
.nav-header-btn { .nav-header-btn {
...@@ -143,16 +151,18 @@ ...@@ -143,16 +151,18 @@
} }
} }
.toggle-nav-collapse {
position: relative;
left: 10px;
line-height: 40px;
}
.pin-nav-btn { .pin-nav-btn {
display: none;
position: absolute; position: absolute;
right: 10px; left: 0;
top: 2px; bottom: 0;
height: 50px;
width: $sidebar_width;
line-height: 30px;
@media (min-width: $sidebar-breakpoint) {
display: block;
}
.fa { .fa {
transition: transform .15s; transition: transform .15s;
...@@ -182,14 +192,14 @@ ...@@ -182,14 +192,14 @@
.page-sidebar-pinned { .page-sidebar-pinned {
.content-wrapper, .content-wrapper,
.layout-nav { .layout-nav {
@media (min-width: $screen-lg-min) { @media (min-width: $sidebar-breakpoint) {
padding-left: $sidebar_width; padding-left: $sidebar_width;
} }
} }
} }
header.header-pinned-nav { header.header-pinned-nav {
@media (min-width: $screen-lg-min) { @media (min-width: $sidebar-breakpoint) {
padding-left: ($sidebar_width + $gl-padding); padding-left: ($sidebar_width + $gl-padding);
.side-nav-toggle { .side-nav-toggle {
......
...@@ -7,6 +7,7 @@ $gutter_collapsed_width: 62px; ...@@ -7,6 +7,7 @@ $gutter_collapsed_width: 62px;
$gutter_width: 290px; $gutter_width: 290px;
$gutter_inner_width: 258px; $gutter_inner_width: 258px;
$sidebar-transition-duration: .15s; $sidebar-transition-duration: .15s;
$sidebar-breakpoint: 1440px;
/* /*
* UI elements * UI elements
......
= 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 %span.sr-only Toggle navigation
= icon('bars') = 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')
.page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" } .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
.sidebar-wrapper.nicescroll{ class: nav_sidebar_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 - if defined?(sidebar) && sidebar
= render "layouts/nav/#{sidebar}" = render "layouts/nav/#{sidebar}"
...@@ -14,6 +13,9 @@ ...@@ -14,6 +13,9 @@
= image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36' = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'
.username .username
= current_user.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 - if defined?(nav) && nav
.layout-nav .layout-nav
.container-fluid .container-fluid
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment