Cleanup structure

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

1 files changed, 17 insertions, 62 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 */
-}