Changed breakpoint size

Changed breakpoint class into singleton

app/assets/javascripts/application.js.coffee

@@ -108,8 +108,7 @@ window.onload = ->
     setTimeout shiftWindow, 100
 
 $ ->
-  breakpoints = new Breakpoints()
-  bootstrapBreakpoint = breakpoints.getBreakpointSize()
+  bootstrapBreakpoint = bp.getBreakpointSize()
 
   $(".nicescroll").niceScroll(cursoropacitymax: '0.4', cursorcolor: '#FFF', cursorborder: "1px solid #FFF")
 
@@ -261,12 +260,12 @@ $ ->
 
   fitSidebarForSize = ->
     oldBootstrapBreakpoint = bootstrapBreakpoint
-    bootstrapBreakpoint = breakpoints.getBreakpointSize()
+    bootstrapBreakpoint = bp.getBreakpointSize()
     if bootstrapBreakpoint != oldBootstrapBreakpoint
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 
   checkInitialSidebarSize = ->
-    bootstrapBreakpoint = breakpoints.getBreakpointSize()
+    bootstrapBreakpoint = bp.getBreakpointSize()
     if bootstrapBreakpoint is "xs" or "sm"
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 

app/assets/javascripts/breakpoints.coffee

 class @Breakpoints
+  instance = null;
+
+  class BreakpointInstance
     BREAKPOINTS = ["xs", "sm", "md", "lg"]
 
     constructor: ->
@@ -8,17 +11,23 @@ class @Breakpoints
       allDeviceSelector = BREAKPOINTS.map (breakpoint) ->
         ".device-#{breakpoint}"
 
-    if $(allDeviceSelector.join(",")).length
-      return
+      return if $(allDeviceSelector.join(",")).length
 
       # Create all the elements
       $.each BREAKPOINTS, (i, breakpoint) ->
         $("body").append "<div class='device-#{breakpoint} visible-#{breakpoint}'></div>"
 
     getBreakpointSize: ->
+      @setup()
+      
       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()

app/assets/javascripts/sidebar.js.coffee

-mobileWidth = 991
 collapsed = 'page-sidebar-collapsed'
 expanded = 'page-sidebar-expanded'
 
@@ -21,8 +20,7 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
 )
 
 $ ->
-  breakpoints = new Breakpoints()
-  size = breakpoints.getBreakpointSize()
+  size = bp.getBreakpointSize()
 
   if size is "xs" or size is "sm"
     if $('.page-with-sidebar').hasClass(expanded)

app/assets/stylesheets/framework/header.scss

@@ -144,7 +144,7 @@ header {
 .header-collapsed {
   margin-left: $sidebar_collapsed_width;
 
-  @media (min-width: $screen-sm-max) {
+  @media (min-width: $screen-md-min) {
     @include collapsed-header;
   }
 }
@@ -152,7 +152,7 @@ header {
 .header-expanded {
   margin-left: $sidebar_collapsed_width;
 
-  @media (min-width: $screen-sm-max) {
+  @media (min-width: $screen-md-min) {
     margin-left: $sidebar_width;
   }
 }

app/assets/stylesheets/framework/sidebar.scss

@@ -205,7 +205,7 @@
 @mixin expanded-sidebar {
   padding-left: $sidebar_collapsed_width;
 
-  @media (min-width: $screen-sm-max) {
+  @media (min-width: $screen-md-min) {
     padding-left: $sidebar_width;
   }