services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
845f83086fd754f98824ac09662083a43bbbf1eb
mtg-online-drafter/docs/development/devlog/2025-12-17-005500_mobile_long_press.md

873 B
Raw Blame History

Mobile Long-Press Card Preview

Objective

Enhance mobile usability by allowing users to view a magnified card preview upon long-pressing (500ms) a card, instead of hover (which is disabled on mobile).

Changes

  • Modified src/client/src/components/CardPreview.tsx:
    • Updated CardHoverWrapper to include touchstart, touchend, and touchmove handlers.
    • Implemented a 500ms timer on touch start.
    • Added logic to cancel the long-press if the user drags/scrolls more than 10 pixels.
    • Added onContextMenu handler to prevent the default browser menu when a long-press triggers the preview.
    • Updated render condition to show preview if isHovering (desktop) OR isLongPressing (mobile).

Result

On mobile devices, users can now press and hold on a card to see the full-size preview. Lifting the finger or scrolling hides the preview.