style: update drag-and-drop styles for improved visual feedback and c…

…onsistency
thisuxhq · Nov 10, 2024 · 6605e82 · 6605e82
1 parent 5b3990c
commit 6605e82
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 11 deletions.
diff --git a/src/lib/styles/dnd.css b/src/lib/styles/dnd.css
@@ -32,13 +32,11 @@
 
 /* Drop preview/placeholder */
 .svelte-dnd-placeholder {
-	opacity: 0.3;
 	border: 2px dashed #9e9e9e;
 }
 
 /* Visual feedback for touch interactions */
 .svelte-dnd-touch-feedback {
-	opacity: 0.7;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 	border-color: #2196f3;
 }

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -91,7 +91,7 @@
 		{#each tasksByStatus as { status, items }}
 			<div class="w-80 flex-none">
 				<div
-					class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200"
+					class="rounded-xl bg-gray-100 p-4 shadow-sm ring-1 ring-gray-200"
 					use:droppable={{
 						// The container is the status of the task. e.g. 'todo', 'in-progress', 'done'
 						container: status,
@@ -120,8 +120,8 @@
 								animate:flip={{ duration: 200 }}
 								in:fade={{ duration: 150 }}
 								out:fade={{ duration: 150 }}
-								class="cursor-move rounded-lg bg-white p-3 shadow-sm ring-1 ring-gray-200
-                                       transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-blue-200 svelte-dnd-touch-feedback"
+								class="svelte-dnd-touch-feedback cursor-move rounded-lg bg-white p-3 shadow-sm ring-1
+                                       ring-gray-200 transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-blue-200"
 							>
 								<div class="mb-2 flex items-start justify-between gap-2">
 									<h3 class="font-medium text-gray-900">

diff --git a/src/routes/horizontal-scroll/+page.svelte b/src/routes/horizontal-scroll/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { draggable, droppable, type DragDropState } from '$lib/index.js';
+	import { flip } from 'svelte/animate';
+	import { fade } from 'svelte/transition';
 	import '$lib/styles/dnd.css';
 
 	interface ImageItem {
@@ -34,14 +36,17 @@
 			<div
 				use:droppable={{ container: index.toString(), callbacks: { onDrop: handleDrop } }}
 				class="relative"
+				animate:flip={{ duration: 200 }}
 			>
 				<div
 					use:draggable={{
 						container: index.toString(),
 						dragData: image
 					}}
-					class="group relative h-[300px] w-[200px] cursor-move overflow-hidden rounded-xl
-							transition-transform hover:scale-105 svelte-dnd-touch-feedback"
+					in:fade={{ duration: 150 }}
+					out:fade={{ duration: 150 }}
+					class="svelte-dnd-touch-feedback group relative h-[300px] w-[200px] cursor-move overflow-hidden
+							rounded-xl transition-transform hover:scale-105"
 				>
 					<img
 						src={image.url}

diff --git a/src/routes/nested/+page.svelte b/src/routes/nested/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { droppable, draggable, type DragDropState } from '$lib/index.js';
 	import { fade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
 	import '$lib/styles/dnd.css';
 
 	interface Item {
@@ -122,13 +123,14 @@
 					container: groupIndex.toString(),
 					callbacks: { onDrop: handleGroupDrop }
 				}}
+				animate:flip={{ duration: 200 }}
 			>
 				<div
 					use:draggable={{
 						container: groupIndex.toString(),
 						dragData: group
 					}}
-					class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200 svelte-dnd-touch-feedback"
+					class="svelte-dnd-touch-feedback rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200"
 					in:fade={{ duration: 150 }}
 					out:fade={{ duration: 150 }}
 				>
@@ -159,8 +161,8 @@
 										container: `${group.id}:${itemIndex}`,
 										dragData: item
 									}}
-									class="cursor-move rounded-lg bg-white p-3 shadow-sm ring-1 ring-gray-200
-                                           transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-blue-200 svelte-dnd-touch-feedback"
+									class="svelte-dnd-touch-feedback cursor-move rounded-lg bg-white p-3 shadow-sm ring-1
+                                           ring-gray-200 transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-blue-200"
 								>
 									<div class="mb-2 flex items-start justify-between gap-2">
 										<h3 class="font-medium text-gray-900">{item.title}</h3>

diff --git a/src/routes/simple-list/+page.svelte b/src/routes/simple-list/+page.svelte
@@ -58,7 +58,7 @@
 	</div>
 
 	<div class="w-80">
-		<div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200">
+		<div class="rounded-xl bg-gray-100 p-4 shadow-sm ring-1 ring-gray-200">
 			<div class="space-y-3">
 				{#each items as item, index (item.id)}
 					<div