diff --git a/app/assets/javascripts/specific/main_menu.js.erb b/app/assets/javascripts/specific/main_menu.js.erb index 3d5c97f552..458c9787ec 100644 --- a/app/assets/javascripts/specific/main_menu.js.erb +++ b/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); + } }); diff --git a/app/assets/stylesheets/content/_wiki.sass b/app/assets/stylesheets/content/_wiki.sass index c6f131d1c8..8aa3cd917f 100644 --- a/app/assets/stylesheets/content/_wiki.sass +++ b/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 diff --git a/app/assets/stylesheets/layout/_base.sass b/app/assets/stylesheets/layout/_base.sass index e3dee2a05e..31c4a56363 100644 --- a/app/assets/stylesheets/layout/_base.sass +++ b/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 diff --git a/app/assets/stylesheets/layout/_main_menu.sass b/app/assets/stylesheets/layout/_main_menu.sass index 3e6807d519..0974918f15 100644 --- a/app/assets/stylesheets/layout/_main_menu.sass +++ b/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 diff --git a/app/assets/stylesheets/layout/_main_menu_mobile.sass b/app/assets/stylesheets/layout/_main_menu_mobile.sass index 61c01e29fc..4bf3426472 100644 --- a/app/assets/stylesheets/layout/_main_menu_mobile.sass +++ b/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 diff --git a/app/assets/stylesheets/layout/work_packages/_full_view.sass b/app/assets/stylesheets/layout/work_packages/_full_view.sass index 276bca9e16..dcca303fc7 100644 --- a/app/assets/stylesheets/layout/work_packages/_full_view.sass +++ b/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, diff --git a/app/assets/stylesheets/layout/work_packages/_mobile.sass b/app/assets/stylesheets/layout/work_packages/_mobile.sass index 7e60056f9b..7848dda4b1 100644 --- a/app/assets/stylesheets/layout/work_packages/_mobile.sass +++ b/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 @@ -105,7 +96,7 @@ .work-packages-list-view--container padding-left: 5px - + .toolbar-container min-height: 36px padding-right: 0 diff --git a/app/assets/stylesheets/layout/work_packages/_query_menu.sass b/app/assets/stylesheets/layout/work_packages/_query_menu.sass index 2908bdab71..44436e16ff 100644 --- a/app/assets/stylesheets/layout/work_packages/_query_menu.sass +++ b/app/assets/stylesheets/layout/work_packages/_query_menu.sass @@ -20,9 +20,7 @@ $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}) + height: calc(100% - #{$wp-query-menu-search-container-height}) // Firefox needs more left padding for whatever reason html.-browser-firefox &