fix: Make table header sticky

Signed-off-by: Julius Härtl <[email protected]>
nextcloud · Jan 19, 2024 · 0d46d3a · 0d46d3a
1 parent 8650888
commit 0d46d3a
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 30 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -51,6 +51,7 @@ export default {
 		await this.$store.dispatch('loadTablesFromBE')
 		await this.$store.dispatch('loadViewsSharedWithMeFromBE')
 		this.routing(this.$router.currentRoute)
+		this.observeAppContent()
 	},
 	methods: {
 		routing(currentRoute) {
@@ -84,6 +85,13 @@ export default {
 			}
 			window.document.title = newTitle
 		},
+		observeAppContent() {
+			const resizeObserver = new ResizeObserver((entries) => {
+				const width = entries[0].contentRect.width
+				document.documentElement.style.setProperty('--app-content-width', `${width}px`)
+			})
+			resizeObserver.observe(document.getElementById('app-content-vue'))
+		},
 	},
 }
 </script>

diff --git a/src/modules/main/sections/Dashboard.vue b/src/modules/main/sections/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="table-dashboard">
 		<div class="row space-T space-B">
 			<div class="col-4 space-L">
 				<h2>
@@ -264,6 +264,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.table-dashboard {
+	display: sticky;
+	left: 0;
+}
+
 .table {
 	border-collapse: collapse;
 	width: 670px;

diff --git a/src/modules/main/sections/DataTable.vue b/src/modules/main/sections/DataTable.vue
@@ -232,6 +232,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 
+	.row {
+		width: auto;
+	}
+
 	h2 {
 		display: inline-flex;
 		align-items: center;

diff --git a/src/modules/main/sections/ElementDescription.vue b/src/modules/main/sections/ElementDescription.vue
@@ -79,6 +79,7 @@ export default {
 }
 
 .row.first-row {
+	width: var(--app-content-width, auto);
 	position: sticky;
 	left: 0;
 	top: 0;

diff --git a/src/modules/navigation/sections/Navigation.vue b/src/modules/navigation/sections/Navigation.vue
@@ -1,8 +1,6 @@
 <template>
 	<NcAppNavigation>
 		<template #list>
-			<div v-if="tablesLoading" class="icon-loading" />
-
 			<div class="filter-box">
 				<NcTextField :value.sync="filterString"
 					:label="t('tables', 'Filter tables')"
@@ -13,6 +11,8 @@
 				</NcTextField>
 			</div>
 
+			<div v-if="tablesLoading" class="icon-loading" />
+
 			<ul v-if="!tablesLoading">
 				<NcAppNavigationCaption :title="t('tables', 'My tables')">
 					<template #actions>

diff --git a/src/pages/Table.vue b/src/pages/Table.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="main-table-view">
 		<MainWrapper :element="activeTable" :is-view="false" />
 		<MainModals />
 	</div>
@@ -38,3 +38,9 @@ export default {
 	},
 }
 </script>
+<style lang="scss">
+.main-table-view {
+	width: max-content;
+	min-width: var(--app-content-width, 100%);
+}
+</style>
diff --git a/src/pages/View.vue b/src/pages/View.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="main-view-view">
 		<MainWrapper :element="activeView" :is-view="true" />
 		<MainModals />
 	</div>
@@ -33,3 +33,9 @@ export default {
 	},
 }
 </script>
+<style lang="scss">
+.main-view-view {
+	width: max-content;
+	min-width: var(--app-content-width, 100%);
+}
+</style>
diff --git a/src/shared/components/ncTable/NcTable.vue b/src/shared/components/ncTable/NcTable.vue
@@ -246,8 +246,9 @@ export default {
 <style scoped lang="scss">
 
 .options.row {
+	width: var(--app-content-width, auto);
 	position: sticky;
-	top: 52px;
+	top: 62px;
 	left: 0;
 	z-index: 15;
 	background-color: var(--color-main-background-translucent);

diff --git a/src/shared/components/ncTable/sections/CustomTable.vue b/src/shared/components/ncTable/sections/CustomTable.vue
@@ -273,12 +273,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-.container {
-	//margin: auto;
-	overflow-x: auto;
-}
-
 :deep(table) {
 	position: relative;
 	border-collapse: collapse;
@@ -314,25 +308,20 @@ export default {
 		background-color: var(--color-main-background);
 	}
 
-	thead tr {
-		// text-align: left;
-
-		th {
-			vertical-align: middle;
-			color: var(--color-text-maxcontrast);
-
-			// sticky head
-			// position: -webkit-sticky;
-			// position: sticky;
-			// top: 80px;
-			box-shadow: inset 0 -1px 0 var(--color-border); // use box-shadow instead of border to be compatible with sticky heads
-			background-color: var(--color-main-background-translucent);
-			z-index: 5;
-
-			// always fit to title
-			// min-width: max-content;
+	thead {
+		position: sticky;
+		top: 114px;
+		z-index: 6;
+
+		tr {
+			th {
+				vertical-align: middle;
+				color: var(--color-text-maxcontrast);
+				box-shadow: inset 0 -1px 0 var(--color-border); // use box-shadow instead of border to be compatible with sticky heads
+				background-color: var(--color-main-background-translucent);
+				z-index: 5;
+			}
 		}
-
 	}
 
 	tbody {