Merge pull request #6735 from opf/fix/scroll-behaviour

[28422] Fix/scroll behaviour

app/assets/javascripts/specific/main_menu.js.erb

@@ -115,4 +115,8 @@ jQuery(document).ready(function($) {
     $(child).before(header);
   })
 
+  if($('.menu_root').hasClass('closed')) {
+      // TODO: Instead of hiding the sidebar move sidebar's contents to submenus and cache it.
+      $('#sidebar').toggleClass('-hidden', true);
+  }
 });

app/assets/stylesheets/content/_wiki.sass

@@ -166,9 +166,6 @@ h1:hover, h2:hover, h3:hover
 
 body.controller-wiki
 
-  #content
-    overflow: initial
-
   .ck-content
     min-height: 25vh
 

app/assets/stylesheets/layout/_base.sass

@@ -56,15 +56,6 @@ body
     overflow: visible
 
     #content-wrapper
-      &.hidden-navigation
-        margin-left: $main-menu-folded-width
-        width: calc(100% - #{$main-menu-folded-width})
-
-      &.nosidebar
-        padding: 0
-        width:    100%
-        margin-left: 0
-
       &.nomenus
         top: 0
         padding: 0
@@ -81,7 +72,8 @@ body
   margin: 0 0 0 0
   padding: 10px 20px
   width: auto
-  height: auto
+  height: calc(100vh - #{$header-height})
+  overflow: auto
   background-color: #fff
   width: 100%
   // As this is a flex item we need to set min-width to 0 so that its children's
@@ -113,7 +105,6 @@ body
 #content
   padding: 0
   margin: 0 0 0 0
-  overflow: hidden
   width: 100%
   z-index: 10
   background-color: $body-background

app/assets/stylesheets/layout/_main_menu.sass

@@ -39,30 +39,33 @@ $menu-item-line-height: 30px
   border-right-style: solid
   @include varprop(border-right-width, main-menu-border-width)
   @include varprop(border-right-color, main-menu-border-color)
-
-  // min-height is full height minus header and footer.
-  min-height: calc(100vh - 55px)
-
   @include varprop(background-color, main-menu-bg-color)
+  // min-height is full height minus header and footer.
+  min-height: calc(100vh - #{$header-height})
 
   #menu-sidebar
-    height: 100%
-    overflow: auto
-
-  %absolute-layout-mode &
+    +allow-vertical-scrolling
+    -ms-overflow-style: -ms-autohiding-scrollbar
+    height: calc(100vh - #{$header-height})
     position: relative
+    @include styled-scroll-bar
 
     // Fixed heights to allow inner scrolling
     .menu_root.closed,
     .menu_root > li.open,
-    .main-menu--children > li.partial,
     wp-query-select,
     .wp-query-menu--container,
-    .wp-query-menu--search-container
+    .wp-query-menu--search-container,
+    .main-menu--children > li.partial:only-child
       height: 100%
 
+    .main-menu--children > li.partial
+      height: initial
+
     .main-menu--children
-      height: calc(100% - (#{$main-menu-item-height} + 20px))
+      height: calc(100% - (#{$main-menu-item-height} + 10px)) // 10px spacing
+      overflow: auto
+      @include styled-scroll-bar
 
   ul
     margin: 0
@@ -314,9 +317,6 @@ a.main-menu--parent-node
   &.-hidden
     display: none
 
-  %absolute-layout-mode &
-    display: none
-
 .menu-wiki-pages-tree
   height: 100%
   overflow: auto
@@ -347,8 +347,6 @@ a.main-menu--parent-node
   vertical-align: middle
   z-index: 1
   cursor: col-resize
-  %absolute-layout-mode &
-    z-index: 100
   &:hover
     @include varprop(border-left-color, main-menu-resizer-color)
     .main-menu--navigation-toggler
@@ -395,8 +393,6 @@ a.main-menu--parent-node
     i:before
       padding-left: 0
       @include icon-mixin-arrow-left2
-  %absolute-layout-mode &
-    z-index: 100
 
 #main-menu ul ul.main-menu--children ul.pages-hierarchy
   .tree-menu--hierarchy-indicator

app/assets/stylesheets/layout/_main_menu_mobile.sass

@@ -29,17 +29,13 @@
 @include breakpoint(680px down)
 
   .main-menu
-    position: absolute !important
-    min-height: 100%
+    position: fixed
     z-index: 11
     border-bottom: 1px solid $main-menu-border-color
     width: 100vw !important
     border: none
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15)
 
-    %absolute-layout-mode &
-      height: auto
-
   .hidden-navigation .main-menu
     display: none
 

app/assets/stylesheets/layout/work_packages/_full_view.sass

@@ -28,8 +28,6 @@
 
 body.controller-work_packages.action-show
 body.controller-work_packages.full-create
-  overflow-x: auto
-
   // Fix selenium scrolling the #content which shouldn't be possible
   // This appears to be caused by somehow setting the scrollTop to move to an element.
   #content-wrapper,

app/assets/stylesheets/layout/work_packages/_mobile.sass

@@ -30,8 +30,7 @@
 
     // ------------- FULL SCREEN -------------------
     &.action-show
-      overflow: auto !important
-      overflow-y: scroll !important
+
 
       #main,
       #content-wrapper,
@@ -44,21 +43,13 @@
       #content-wrapper,
       #content
         height: 100% !important
-        overflow: visible
+        overflow: auto
 
       #main
         padding-bottom: 0
+        height: calc(100vh - #{$header-height})
 
         #content-wrapper
-          &.hidden-navigation
-            margin-left: 0
-            width: 100%
-
-          &.nosidebar
-            padding: 0
-            width:    100%
-            margin-left: 0
-
           &.nomenus
             top: 0
             padding: 0

app/assets/stylesheets/layout/work_packages/_query_menu.sass

@@ -20,8 +20,6 @@ $wp-query-menu-search-container-height: 35px
 
   .wp-query-menu--results-container
     padding-top: 5px
-
-    %absolute-layout-mode &
     height: calc(100% - #{$wp-query-menu-search-container-height})
 
     // Firefox needs more left padding for whatever reason