adjusting card size on drag

hpi-schul-cloud · Apr 19, 2024 · dfe7630 · dfe7630
1 parent 1f5bfd3
commit dfe7630
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/modules/feature/board/board/BoardColumn.vue b/src/modules/feature/board/board/BoardColumn.vue
@@ -33,7 +33,7 @@
 					filter: '.v-input, v-btn',
 					preventOnFilter: false,
 					forceFallback: true,
-					ghostClass: 'sortable-drag-ghost',
+					ghostClass: sortableGhostClasses,
 					scroll: true,
 				}"
 				:class="sortableClasses"
@@ -283,6 +283,14 @@ export default defineComponent({
 			return classes;
 		});
 
+		const sortableGhostClasses = computed(() => {
+			const classes = ["sortable-drag-ghost"];
+			if (!props.isListBoard) {
+				classes.push("column-layout");
+			}
+			return classes;
+		});
+
 		return {
 			cardDropPlaceholderOptions,
 			columnClasses,
@@ -309,6 +317,7 @@ export default defineComponent({
 			getChildPayload,
 			reactiveIndex,
 			showAddButton,
+			sortableGhostClasses,
 		};
 	},
 });
@@ -317,6 +326,8 @@ export default defineComponent({
 <style>
 .sortable-drag-ghost .v-card {
 	opacity: 0.6;
+}
+.column-layout {
 	width: 346px; /* size of the card - column has 400px width and some paddings and margins */
 }
 </style>

diff --git a/src/modules/feature/board/board/BoardColumnGhost.vue b/src/modules/feature/board/board/BoardColumnGhost.vue
@@ -19,7 +19,7 @@
 					direction: 'vertical',
 					delay: 300, // isDesktop ? 0 : 300
 					delayOnTouchOnly: true,
-					ghostClass: 'sortable-drag-ghost',
+					ghostClass: sortableGhostClasses,
 					easing: 'cubic-bezier(1, 0, 0, 1)',
 					dragClass: 'sortable-drag-board-card',
 					dragoverBubble: false,
@@ -66,6 +66,14 @@ const ghostColumnStyle = computed(() => {
 	}
 	return classes;
 });
+
+const sortableGhostClasses = computed(() => {
+	const classes = ["sortable-drag-ghost"];
+	if (!props.isListBoard) {
+		classes.push("column-layout");
+	}
+	return classes;
+});
 </script>
 
 <style scoped>
@@ -95,7 +103,7 @@ const ghostColumnStyle = computed(() => {
 </style>
 
 <style>
-.sortable-drag-ghost {
+.column-layout {
 	width: 350px !important;
 }
 </style>