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

5 files changed, 66 insertions, 43 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 1212e89975b..e9c6196e926 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -108,6 +108,8 @@ window.onload = ->
     setTimeout shiftWindow, 100
 
 $ ->
+  bootstrapBreakpoint = bp.getBreakpointSize()
+
   $(".nicescroll").niceScroll(cursoropacitymax: '0.4', cursorcolor: '#FFF', cursorborder: "1px solid #FFF")
 
   # Click a .js-select-on-focus field, select the contents
@@ -256,35 +258,14 @@ $ ->
           $('.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 = bp.getBreakpointSize()
     if bootstrapBreakpoint != oldBootstrapBreakpoint
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 
   checkInitialSidebarSize = ->
+    bootstrapBreakpoint = bp.getBreakpointSize()
     if bootstrapBreakpoint is "xs" or "sm"
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 
@@ -293,6 +274,5 @@ $ ->
     .on "resize", (e) ->
       fitSidebarForSize()
 
-  setBootstrapBreakpoints()
   checkInitialSidebarSize()
   new Aside()
diff --git a/app/assets/javascripts/breakpoints.coffee b/app/assets/javascripts/breakpoints.coffee
new file mode 100644
index 00000000000..1ffaaddb055
--- /dev/null
+++ b/app/assets/javascripts/breakpoints.coffee
@@ -0,0 +1,33 @@
+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()
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index cff309c5972..eea3f5ee910 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -1,8 +1,7 @@
-$(document).on("click", '.toggle-nav-collapse', (e) ->
-  e.preventDefault()
-  collapsed = 'page-sidebar-collapsed'
-  expanded = 'page-sidebar-expanded'
+collapsed = 'page-sidebar-collapsed'
+expanded = 'page-sidebar-expanded'
 
+toggleSidebar = ->
   $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
   $('header').toggleClass("header-collapsed header-expanded")
   $('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded")
@@ -14,4 +13,15 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
     niceScrollBars.updateScrollBar();
   ), 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()
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index e624982c5c9..4c4033e3ae7 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -141,22 +141,18 @@ header {
   margin-left: $sidebar_collapsed_width;
 }
 
-@media (max-width: $screen-md-max) {
-  .header-collapsed {
-    margin-left: $sidebar_collapsed_width;
-  }
-
- .header-expanded {
-    margin-left: $sidebar_width;
- }
-}
+.header-collapsed {
+  margin-left: $sidebar_collapsed_width;
 
-@media(min-width: $screen-md-max) {
-  .header-collapsed {
+  @media (min-width: $screen-md-min) {
     @include collapsed-header;
   }
+}
+
+.header-expanded {
+  margin-left: $sidebar_collapsed_width;
 
-  .header-expanded {
+  @media (min-width: $screen-md-min) {
     margin-left: $sidebar_width;
   }
 }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 6b382e4b1b2..26df9acd2ae 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -34,12 +34,12 @@
     @media (min-width: $screen-sm-min) {
       padding-right: $gutter_width;
     }
-    
+
   }
 }
 
 .sidebar-wrapper {
-  z-index: 99;
+  z-index: 999;
   background: $background-color;
 }
 
@@ -203,7 +203,11 @@
 }
 
 @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 {
     /* Extra small devices (phones, less than 768px) */