Merge pull request #3091 from nextcloud/poc/redesign

nextcloud-libraries · Sep 1, 2022 · d3fad93 · d3fad93
2 parents 9572792 + f664314
commit d3fad93
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 15 deletions.
diff --git a/src/components/NcAppContent/NcAppContent.vue b/src/components/NcAppContent/NcAppContent.vue
@@ -71,7 +71,7 @@ The list size must be between the min and the max width value.
 </docs>
 
 <template>
-	<main id="app-content-vue" class="app-content no-snapper">
+	<main id="app-content-vue" class="app-content no-snapper" :class="{ 'app-content--has-list': hasList }">
 		<template v-if="hasList">
 			<!-- Mobile view does not allow resizeable panes -->
 			<div v-if="isMobile"
@@ -323,20 +323,29 @@ 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);
 
+	&:not(.app-content--has-list) {
+		overflow: auto;
+	}
+
 	// Variables
 	// the whitespace between the topbar content and its edges
 	--topbar-margin: $topbar-margin;
 }
 
+.app-content-wrapper {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
 // Mobile list/details handling
 .app-content-wrapper--mobile {
 	&.app-content-wrapper--show-list :deep() {
@@ -377,7 +386,7 @@ export default {
 		}
 
 		&-details {
-			overflow-y: scroll;
+			overflow-y: auto;
 
 			@media only screen and (max-width: $breakpoint-mobile) {
 				min-width: 100%;

diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -142,14 +142,13 @@ export default {
 	will-change: transform;
 	transition: transform var(--animation-quick), margin var(--animation-quick);
 	width: $navigation-width;
-	position: sticky;
-	position: -webkit-sticky;
-	top: $header-height;
+	position: relative;
+	top: 0;
 	left: 0;
 	padding: 4px;
 	// Above appcontent
 	z-index: 1800;
-	height: calc(100vh - #{$header-height});
+	height: 100%;
 	box-sizing: border-box;
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -162,9 +161,10 @@ export default {
 	background-color:  var(--color-main-background-blur, var(--color-main-background));
 	-webkit-backdrop-filter: var(--filter-background-blur, none);
 	backdrop-filter: var(--filter-background-blur, none);
+
 	&--close {
-		margin-left: - $navigation-width;
 		transform: translateX(-100%);
+		position: absolute;
 	}
 
 	//list of navigation items
@@ -184,7 +184,7 @@ export default {
 // When on mobile, we make the navigation slide over the appcontent
 @media only screen and (max-width: $breakpoint-mobile) {
 	.app-navigation:not(.app-navigation--close) {
-		margin-left: - $navigation-width;
+		position: absolute;
 	}
 }
 

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,19 @@ 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);
+	border-radius: var(--body-container-radius);
+	height: var(--body-height);
+	overflow: hidden;
+	padding: 0;
+
+	&:not(.with-sidebar--full) {
+		position: fixed;
+	}
+
 	:deep(*) {
 		box-sizing: border-box;
 	}