Cleanup structure

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

5 files changed, 150 insertions, 195 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index a7898948f74..411e2623c91 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -80,8 +80,9 @@ kbd {
 
 #app-navigation {
 	width: 250px;
-	height: 100%;
-	float: left;
+	/* header height */
+	height: calc(100vh - 50px);
+	position: fixed;
 	box-sizing: border-box;
 	background-color: var(--color-main-background);
 	-webkit-user-select: none;
@@ -583,9 +584,11 @@ kbd {
 /* APP-CONTENT ---------------------------------------------------------------*/
 /* Part where the content will be loaded into */
 #app-content {
+	margin-left: 250px;
+	z-index: 1000;
+	background-color: var(--color-main-background);
 	position: relative;
-	height: 100%;
-	overflow-y: auto;
+	min-height: calc(100vh - 50px);
 	/* no top border for first settings item */
 	> .section:first-child {
 		border-top: none;
@@ -595,11 +598,6 @@ kbd {
 	}
 }
 
-#app-content-wrapper {
-	min-width: 100%;
-	min-height: 100%;
-}
-
 /* APP-SIDEBAR ----------------------------------------------------------------*/
 
 /*
@@ -1008,21 +1006,26 @@ $popovericon-size: 16px;
 }
 
 /* CONTENT WRAPPER  --------------------------------------------------------- */
+#content {
+	/* header height */
+	padding-top: 50px;
+	box-sizing: border-box;
+	position: relative;
+}
+/* if app-content-list is present */
 #app-content-wrapper {
 	display: flex;
 	position: relative;
 	align-items: start;
-	height: 100%;
-	width: 100%;
 	.app-content-list,
 	.app-content-detail {
-		min-height: 100%;
-		max-height: 100%;
+		min-height: calc(100vh - 50px);
+		max-height: calc(100vh - 50px);
 		overflow-x: hidden;
 		overflow-y: auto;
 	}
 }
-
+	
 /* CONTENT LIST ------------------------------------------------------------- */
 .app-content-list {
 	width: 300px;
@@ -1186,51 +1189,3 @@ $popovericon-size: 16px;
 	}
 }
 
-/* MOBILE ------------------------------------------------------------------- */
-/* Mobile width < 768px */
-@media only screen and (max-width: 768px) {
-
-	/* full width for message list on mobile */
-	.app-content-list {
-		width: 100%;
-		background: var(--color-main-background);
-		position: relative;
-		z-index: 100;
-	}
-
-	/* overlay message detail on top of message list */
-	.app-content-detail {
-		background: var(--color-main-background);
-		width: 100%;
-		left: 0;
-		height: 100%;
-		top: 0;
-		box-shadow: 0 0 100px rgba(100, 100, 100, .9);
-		position: absolute;
-	}
-
-	/* Show app details page */
-	#app-content.showdetails {
-		#app-navigation-toggle {
-			transform: translateX(-44px);
-		}
-		#app-navigation-toggle-back {
-			position: fixed;
-			display: inline-block !important;
-			top: 45px;
-			left: 0;
-			width: 44px;
-			height: 44px;
-			z-index: 149;
-			background-color: rgba(255, 255, 255, .7);
-			cursor: pointer;
-			opacity: .6;
-			transform: rotate(90deg);
-		}
-		.app-content-list {
-			transform: translateX(-100%);
-		}
-	}
-
-	/* end of media query */
-}
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 116d174989c..646fb65474c 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -1,124 +1,147 @@
 @media only screen and (max-width: 768px) {
 
-/* do not show update notification on mobile */
-#update-notification {
-	display: none !important;
-}
+	/* position share dropdown */
+	#dropdown {
+		margin-right: 10% !important;
+		width: 80% !important;
+	}
 
-/* position share dropdown */
-#dropdown {
-	margin-right: 10% !important;
-	width: 80% !important;
-}
+	/* fix name autocomplete not showing on mobile */
+	.ui-autocomplete {
+		z-index: 1000 !important;
+	}
 
-/* fix name autocomplete not showing on mobile */
-.ui-autocomplete {
-	z-index: 1000 !important;
-}
+	/* fix error display on smaller screens */
+	.error-wide {
+		width: 100%;
+		margin-left: 0 !important;
+		box-sizing: border-box;
+	}
 
-/* fix error display on smaller screens */
-.error-wide {
-	width: 100%;
-	margin-left: 0 !important;
-	box-sizing: border-box;
-}
+	/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
+	#app-navigation {
+		transform: translateX(-250px);
+	}
+	.snapjs-left {
+		#app-navigation {
+			transform: translateX(0);
+		}
+	}
 
+	#app-content {
+		margin-left: 0;
+	}
 
-/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
 
-#app-navigation,
-#app-content {
-	position: absolute !important;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-}
+	/* 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;
+		}
+	}
 
-#app-navigation {
-	width: 250px !important;
-}
+	/* Show app details page */
+	#app-content.showdetails {
+		#app-navigation-toggle {
+			transform: translateX(-44px);
+		}
+		#app-navigation-toggle-back {
+			position: fixed;
+			display: inline-block !important;
+			top: 45px;
+			left: 0;
+			width: 44px;
+			height: 44px;
+			z-index: 149;
+			background-color: rgba(255, 255, 255, .7);
+			cursor: pointer;
+			opacity: .6;
+			transform: rotate(90deg);
+		}
+		.app-content-list {
+			transform: translateX(-100%);
+		}
 
-#app-content {
-	width: 100% !important;
-	left: 0 !important;
-	background-color: var(--color-main-background);
-	overflow-x: hidden !important;
-	z-index: 1000;
+	/* end of media query */
 }
