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

@@ -34,7 +34,7 @@
     @media (min-width: $screen-sm-min) {
       padding-right: $gutter_width;
     }
-    
+
   }
 }
 
@@ -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;
   }