feat: show title and tab buttons at the top while scrolling

Signed-off-by: Luka Trovic <luka@nextcloud.com>

src/App.vue

@@ -171,6 +171,8 @@ export default {
 
 	.modal-wrapper--normal .modal-container{
 		width: 900px !important;
+		height: 800px !important;
+		overflow-y: hidden !important;
 	}
 
 </style>

src/components/card/CardModal.vue

@@ -21,7 +21,8 @@
   -->
 
 <template>
-	<div v-if="currentCard" class="container">
+	<div v-if="currentCard" ref="modalContainer" class="container">
+		<div :class="{defaultTop: scrollPosition < 100, fixedTop: scrollPosition > 100}">
 			<div class="top">
 				<h1 class="top-title">
 					{{ currentCard.title }}
@@ -52,6 +53,7 @@
 					{{ t('deck', 'Attachments') }}
 				</div>
 			</div>
+		</div>
 		<div class="content">
 			<div :class="[currentCard.labels.length > 3 ? 'content-two-tabs' : 'content-three-tabs']">
 				<MembersTab
@@ -174,6 +176,7 @@ export default {
 			currentTab: null,
 			activeTabs: [],
 			showDetails: false,
+			scrollPosition: null,
 		}
 	},
 	computed: {
@@ -214,8 +217,12 @@ export default {
 		},
 	},
 	mounted() {
+		this.$nextTick(() => {
+			this.$refs.modalContainer.addEventListener('scroll', this.onScroll)
+		})
 		this.loadComments()
 	},
+
 	methods: {
 		cancelReply() {
 			this.$store.dispatch('setReplyTo', null)
@@ -266,19 +273,15 @@ export default {
 			this.titleEditable = false
 			this.$store.dispatch('updateCardTitle', { ...this.currentCard, title: this.titleEditing })
 		},
-
 		closeSidebar() {
 			this.$router.push({ name: 'board' })
 		},
-
 		showModal() {
 			this.$store.dispatch('setConfig', { cardDetailsInModal: true })
 		},
-
 		closeModal() {
 			this.$store.dispatch('setConfig', { cardDetailsInModal: false })
 		},
-
 		changeActiveTab(tab) {
 			this.currentTab = tab
 			this.activeTabs = this.activeTabs.filter((item) => !['project', 'attachment'].includes(item))
@@ -288,13 +291,15 @@ export default {
 			}
 
 		},
-
 		removeActiveTab(tab) {
 			const index = this.activeTabs.indexOf(tab)
 			if (index > -1) {
 				this.activeTabs = this.activeTabs.splice(index, 1)
 			}
 		},
+		onScroll() {
+			this.scrollPosition = this.$refs.modalContainer.scrollTop
+		},
 	},
 }
 </script>
@@ -358,6 +363,13 @@ export default {
 		font-weight: bold;
 	}
 	margin-top: 100px;
+	padding-left: 20px !important;
+	padding-right: 20px !important;
+}
+
+.content{
+	padding-left: 20px;
+	padding-right: 20px;
 }
 
 .comments {
@@ -375,10 +387,12 @@ export default {
 }
 
 .container {
-	padding: 20px;
+	overflow-y: scroll;
+	height: 800px;
 }
 
 .top {
+	padding: 20px 20px 0px 20px;
 	&-title {
 		color: black;
 		font-size: 20px;
@@ -391,6 +405,8 @@ export default {
 }
 
 .tabs {
+	padding-left: 20px;
+	padding-right: 20px;
 	margin-top: 20px;
 	margin-bottom: 5px;
 	display: flex;
@@ -432,4 +448,13 @@ export default {
 	color: #409eff;
 	background-color: #ecf5ff;
 }
+
+.fixedTop {
+	position: sticky;
+	top: 0;
+	background-color: #ffffff;
+	z-index: 1000;
+	margin-top: 0px;
+	padding-bottom: 5px;
+}
 </style>