Acceptance and mobile navigation fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

10 files changed, 44 insertions, 22 deletions

diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 81729c179fc..1c552b7d476 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -2,7 +2,7 @@
 /** @var $l \OCP\IL10N */
 /** @var $_ array */
 ?>
-
+<div id="app-content">
 <?php if ($_['previewSupported']): /* This enables preview images for links (e.g. on Facebook, Google+, ...)*/?>
 	<link rel="image_src" href="<?php p($_['previewImage']); ?>" />
 <?php endif; ?>
@@ -90,3 +90,4 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 			   data-url="<?php p(\OC::$server->getURLGenerator()->linkTo('files', 'ajax/upload.php')); ?>" />
 	</div>
 <?php endif; ?>
+</div>
\ No newline at end of file
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>
diff --git a/tests/acceptance/features/bootstrap/SettingsMenuContext.php b/tests/acceptance/features/bootstrap/SettingsMenuContext.php
index fd9b9424c9d..3dd5022ecc9 100644
--- a/tests/acceptance/features/bootstrap/SettingsMenuContext.php
+++ b/tests/acceptance/features/bootstrap/SettingsMenuContext.php
@@ -31,8 +31,17 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
 	/**
 	 * @return Locator
 	 */
-	public static function settingsMenuButton() {
+	public static function settingsSectionInHeader() {
 		return Locator::forThe()->xpath("//*[@id = 'header']//*[@id = 'settings']")->
+				describedAs("Settings menu section in the header");
+	}
+
+	/**
+	 * @return Locator
+	 */
+	public static function settingsMenuButton() {
+		return Locator::forThe()->id("expand")->
+				descendantOf(self::settingsSectionInHeader())->
 				describedAs("Settings menu button");
 	}
 
@@ -40,7 +49,8 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
 	 * @return Locator
 	 */
 	public static function settingsMenu() {
-		return Locator::forThe()->id("expanddiv")->descendantOf(self::settingsMenuButton())->
+		return Locator::forThe()->id("expanddiv")->
+				descendantOf(self::settingsSectionInHeader())->
 				describedAs("Settings menu");
 	}