Kevin-Mok/kanban
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix flashing events on mobile

Browse Source
This commit is contained in:
Kevin Mok
2025-03-28 15:23:20 -04:00
parent 76ba760328
commit 296980f74c
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/DraggableEvent.tsx
View File

@@ -43,11 +43,12 @@ export default function DraggableEvent({
const currentX = location.current.input.clientX; const currentX = location.current.input.clientX;
const now = Date.now(); const now = Date.now();
if (now - lastChangeTime.current > 500) { if (now - lastChangeTime.current > 1000) {
if (currentX < 50) { const edgeThreshold = 100;
if (currentX < edgeThreshold) {
lastChangeTime.current = now; lastChangeTime.current = now;
onDayChange('left'); onDayChange('left');
} else if (currentX > screenWidth.current - 50) { } else if (currentX > screenWidth.current - edgeThreshold) {
lastChangeTime.current = now; lastChangeTime.current = now;
onDayChange('right'); onDayChange('right');
} }
@@ -67,23 +68,27 @@ export default function DraggableEvent({
return ( return (
<motion.div <motion.div
ref={ref} ref={ref}
layoutId={event.id} layoutId={isDragging ? event.id : undefined}
onClick={() => !isDragging && onEventClick({ event, date })} onClick={() => !isDragging && onEventClick({ event, date })}
className="bg-white p-4 rounded shadow-md mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none" className="bg-white p-4 rounded shadow-md mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none"
whileHover={{ scale: 1.01 }} whileHover={{ scale: 1.01 }}
transition={{ duration: 1.2 }} transition={{
duration: 0.3,
layout: { duration: 0.1 }
}}
style={{ style={{
opacity: isDragging ? 0.7 : 1, opacity: isDragging ? 0.7 : 1,
userSelect: 'none', userSelect: 'none',
WebkitUserSelect: 'none', WebkitUserSelect: 'none',
touchAction: 'manipulation' touchAction: 'manipulation',
willChange: 'transform'
}} }}
> >
<div className="relative rounded overflow-hidden mb-2"> <div className="relative rounded overflow-hidden mb-2">
{event.imageUrl && ( {event.imageUrl && (
<motion.img <motion.img
layoutId={`event-image-${event.id}`} layoutId={isDragging ? `event-image-${event.id}` : undefined}
transition={{ duration: 1.2 }} transition={{ duration: 0.3 }}
src={event.imageUrl} src={event.imageUrl}
alt={event.title} alt={event.title}
className="w-full h-16 md:h-12 object-cover pointer-events-none" className="w-full h-16 md:h-12 object-cover pointer-events-none"
@@ -91,16 +96,16 @@ export default function DraggableEvent({
/> />
)} )}
<motion.div <motion.div
layoutId={`event-time-${event.id}`} layoutId={isDragging ? `event-time-${event.id}` : undefined}
transition={{ duration: 1.2 }} transition={{ duration: 0.3 }}
className="absolute top-1 right-1 bg-gradient-to-br from-indigo-600 to-violet-600 text-white text-[12px] md:text-[10px] px-1 py-0.5 rounded" className="absolute top-1 right-1 bg-gradient-to-br from-indigo-600 to-violet-600 text-white text-[12px] md:text-[10px] px-1 py-0.5 rounded"
> >
{event.time} {event.time}
</motion.div> </motion.div>
</div> </div>
<motion.h3 <motion.h3
layoutId={`event-title-${event.id}`} layoutId={isDragging ? `event-title-${event.id}` : undefined}
transition={{ duration: 1.2 }} transition={{ duration: 0.3 }}
className="text-sm text-black font-sans" className="text-sm text-black font-sans"
> >
{event.title} {event.title}