Commit 856153d7 authored by Jacob Schatz's avatar Jacob Schatz
Browse files

Merge branch 'feature/jschatz1/sidebar-sizing' into 'master'

Sidebar overlaps content when screen is below 1200px.

When screen is below 1200px, the sidebar overlaps.
When screen is above 1200px, the sidebar pushes content out.
z-index change to make sure hamburger stays on top.
Fixes #12717 
![screensize](/uploads/9a21fa06d583a49d6ebbf1ada34c6792/screensize.gif)

![screensize-small](/uploads/7c25f46e962248a40840562a01c83f8f/screensize-small.gif)

Also sorry I couldn't get the collapse button in the screen cap. It's there. 


See merge request !2620
parents 34ba39b9 be0f97a6
......@@ -8,4 +8,10 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
$('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded")
$('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
$.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
setTimeout ( ->
niceScrollBars = $('.nicescroll').niceScroll();
niceScrollBars.updateScrollBar();
), 300
)
......@@ -142,9 +142,13 @@ header {
}
@media (max-width: $screen-md-max) {
.header-collapsed, .header-expanded {
@include collapsed-header;
.header-collapsed {
margin-left: $sidebar_collapsed_width;
}
.header-expanded {
margin-left: $sidebar_width;
}
}
@media(min-width: $screen-md-max) {
......
......@@ -12,6 +12,10 @@
height: 100%;
transition-duration: .3s;
}
&.right-sidebar-expanded {
padding-right: $gutter_width;
}
}
.sidebar-wrapper {
......@@ -45,19 +49,6 @@
overflow: hidden;
transition-duration: .3s;
.home {
z-index: 1;
position: absolute;
left: 0px;
}
#logo {
z-index: 2;
position: absolute;
width: 58px;
cursor: pointer;
}
a {
float: left;
height: $header-height;
......@@ -83,7 +74,7 @@
width: 158px;
float: left;
margin: 0;
margin-left: 50px;
margin-left: 14px;
font-size: 19px;
line-height: 41px;
font-weight: normal;
......@@ -194,6 +185,10 @@
@mixin expanded-sidebar {
padding-left: $sidebar_width;
&.right-sidebar-collapsed {
padding-right: $sidebar_collapsed_width;
}
.sidebar-wrapper {
width: $sidebar_width;
......@@ -213,17 +208,13 @@
}
}
@mixin expanded-gutter {
padding-right: $gutter_width;
}
@mixin collapsed-gutter {
padding-right: $sidebar_collapsed_width;
}
@mixin collapsed-sidebar {
padding-left: $sidebar_collapsed_width;
&.right-sidebar-collapsed {
padding-right: $sidebar_collapsed_width;
}
.sidebar-wrapper {
width: $sidebar_collapsed_width;
......@@ -287,47 +278,10 @@
background: #f2f6f7;
}
// page is small enough
@media (max-width: $screen-md-max) {
.page-sidebar-collapsed {
@include collapsed-sidebar;
}
.page-sidebar-expanded {
@include collapsed-sidebar;
}
.page-gutter {
&.right-sidebar-collapsed {
@include collapsed-gutter;
}
&.right-sidebar-expanded {
@include expanded-gutter;
}
}
.collapse-nav {
display: none;
}
.page-sidebar-collapsed {
@include collapsed-sidebar;
}
// page is large enough
@media(min-width: $screen-md-max) {
.page-gutter {
&.right-sidebar-collapsed {
@include collapsed-gutter;
}
&.right-sidebar-expanded {
@include expanded-gutter;
}
}
.page-sidebar-collapsed {
@include collapsed-sidebar;
}
.page-sidebar-expanded {
@include expanded-sidebar;
}
}
\ No newline at end of file
.page-sidebar-expanded {
@include expanded-sidebar;
}
......@@ -6,7 +6,7 @@
Capybara.javascript_driver = :poltergeist
Capybara.register_driver :poltergeist do |app|
Capybara::Poltergeist::Driver.new(app, js_errors: true, timeout: timeout)
Capybara::Poltergeist::Driver.new(app, js_errors: true, timeout: timeout, window_size: [1366, 768])
end
Capybara.default_wait_time = timeout
......
......@@ -7,7 +7,7 @@
Capybara.javascript_driver = :poltergeist
Capybara.register_driver :poltergeist do |app|
Capybara::Poltergeist::Driver.new(app, js_errors: true, timeout: timeout)
Capybara::Poltergeist::Driver.new(app, js_errors: true, timeout: timeout, window_size: [1366, 768])
end
Capybara.default_wait_time = timeout
......
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