services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement mobile long-press card preview with fullscreen overlay and animations.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-17 00:46:44 +01:00
parent 23aa1e96d6
commit 119af95cee
5 changed files with 167 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/development/devlog/2025-12-17-005500_mobile_long_press.md Normal file
View File

@@ -0,0 +1,15 @@
# 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.