diff --git a/docs/development/devlog/2025-12-17-024600_mobile_long_press_preview.md b/docs/development/devlog/2025-12-17-024600_mobile_long_press_preview.md new file mode 100644 index 0000000..c7b9cf1 --- /dev/null +++ b/docs/development/devlog/2025-12-17-024600_mobile_long_press_preview.md @@ -0,0 +1,17 @@ +# Mobile Long Press Card Preview + +## Status +- [x] Research current implementation of `PackCard` and `CardPreview` +- [x] Implement long-press detection in `PackCard` (Found existing implementation in `CardPreview`) +- [x] Prevent default browser context menu on card images +- [x] Trigger preview on long-press only for small screens (or generally if touch) +- [x] Verify implementation + +## Context +User reported that long-pressing a card on mobile opens the browser menu (download image context menu). +Goal: Long press should show the card preview instead. + +## Implementation Details +- Modified `CardHoverWrapper` in `CardPreview.tsx` to prevent `contextmenu` event default behavior on mobile devices when an image is present. +- This ensures the custom long-press timer has time to trigger the preview without the system menu interfering. +- Logic uses `isMobile && hasImage` to target specific scenario. diff --git a/docs/development/devlog/2025-12-17-024800_mobile_card_slider.md b/docs/development/devlog/2025-12-17-024800_mobile_card_slider.md new file mode 100644 index 0000000..c563a4d --- /dev/null +++ b/docs/development/devlog/2025-12-17-024800_mobile_card_slider.md @@ -0,0 +1,16 @@ +# Mobile Card Size Slider + +## Status +- [x] Locate the card size slider component (`CubeManager` and `DraftView`) +- [x] Analyze why it is hidden on small screens (`hidden` utility classes) +- [x] Modify layout to ensure it is visible on mobile +- [x] Determine if layout adjustments are needed (Reduced width on `DraftView`) +- [x] Verify implementation (Code applied) + +## Context +User reported that the card size adjustment bar is missing on small screens. +The fix was applied to both the Cube Manager (pack review) and Draft View (live drafting). + +## Changes +- **CubeManager.tsx**: Removed `hidden sm:flex` from the slider container. It is now always `flex`. +- **DraftView.tsx**: Removed `hidden md:flex` and adjusted width to `w-24 md:w-32` to fit better on small screens. diff --git a/src/client/src/components/CardPreview.tsx b/src/client/src/components/CardPreview.tsx index ee398b1..8e5266f 100644 --- a/src/client/src/components/CardPreview.tsx +++ b/src/client/src/components/CardPreview.tsx @@ -192,8 +192,10 @@ export const CardHoverWrapper: React.FC<{ card: DraftCard; children: React.React onTouchEnd={handleTouchEnd} onTouchMove={handleTouchMove} onContextMenu={(e) => { - // Prevent context menu if we are long pressing to view card - if (isLongPressing) { + // Prevent context menu to allow long-press preview without browser menu + // We block it if we are on mobile (trying to open preview) + // OR if we are already in long-press state. + if ((isMobile && hasImage) || isLongPressing) { e.preventDefault(); e.stopPropagation(); } diff --git a/src/client/src/modules/cube/CubeManager.tsx b/src/client/src/modules/cube/CubeManager.tsx index f57aaa6..a3563ab 100644 --- a/src/client/src/modules/cube/CubeManager.tsx +++ b/src/client/src/modules/cube/CubeManager.tsx @@ -671,13 +671,13 @@ export const CubeManager: React.FC = ({ packs, setPacks, onGoT {/* Size Slider */} -
+
setCardWidth(parseInt(e.target.value))} className="w-24 accent-purple-500 cursor-pointer h-1.5 bg-slate-600 rounded-lg appearance-none" diff --git a/src/client/src/modules/draft/DraftView.tsx b/src/client/src/modules/draft/DraftView.tsx index 5c405f6..5be6c10 100644 --- a/src/client/src/modules/draft/DraftView.tsx +++ b/src/client/src/modules/draft/DraftView.tsx @@ -113,13 +113,13 @@ export const DraftView: React.FC = ({ draftState, currentPlayerI
{/* Card Scalar */} -
+
setCardScale(parseFloat(e.target.value))} className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500"