Commit f0f6723f authored by Phil Hughes's avatar Phil Hughes

Created bootstrap breakpoint class

This class checks the current bootstrap breakpoint
parent ce9bbce7
......@@ -256,35 +256,15 @@ $ ->
$('.right-sidebar')
.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 = ->
oldBootstrapBreakpoint = bootstrapBreakpoint
checkBootstrapBreakpoints()
bootstrapBreakpoint = breakpoints.getBreakpointSize()
if bootstrapBreakpoint != oldBootstrapBreakpoint
$(document).trigger('breakpoint:change', [bootstrapBreakpoint])
checkInitialSidebarSize = ->
bootstrapBreakpoint = breakpoints.getBreakpointSize()
if bootstrapBreakpoint is "xs" or "sm"
$(document).trigger('breakpoint:change', [bootstrapBreakpoint])
......@@ -293,6 +273,7 @@ $ ->
.on "resize", (e) ->
fitSidebarForSize()
setBootstrapBreakpoints()
checkInitialSidebarSize()
breakpoints = new Breakpoints()
bootstrapBreakpoint = breakpoints.getBreakpointSize()
new Aside()
class @Breakpoints
BREAKPOINTS = ["xs", "sm", "md", "lg"]
constructor: ->
@setup()
setup: ->
allDeviceSelector = BREAKPOINTS.map (breakpoint) ->
".device-#{breakpoint}"
if $(allDeviceSelector.join(",")).length
return
# Create all the elements
$.each BREAKPOINTS, (i, breakpoint) ->
$("body").append "<div class='device-#{breakpoint} visible-#{breakpoint}'></div>"
getBreakpointSize: ->
allDeviceSelector = BREAKPOINTS.map (breakpoint) ->
".device-#{breakpoint}"
$visibleDevice = $(allDeviceSelector.join(",")).filter(":visible")
return $visibleDevice.attr("class").split("visible-")[1]
mobileWidth = 768
mobileWidth = 991
collapsed = 'page-sidebar-collapsed'
expanded = 'page-sidebar-expanded'
......@@ -21,6 +21,9 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
)
$ ->
if $(window).width() < mobileWidth
breakpoints = new Breakpoints()
size = breakpoints.getBreakpointSize()
if size is "xs" or size is "sm"
if $('.page-with-sidebar').hasClass(expanded)
toggleSidebar()
......@@ -141,22 +141,18 @@ header {
margin-left: $sidebar_collapsed_width;
}
@media (max-width: $screen-sm-min) {
.header-collapsed {
.header-collapsed {
margin-left: $sidebar_collapsed_width;
}
.header-expanded {
margin-left: $sidebar_collapsed_width;
@media (min-width: $screen-sm-max) {
@include collapsed-header;
}
}
@media(min-width: $screen-sm-min) {
.header-collapsed {
@include collapsed-header;
}
.header-expanded {
margin-left: $sidebar_collapsed_width;
.header-expanded {
@media (min-width: $screen-sm-max) {
margin-left: $sidebar_width;
}
}
......
......@@ -205,7 +205,7 @@
@mixin expanded-sidebar {
padding-left: $sidebar_collapsed_width;
@media (min-width: $screen-sm-min) {
@media (min-width: $screen-sm-max) {
padding-left: $sidebar_width;
}
......
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