Merge pull request #10421 from nextcloud/content-wrapper-cleanup

Really cleanup the content-wrapper

5 files changed, 34 insertions, 59 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index d8b2def9e5f..02603562c6f 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -77,7 +77,7 @@ kbd {
 	position: fixed;
 	top: $header-height;
 	left: 0;
-	z-index: 500;
+	z-index: 1000;
 	overflow-y: auto;
 	overflow-x: hidden;
 	// Do not use vh because of mobile headers
@@ -583,31 +583,25 @@ kbd {
 
 
 /* CONTENT  --------------------------------------------------------- */
-#content-wrapper {
-	// everything not related to content but needs to be on the window
-	// goes here (popups, tooltips...)
-	position: relative;
-	min-height: 100%;
-	display: unset;
-}
 #content {
 	box-sizing: border-box;
 	position: relative;
 	display: flex;
-	margin-top: $header-height;
+	// padding is included in height
+	padding-top: $header-height;
 	min-height: 100%;
 }
 
 /* APP-CONTENT AND WRAPPER ------------------------------------------ */
 /* Part where the content will be loaded into */
 #app-content {
-	z-index: 1000;
+	z-index: 500;
 	background-color: var(--color-main-background);
 	position: relative;
-	min-height: 100%;
 	flex-basis: 100vw;
+	min-height: 100%;
 	/* margin if navigation element is here */
-	#app-navigation  + & {
+	#app-navigation + & {
 		margin-left: $navigation-width;
 	}
 	/* no top border for first settings item */
@@ -619,17 +613,10 @@ kbd {
 	#app-content-wrapper {
 		display: flex;
 		position: relative;
-		align-items: start;
-		.app-content-list,
-		.app-content-detail {
-			min-height: calc(100vh - #{$header-height});
-			max-height: calc(100vh - #{$header-height});
-			overflow-x: hidden;
-			overflow-y: auto;
-		}
+		align-items: stretch;
 
 		/* CONTENT DETAILS AFTER LIST*/
-		.app-content-detail {
+		.app-content-details {
 			/* grow full width */
 			flex-grow: 1;
 			#app-navigation-toggle-back {
@@ -1049,10 +1036,17 @@ $popovericon-size: 16px;
 /* CONTENT LIST ------------------------------------------------------------ */
 .app-content-list {
 	width: 300px;
+	position: sticky;
+	top: $header-height;
 	border-right: 1px solid var(--color-border);
 	display: flex;
 	flex-direction: column;
 	transition: transform 250ms ease-in-out;
+	min-height: calc(100vh - #{$header-height});
+	max-height: calc(100vh - #{$header-height});
+	overflow-y: auto;
+	overflow-x: hidden;
+	flex: 0 0 300px;
 
 	/* Default item */
 	.app-content-list-item {
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 93e2909a510..6330be9d399 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -35,19 +35,18 @@
 
 	/* full width for message list on mobile */
 	.app-content-list {
-		width: 100%;
 		background: var(--color-main-background);
-		position: relative;
-		z-index: 100;
-	}
-	
-	/* since list and content are only displayed full window size
-	 * we don't ant inner scrolling
-	 */
-	#app-content-wrapper {
-		.app-content-list,
-		.app-content-detail {
-			max-height: unset;
+		flex: 1 1 100%;
+		// make full height scroll since app-content-details is hidden
+		max-height: unset;
+		+ .app-content-details {
+			display: none;
+		}
+		&.showdetails {
+			display: none;
+			+ .app-content-details {
+				display: initial;
+			}
 		}
 	}
 
@@ -59,7 +58,7 @@
 		#app-navigation-toggle-back {
 			position: fixed;
 			display: inline-block !important;
-			top: 45px;
+			top: $header-height;
 			left: 0;
 			width: 44px;
 			height: 44px;
@@ -73,18 +72,11 @@
 			transform: translateX(-100%);
 		}
 
-	/* end of media query */
-}
-	/* allow horizontal scrollbar in settings
-	otherwise user management is not usable on mobile */
-	#body-settings #app-content {
-		overflow-x: auto !important;
 	}
 
 	#app-navigation-toggle {
 		position: fixed;
 		display: inline-block !important;
-		top: $header-height;
 		left: 0;
 		width: 44px;
 		height: 44px;
@@ -132,11 +124,6 @@
 		max-width: 80%;
 	}
 
-	/* fix controls bar jumping when navigation is slid out */
-	.snapjs-left #app-navigation-toggle,
-	.snapjs-left #controls {
-		top: 0;
-	}
 	.snapjs-left table.multiselect thead {
 		top: 44px;
 	}
diff --git a/core/templates/layout.base.php b/core/templates/layout.base.php
index 8bb8e8ba3ca..d38bd114c3e 100644
--- a/core/templates/layout.base.php
+++ b/core/templates/layout.base.php
@@ -18,10 +18,8 @@
 	</head>
 	<body id="body-public">
 		<?php include 'layout.noscript.warning.php'; ?>
-		<div id="content-wrapper">
-			<div id="content" class="app-public" role="main">
-				<?php print_unescaped($_['content']); ?>
-			</div>
+		<div id="content" class="app-public" role="main">
+			<?php print_unescaped($_['content']); ?>
 		</div>
 	</body>
 </html>
diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php
index afdd5656be4..07aff03127d 100644
--- a/core/templates/layout.public.php
+++ b/core/templates/layout.public.php
@@ -70,11 +70,9 @@
 		</div>
 		<?php } ?>
 	</header>
-	<div id="content-wrapper">
-		<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
-			<?php print_unescaped($_['content']); ?>
-		</div>
-	</div
+	<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
+		<?php print_unescaped($_['content']); ?>
+	</div>
 	<?php if($template->getFooterVisible()) { ?>
 	<footer>
 		<p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p>
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index fbd71ec825b..32385c37aea 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -159,10 +159,8 @@
 			<input class="confirm" value="<?php p($l->t('Confirm')); ?>" type="submit">
 		</form>
 
-		<div id="content-wrapper">
-			<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
-				<?php print_unescaped($_['content']); ?>
-			</div>
+		<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
+			<?php print_unescaped($_['content']); ?>
 		</div>
 
 	</body>