More refactoring of app content areas

Signed-off-by: Julius Härtl <jus@bitgrid.net>

5 files changed, 64 insertions, 23 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index ecf119f893b..cc53224a46d 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -19,10 +19,37 @@
 @use 'sass:math';
 @import 'functions';
 
+
+:root {
+	--body-container-margin: 8px;
+	--body-container-radius: var(--border-radius-large);
+	--body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin));
+}
+
+@media screen and (max-width: variables.$breakpoint-mobile) {
+	:root {
+		--body-container-margin: 0px;
+		--body-container-radius: 0px;
+	}
+}
+
+
+html {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	background: url('/apps/dashboard/img/kamil-porembinski-clouds.jpg');
+	background-size: cover;
+	background-position: top center;
+}
+
 body {
-    background: url('/apps/dashboard/img/kamil-porembinski-clouds.jpg');
-    background-size: contain;
-    position: fixed;
+	background: url('/apps/dashboard/img/kamil-porembinski-clouds.jpg');
+	background-size: cover;
+	background-position: top center;
+	position: fixed;
+	width: 100%;
+	height: calc(100vh - env(safe-area-inset-bottom));
 }
 
 /* BASE STYLING ------------------------------------------------------------ */
@@ -89,10 +116,14 @@ kbd {
 #app-navigation:not(.vue) {
 	width: variables.$navigation-width;
 	z-index: 500;
-	overflow-y: scroll;
+	overflow-y: auto;
 	overflow-x: hidden;
-	background-color: var(--color-main-background);
-	-webkit-user-select: none;
+	background-color: var(--color-main-background-blur);
+	backdrop-filter: var(--filter-background-blur);
+	-webkit-backdrop-filter: var(--filter-background-blur);	-webkit-user-select: none;
+	position: sticky;
+	height: 100%;
+	padding: 6px;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
@@ -100,8 +131,6 @@ kbd {
 	flex-direction: column;
 	flex-grow: 0;
 	flex-shrink: 0;
-    background-color: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(10px);
 
 	/* 'New' button */
 	.app-navigation-new {
@@ -613,15 +642,18 @@ kbd {
 #content {
 	box-sizing: border-box;
 	position: static;
-	// padding is included in height
-	min-height: 100%;
-	margin: 8px;
-    margin-top: 50px;
-    display: flex;
-    height: calc(100vh - 50px - 8px);
-    border-radius: var(--border-radius-large);
-    box-sizing: content-box;
-    overflow-y: scroll;
+	margin: var(--body-container-margin);
+	margin-top: 50px;
+	padding: 0;
+	display: flex;
+	width: calc(100% - var(--body-container-margin) * 2);
+	height: var(--body-height);
+    border-radius: var(--body-container-radius);
+	overflow: hidden;
+
+	&:not(.with-sidebar--full) {
+		position: fixed;
+	}
 }
 
 /* APP-CONTENT AND WRAPPER ------------------------------------------ */
@@ -638,8 +670,9 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 	z-index: 1000;
 	background-color: var(--color-main-background);
 	flex-basis: 100vw;
-	min-height: 100%;
-    overflow-y: scroll;
+	overflow: auto;
+	position: initial;
+	height: 100%;
 	/* margin if navigation element is here */
 	/* no top border for first settings item */
 	> .section:first-child {
@@ -711,7 +744,6 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 #app-settings-content {
 	display: none;
 	padding: 10px;
-	background-color: var(--color-main-background);
 	/* restrict height of settings and make scrollable */
 	max-height: 300px;
 	overflow-y: auto;
@@ -744,6 +776,8 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 #app-settings-header {
 	box-sizing: border-box;
 	background-color: var(--color-main-background);
+	overflow: hidden;
+	border-radius: var(--border-radius-pill);
 }
 
 
diff --git a/core/css/header.scss b/core/css/header.scss
index d4d7ce6ea18..f926566c687 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -32,7 +32,7 @@
 #body-settings #header,
 #body-public #header {
 	display: inline-flex;
-	position: fixed;
+	position: absolute;
 	top: 0;
 	width: 100%;
 	z-index: 2000;
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index db303eec1fc..021ab40c15e 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -23,6 +23,8 @@
 	/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
 	#app-navigation {
 		transform: translateX(-#{variables.$navigation-width});
+		position: fixed;
+		height: var(--body-height);
 	}
 	.snapjs-left {
 		#app-navigation {
diff --git a/core/css/public.scss b/core/css/public.scss
index b171dd4970d..87c0587bd7a 100644
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -68,12 +68,17 @@ $footer-height: 65px;
 
 	/* public footer */
 	footer {
-		position: relative;
+		position: fixed;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		height: $footer-height;
 		flex-direction: column;
+		bottom: 0;
+		width: calc(100% - 16px);
+		margin: 8px;
+		background-color: var(--color-main-background);
+		border-radius: var(--border-radius-large);
 		p {
 			text-align: center;
 			color: var(--color-text-lighter);
diff --git a/core/css/styles.scss b/core/css/styles.scss
index ef6b06276c9..0ace61ccc5c 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -203,7 +203,7 @@ body {
 	-ms-user-select: none;
 	user-select: none;
 	display: flex;
-	top: variables.$header-height;
+	top: 0;
 }
 
 /* position controls for apps with app-navigation */