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

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