-
-/* allow horizontal scrollbar in settings
+	/* 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: 50px;
-	left: 0;
-	width: 44px;
-	height: 44px;
-	z-index: 149;
-	background-color: var(--color-main-background-darker);
-	cursor: pointer;
-	opacity: .6;
-}
-#app-navigation-toggle:hover,
-#app-navigation-toggle:focus {
-	opacity: 1;
-}
-
-/* position controls for apps with app-navigation */
-#app-navigation+#app-content #controls {
-	padding-left: 44px;
-}
-
-/* .viewer-mode is when text editor, PDF viewer, etc is open */
-#body-user .app-files.viewer-mode #controls {
-	padding-left: 0 !important;
-}
-.app-files.viewer-mode #app-navigation-toggle {
-	display: none !important;
-}
-
-table.multiselect thead {
-	left: 0 !important;
-}
-
+	#body-settings #app-content {
+		overflow-x: auto !important;
+	}
 
-/* prevent overflow in user management controls bar */
-#usersearchform {
-	display: none;
-}
-#body-settings #controls {
-	min-width: 768px !important;
-}
+	#app-navigation-toggle {
+		position: fixed;
+		display: inline-block !important;
+		top: 50px;
+		left: 0;
+		width: 44px;
+		height: 44px;
+		z-index: 149;
+		background-color: var(--color-main-background-darker);
+		cursor: pointer;
+		opacity: 0.6;
+	}
+	#app-navigation-toggle:hover,
+	#app-navigation-toggle:focus {
+		opacity: 1;
+	}
 
+	/* position controls for apps with app-navigation */
+	#app-navigation + #app-content #controls {
+		padding-left: 44px;
+	}
 
-/* do not show dates in filepicker */
-#oc-dialog-filepicker-content .filelist .filesize,
-#oc-dialog-filepicker-content .filelist .date {
-	display: none;
-}
-#oc-dialog-filepicker-content .filelist .filename {
-	max-width: 80%;
-}
+	/* .viewer-mode is when text editor, PDF viewer, etc is open */
+	#body-user .app-files.viewer-mode #controls {
+		padding-left: 0 !important;
+	}
+	.app-files.viewer-mode #app-navigation-toggle {
+		display: none !important;
+	}
 
+	table.multiselect thead {
+		left: 0 !important;
+	}
 
-/* 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;
-}
+	/* prevent overflow in user management controls bar */
+	#usersearchform {
+		display: none;
+	}
+	#body-settings #controls {
+		min-width: 768px !important;
+	}
 
+	/* do not show dates in filepicker */
+	#oc-dialog-filepicker-content .filelist .filesize,
+	#oc-dialog-filepicker-content .filelist .date {
+		display: none;
+	}
+	#oc-dialog-filepicker-content .filelist .filename {
+		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;
+	}
 
-/* end of media query */
+	/* end of media query */
 }
 
 @media only screen and (max-width: 480px) {
@@ -131,7 +154,7 @@ table.multiselect thead {
 	}
 	/* Arrow directly child of menutoggle */
 	#header .header-right > div {
-		&.openedMenu{
+		&.openedMenu {
 			&::after {
 				display: block;
 			}
diff --git a/core/css/styles.scss b/core/css/styles.scss
index eac6af307a2..a4e8f62e9a0 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -207,25 +207,6 @@ body {
 	}
 }
 
-#content {
-	position: relative;
-	height: 100%;
-	width: 100%;
-	.hascontrols {
-		margin-top: 45px;
-	}
-}
-
-#content-wrapper {
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	overflow-x: hidden;
-	/* prevent horizontal scrollbar */
-	padding-top: 50px;
-	box-sizing: border-box;
-}
-
 /* allow horizontal scrollbar for personal and admin settings */
 
 #body-settings:not(.snapjs-left) .app-settings {
diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php
index 78f46f48a5a..07aff03127d 100644
--- a/core/templates/layout.public.php
+++ b/core/templates/layout.public.php
@@ -27,8 +27,7 @@
 </head>
 <body id="<?php p($_['bodyid']);?>">
 <?php include('layout.noscript.warning.php'); ?>
-<header>
-	<div id="header" class="<?php p($_['header-classes']); ?>">
+	<header id="header" class="<?php p($_['header-classes']); ?>">
 		<div class="header-left">
 			<span id="nextcloud">
 				<div class="logo logo-icon svg"></div>
@@ -70,9 +69,7 @@
 			<?php } ?>
 		</div>
 		<?php } ?>
-	</div>
-</header>
-<div id="content-wrapper">
+	</header>
 	<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
 		<?php print_unescaped($_['content']); ?>
 	</div>
@@ -81,7 +78,6 @@
 		<p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p>
 	</footer>
 	<?php } ?>
-</div>
 
 </body>
 </html>
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index b9eab8f4149..fbd71ec825b 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -28,13 +28,13 @@
 	<body id="<?php p($_['bodyid']);?>">
 	<?php include 'layout.noscript.warning.php'; ?>
 
-	<a href="#app-content" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a>
-	<a href="#app-navigation" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a>
+		<a href="#app-content" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a>
+		<a href="#app-navigation" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a>
 
-	<div id="notification-container">
-		<div id="notification"></div>
-	</div>
-	<header role="banner"><div id="header">
+		<div id="notification-container">
+			<div id="notification"></div>
+		</div>
+		<header role="banner" id="header">
 			<div class="header-left">
 				<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
 					id="nextcloud">