diff options
Diffstat (limited to 'core')
| -rw-r--r-- | core/css/apps.scss | 22 | ||||
| -rw-r--r-- | core/css/header.scss | 3 | ||||
| -rw-r--r-- | core/css/ie.scss | 1 | ||||
| -rw-r--r-- | core/css/mobile.scss | 6 | ||||
| -rw-r--r-- | core/css/styles.scss | 1 | ||||
| -rw-r--r-- | core/js/js.js | 2 | ||||
| -rw-r--r-- | core/templates/layout.base.php | 6 | ||||
| -rw-r--r-- | core/templates/layout.public.php | 8 |
8 files changed, 30 insertions, 19 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss index 86f0e622405..bab47f4b004 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -74,13 +74,15 @@ kbd { /* Navigation: folder like structure */ #app-navigation { width: $navigation-width; - position: sticky; + position: fixed; top: $header-height; left: 0; - z-index: 1500; + z-index: 500; overflow-y: auto; overflow-x: hidden; - height: calc(100vh - #{$header-height}); + // Do not use vh because of mobile headers + // are included in the calculation + height: calc(100% - #{$header-height}); box-sizing: border-box; background-color: var(--color-main-background); -webkit-user-select: none; @@ -170,6 +172,7 @@ kbd { > ul { opacity: 0; max-height: 0; + overflow-y: hidden; /* bezier override the hide/slow effect due to the 2000 max-height */ transition: max-height 1000ms cubic-bezier(0, 1, 0, 1), opacity 250ms ease-in-out; @@ -523,7 +526,7 @@ kbd { .app-navigation-entry-deleted { display: inline-flex; padding-left: 44px; - transform: translateX(250px); + transform: translateX(#{$navigation-width}); .app-navigation-entry-deleted-description { position: relative; white-space: nowrap; @@ -580,12 +583,17 @@ kbd { /* CONTENT --------------------------------------------------------- */ +#content-wrapper { + // everything not related to content but needs to be on the window + // goes here (popups, tooltips...) + position: relative; +} #content { - /* header height */ - padding-top: $header-height; box-sizing: border-box; position: relative; display: flex; + margin-left: $navigation-width; + margin-top: $header-height; } /* APP-CONTENT AND WRAPPER ------------------------------------------ */ @@ -594,7 +602,7 @@ kbd { z-index: 1000; background-color: var(--color-main-background); position: relative; - min-height: calc(100vh - #{$header-height}); + min-height: 100%; flex-basis: 100vw; overflow: auto; /* no top border for first settings item */ diff --git a/core/css/header.scss b/core/css/header.scss index 7aeaed92265..b7565281218 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -46,8 +46,7 @@ display: inline-flex; position: fixed; top: 0; - left: 0; - right: 0; + width: 100%; z-index: 2000; height: $header-height; background-color: var(--color-primary); diff --git a/core/css/ie.scss b/core/css/ie.scss index ec7f51065e4..a4d2c8336ec 100644 --- a/core/css/ie.scss +++ b/core/css/ie.scss @@ -1,5 +1,4 @@ -#app-navigation, #app-sidebar { position: fixed !important; } diff --git a/core/css/mobile.scss b/core/css/mobile.scss index b0f85250493..8a7b323a844 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -20,7 +20,7 @@ /* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/ #app-navigation { - transform: translateX(-250px); + transform: translateX(-#{$navigation-width}); } .snapjs-left { #app-navigation { @@ -28,8 +28,8 @@ } } - #app-content { - margin-left: -$navigation-width; + #content { + margin-left: 0; } diff --git a/core/css/styles.scss b/core/css/styles.scss index 9652b02e9d2..3ca0d804443 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -89,7 +89,6 @@ body { line-height: 1.6em; font-family: var(--font-face); color: var(--color-main-text); - height: auto; } .two-factor-header { diff --git a/core/js/js.js b/core/js/js.js index c1713539f4f..ef80186b985 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1614,7 +1614,7 @@ function initCore() { var snapper = new Snap({ element: document.getElementById('app-content'), disable: 'right', - maxPosition: 250, + maxPosition: 300, // $navigation-width minDragDistance: 100 }); $('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;"></div>'); diff --git a/core/templates/layout.base.php b/core/templates/layout.base.php index 2d4fc726661..8bb8e8ba3ca 100644 --- a/core/templates/layout.base.php +++ b/core/templates/layout.base.php @@ -18,6 +18,10 @@ </head> <body id="body-public"> <?php include 'layout.noscript.warning.php'; ?> - <?php print_unescaped($_['content']); ?> + <div id="content-wrapper"> + <div id="content" class="app-public" role="main"> + <?php print_unescaped($_['content']); ?> + </div> + </div> </body> </html> diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php index 07aff03127d..afdd5656be4 100644 --- a/core/templates/layout.public.php +++ b/core/templates/layout.public.php @@ -70,9 +70,11 @@ </div> <?php } ?> </header> - <div id="content" class="app-<?php p($_['appid']) ?>" role="main"> - <?php print_unescaped($_['content']); ?> - </div> + <div id="content-wrapper"> + <div id="content" class="app-<?php p($_['appid']) ?>" role="main"> + <?php print_unescaped($_['content']); ?> + </div> + </div <?php if($template->getFooterVisible()) { ?> <footer> <p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p> |