Implement new container layout

Signed-off-by: Julius Härtl <jus@bitgrid.net>
nextcloud-libraries · Aug 23, 2022 · cac211d · cac211d
1 parent 7b09608
commit cac211d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/src/components/NcAppContent/NcAppContent.vue b/src/components/NcAppContent/NcAppContent.vue
@@ -323,14 +323,14 @@ export default {
 <style lang="scss" scoped>
 
 .app-content {
-	position: relative;
+	position: initial;
 	z-index: 1000;
 	flex-basis: 100vw;
-	min-width: 0;
-	min-height: 100%;
+	height: 100%;
 	// Overriding server styles TODO: cleanup!
 	margin: 0 !important;
 	background-color: var(--color-main-background);
+	overflow: scroll;
 
 	// Variables
 	// the whitespace between the topbar content and its edges

diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -149,7 +149,7 @@ export default {
 	padding: 4px;
 	// Above appcontent
 	z-index: 1800;
-	height: calc(100vh - #{$header-height});
+	height: 100%;
 	box-sizing: border-box;
 	background-color: var(--color-main-background);
 	-webkit-user-select: none;
@@ -161,6 +161,9 @@ export default {
 	flex-direction: column;
 	flex-grow: 0;
 	flex-shrink: 0;
+	background-color: var(--color-main-background-blur);
+	backdrop-filter: var(--filter-background-blur);
+	-webkit-backdrop-filter: var(--filter-background-blur);
 
 	&--close {
 		margin-left: - $navigation-width;

diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -639,9 +639,10 @@ $top-buttons-spacing: 6px;
 	width: 27vw;
 	min-width: $sidebar-min-width;
 	max-width: $sidebar-max-width;
-	height: calc(100vh - var(--header-height));
+	height: 100%;
 	border-left: 1px solid var(--color-border);
 	background: var(--color-main-background);
+
 	.app-sidebar-header {
 		> .app-sidebar__close {
 			position: absolute;

diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
@@ -81,10 +81,18 @@ export default {
 <style lang="scss" scoped>
 .content {
 	box-sizing: border-box;
-	position: relative;
+	margin: var(--body-container-margin);
+	margin-top: 50px;
 	display: flex;
-	padding-top: 50px;
-	min-height: 100%;
+	width: calc(100% - var(--body-container-margin) * 2);
+	height: var(--body-height);
+	overflow: hidden;
+	padding: 0;
+
+	&:not(.with-sidebar--full) {
+		position: fixed;
+	}
+
 	:deep(*) {
 		box-sizing: border-box;
 	}