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

16
docs/development/devlog/2025-12-17-010000_mobile_fullscreen_preview.md Normal file
View File

@@ -0,0 +1,16 @@
# Mobile Fullscreen Preview
## Objective
Update the mobile card preview mechanism to display a centered, fullscreen overlay upon long-press, rather than a floating element following the touch point. This provides a clearer view of the card on small screens.
## Changes
- Modified `src/client/src/components/CardPreview.tsx`:
- Updated `FloatingPreview` interface to accept `isMobile: boolean`.
- Added conditional rendering in `FloatingPreview`:
- If `isMobile` is true, it renders a `fixed inset-0` overlay with a centered image, `backdrop-blur`, and entrance animations (`zoom-in` + `fade-in`).
- If false (desktop), it retains the original cursor-following behavior.
- Updated `CardHoverWrapper` to pass the `isMobile` state down to the preview component.
- The preview automatically disappears (unmounts) when the long-press is released, effectively creating a "fade out/close" interaction (visually, the instant close is standard; entrance is animated).
## Result
Long-pressing a card on mobile now brings up a high-quality, centered view of the card that dims the background, improving readability and usability.