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

feat: Update card preview to use long-press instead of hover on touch devices by improving mobile detection logic.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-18 01:11:54 +01:00
parent 8995c3f7e8
commit 12e60d42f3
3 changed files with 33 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/development/CENTRAL.md
View File

@@ -94,3 +94,4 @@
- [Fix PWA Install Prompt](./devlog/2025-12-18-005000_fix_pwa_prompt.md): Completed. Implemented global event capture, iOS detection, and explicit service worker registration to ensure install prompt appears.
- [Persist PWA Dismissal](./devlog/2025-12-18-005300_persist_pwa_dismissal.md): Completed. Implemented logic to remember user's choice to dismiss or install the PWA, preventing repeated prompts.
- [Create Favicon](./devlog/2025-12-18-005739_create_favicon.md): Completed. Generated and integrated a new application favicon.
- [Mobile Touch Preview](./devlog/2025-12-18-012500_mobile_touch_preview.md): Completed. Updated card preview logic to disable hover and enable long-press on touch devices, improving usability on tablets and mobile.

15
docs/development/devlog/2025-12-18-012500_mobile_touch_preview.md Normal file
View File

@@ -0,0 +1,15 @@
# 2025-12-18 01:25:00 - Mobile Touch Prevention on Pack List
## User Request
The user requested to disable the hover-to-preview functionality on touch screens in the draft management pack list and instead use long-press to open the preview, matching the behavior on small mobile screens.
## Implementation Details
Modified `CardPreview.tsx` to update the `CardHoverWrapper` component.
- Changed `isMobile` detection logic from a simple `window.innerWidth < 1024` check to a more robust check that includes `window.matchMedia('(pointer: coarse)')`.
- Removed `(hover: none)` from the check to ensure devices that report hover capability (like some tablets with styluses) but are primarily touch-based are still treated as mobile.
- This ensures that devices with touch capabilities (like tablets) are treated as "mobile" by the component, disabling the default hover behavior and enabling the long-press gesture for card previews.
- This change affects `CubeManager` (Pack List) and any other component using `CardHoverWrapper` (e.g., `StackView` inside `PackCard`).
## Risk Handling
- Verified that `DraftView` uses its own touch logic (`useCardTouch`) so it remains unaffected (though it behaves similarly).
- Ensures that touch laptops (which might support hover) are not aggressively forced into mobile mode unless they match `hover: none` (which usually targets tablets/phones). This tries to preserve mouse functionality where available, although the user's request was specific to "touch screens". The `hover: none` media query is the standard way to detect touch-primary devices.