Commit 3211d1cb authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'nav-over-content-mobile' into 'master'

Left sidebar overlaps the content on mobile devices

On mobile, the navigation sidebar will always revert to being hidden. When clicking the toggle, it will then go over the top of the content - rather than push the content.

See merge request !3087
parents b782e7c9 a965b033
...@@ -108,6 +108,8 @@ window.onload = -> ...@@ -108,6 +108,8 @@ window.onload = ->
setTimeout shiftWindow, 100 setTimeout shiftWindow, 100
$ -> $ ->
bootstrapBreakpoint = bp.getBreakpointSize()
$(".nicescroll").niceScroll(cursoropacitymax: '0.4', cursorcolor: '#FFF', cursorborder: "1px solid #FFF") $(".nicescroll").niceScroll(cursoropacitymax: '0.4', cursorcolor: '#FFF', cursorborder: "1px solid #FFF")
# Click a .js-select-on-focus field, select the contents # Click a .js-select-on-focus field, select the contents
...@@ -256,35 +258,14 @@ $ -> ...@@ -256,35 +258,14 @@ $ ->
$('.right-sidebar') $('.right-sidebar')
.hasClass('right-sidebar-collapsed'), { path: '/' }) .hasClass('right-sidebar-collapsed'), { path: '/' })
bootstrapBreakpoint = undefined;
checkBootstrapBreakpoints = ->
if $('.device-xs').is(':visible')
bootstrapBreakpoint = "xs"
else if $('.device-sm').is(':visible')
bootstrapBreakpoint = "sm"
else if $('.device-md').is(':visible')
bootstrapBreakpoint = "md"
else if $('.device-lg').is(':visible')
bootstrapBreakpoint = "lg"
setBootstrapBreakpoints = ->
if $('.device-xs').length
return
$("body")
.append('<div class="device-xs visible-xs"></div>'+
'<div class="device-sm visible-sm"></div>'+
'<div class="device-md visible-md"></div>'+
'<div class="device-lg visible-lg"></div>')
checkBootstrapBreakpoints()
fitSidebarForSize = -> fitSidebarForSize = ->
oldBootstrapBreakpoint = bootstrapBreakpoint oldBootstrapBreakpoint = bootstrapBreakpoint
checkBootstrapBreakpoints() bootstrapBreakpoint = bp.getBreakpointSize()
if bootstrapBreakpoint != oldBootstrapBreakpoint if bootstrapBreakpoint != oldBootstrapBreakpoint
$(document).trigger('breakpoint:change', [bootstrapBreakpoint]) $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
checkInitialSidebarSize = -> checkInitialSidebarSize = ->
bootstrapBreakpoint = bp.getBreakpointSize()
if bootstrapBreakpoint is "xs" or "sm" if bootstrapBreakpoint is "xs" or "sm"
$(document).trigger('breakpoint:change', [bootstrapBreakpoint]) $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
...@@ -293,6 +274,5 @@ $ -> ...@@ -293,6 +274,5 @@ $ ->
.on "resize", (e) -> .on "resize", (e) ->
fitSidebarForSize() fitSidebarForSize()
setBootstrapBreakpoints()
checkInitialSidebarSize() checkInitialSidebarSize()
new Aside() new Aside()
class @Breakpoints
instance = null;
class BreakpointInstance
BREAKPOINTS = ["xs", "sm", "md", "lg"]
constructor: ->
@setup()
setup: ->
allDeviceSelector = BREAKPOINTS.map (breakpoint) ->
".device-#{breakpoint}"
return if $(allDeviceSelector.join(",")).length
# Create all the elements
els = $.map BREAKPOINTS, (breakpoint) ->
"<div class='device-#{breakpoint} visible-#{breakpoint}'></div>"
$("body").append els.join('')
getBreakpointSize: ->
allDeviceSelector = BREAKPOINTS.map (breakpoint) ->
".device-#{breakpoint}"
$visibleDevice = $(allDeviceSelector.join(",")).filter(":visible")
return $visibleDevice.attr("class").split("visible-")[1]
@get: ->
return instance ?= new BreakpointInstance
$ =>
@bp = Breakpoints.get()
$(document).on("click", '.toggle-nav-collapse', (e) -> collapsed = 'page-sidebar-collapsed'
e.preventDefault() expanded = 'page-sidebar-expanded'
collapsed = 'page-sidebar-collapsed'
expanded = 'page-sidebar-expanded'
toggleSidebar = ->
$('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}") $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
$('header').toggleClass("header-collapsed header-expanded") $('header').toggleClass("header-collapsed header-expanded")
$('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded") $('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded")
...@@ -14,4 +13,15 @@ $(document).on("click", '.toggle-nav-collapse', (e) -> ...@@ -14,4 +13,15 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
niceScrollBars.updateScrollBar(); niceScrollBars.updateScrollBar();
), 300 ), 300
$(document).on("click", '.toggle-nav-collapse', (e) ->
e.preventDefault()
toggleSidebar()
) )
$ ->
size = bp.getBreakpointSize()
if size is "xs" or size is "sm"
if $('.page-with-sidebar').hasClass(expanded)
toggleSidebar()
...@@ -141,22 +141,18 @@ header { ...@@ -141,22 +141,18 @@ header {
margin-left: $sidebar_collapsed_width; margin-left: $sidebar_collapsed_width;
} }
@media (max-width: $screen-md-max) { .header-collapsed {
.header-collapsed { margin-left: $sidebar_collapsed_width;
margin-left: $sidebar_collapsed_width;
}
.header-expanded {
margin-left: $sidebar_width;
}
}
@media(min-width: $screen-md-max) { @media (min-width: $screen-md-min) {
.header-collapsed {
@include collapsed-header; @include collapsed-header;
} }
}
.header-expanded {
margin-left: $sidebar_collapsed_width;
.header-expanded { @media (min-width: $screen-md-min) {
margin-left: $sidebar_width; margin-left: $sidebar_width;
} }
} }
......
...@@ -34,12 +34,12 @@ ...@@ -34,12 +34,12 @@
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
padding-right: $gutter_width; padding-right: $gutter_width;
} }
} }
} }
.sidebar-wrapper { .sidebar-wrapper {
z-index: 99; z-index: 999;
background: $background-color; background: $background-color;
} }
...@@ -203,7 +203,11 @@ ...@@ -203,7 +203,11 @@
} }
@mixin expanded-sidebar { @mixin expanded-sidebar {
padding-left: $sidebar_width; padding-left: $sidebar_collapsed_width;
@media (min-width: $screen-md-min) {
padding-left: $sidebar_width;
}
&.right-sidebar-collapsed { &.right-sidebar-collapsed {
/* Extra small devices (phones, less than 768px) */ /* Extra small devices (phones, less than 768px) */
......
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