Commit b0864a9f authored by Jacob Schatz's avatar Jacob Schatz Committed by Rémy Coutable

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
parent 8b7080df
Please view this file on the master branch, on stable branches it's out of date. Please view this file on the master branch, on stable branches it's out of date.
v 8.5.2
- Fix sidebar overlapping content when screen width was below 1200px
v 8.5.1 v 8.5.1
- Fix group projects styles - Fix group projects styles
- Show Crowd login tab when sign in is disabled and Crowd is enabled (Peter Hudec) - Show Crowd login tab when sign in is disabled and Crowd is enabled (Peter Hudec)
......
...@@ -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
) )
...@@ -141,8 +141,12 @@ header { ...@@ -141,8 +141,12 @@ 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;
} }
} }
......
...@@ -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) {
.page-sidebar-collapsed {
@include collapsed-sidebar;
}
.page-sidebar-expanded {
@include collapsed-sidebar; @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) {
.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; @include expanded-sidebar;
}
} }
...@@ -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