feat: Implement mobile long-press card preview with fullscreen overlay and animations.
This commit is contained in:
@@ -38,3 +38,6 @@
|
||||
- [Cube Full Width Layout](./devlog/2025-12-17-003500_cube_full_width.md): Completed. Updated Cube Manager to use the full screen width.
|
||||
- [Cube Archidekt View](./devlog/2025-12-17-004500_archidekt_view.md): Completed. Implemented column-based stacked view for packs.
|
||||
- [Cube Mobile UI Fixes](./devlog/2025-12-17-005000_mobile_ui_fixes.md): Completed. Fixed overlapping elements and disabled hover previews on mobile.
|
||||
- [Mobile Long-Press Preview](./devlog/2025-12-17-005500_mobile_long_press.md): Completed. Implemented long-press trigger for card magnification on small screens.
|
||||
- [Mobile Fullscreen Preview](./devlog/2025-12-17-010000_mobile_fullscreen_preview.md): Completed. Updated mobile preview to be a centered fullscreen overlay.
|
||||
- [Mobile Preview Animations](./devlog/2025-12-17-010500_mobile_preview_animations.md): Completed. Implemented phase-in layout and phase-out animations for mobile preview.
|
||||
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -0,0 +1,18 @@
|
||||
# Mobile Preview Animations
|
||||
|
||||
## Objective
|
||||
Implement smooth "Phase In" and "Phase Out" animations for the mobile fullscreen card preview to replace the instant appear/disappear behavior.
|
||||
|
||||
## Changes
|
||||
- Modified `src/client/src/components/CardPreview.tsx`:
|
||||
- Updated `CardHoverWrapper` to handle component unmounting with a delay (300ms) when the preview should be hidden on mobile.
|
||||
- Passed a new `isClosing` prop to `FloatingPreview` during this delay period.
|
||||
- In `FloatingPreview` (Mobile View):
|
||||
- Added `transition-all duration-300` base classes.
|
||||
- Used conditional classes:
|
||||
- Entrance: `animate-in fade-in zoom-in-95`
|
||||
- Exit: `animate-out fade-out zoom-out-95` (triggered when `isClosing` is true).
|
||||
- Fixed syntax errors introduced in previous steps (removed spaces in class names).
|
||||
|
||||
## Result
|
||||
On mobile, the card preview now fades and zooms in smoothly when long-pressed, and fades/zooms out smoothly when released.
|
||||
Reference in New Issue
Block a user