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

fix: Enhance Cube Manager mobile UI by adjusting sidebar and header layouts and disabling card hover previews.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-17 00:39:11 +01:00
parent 0f82be86c3
commit 23aa1e96d6
4 changed files with 30 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/development/CENTRAL.md
View File

@@ -37,3 +37,4 @@
- [Cube Sticky Sidebar](./devlog/2025-12-17-003000_cube_sticky_sidebar.md): Completed. Made the Cube Manager left sidebar sticky to improve usability with long pack lists.
- [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.

20
docs/development/devlog/2025-12-17-005000_mobile_ui_fixes.md Normal file
View File

@@ -0,0 +1,20 @@
# Cube Manager Mobile Improvements
## Objective
Fix usability issues on mobile devices where UI elements were overlapping and "unusable".
## Changes
1. **Sidebar Responsiveness**:
- Modified `CubeManager.tsx` to apply `sticky` positioning to the left sidebar *only* on large screens (`lg:` prefix). On mobile, it is now standard static flow.
- Limited `max-height` and `overflow-y-auto` only to `lg:` screens.
2. **Header Improvements**:
- Updated the "Packs" sticky header in `CubeManager.tsx` to handle wrapping gracefully.
- Added `backdrop-blur-xl` and slightly higher opacity to ensure content behind it doesn't bleed through visually (fixing "overlap" perception).
- Enabled `overflow-x-auto` for the buttons container to prevent them from breaking out of the viewport on very narrow screens.
3. **Disable Heavy Hovers**:
- Modified `CardPreview.tsx` to disable the `FloatingPreview` (large full-card hover) on devices with width < 1024px. This prevents the preview from sticking or covering the UI on touch devices.
## Result
The UI should now be clean and usable on mobile, with no overlapping elements and a natural scroll flow.

4
src/client/src/components/CardPreview.tsx
View File

@@ -57,6 +57,8 @@ export const CardHoverWrapper: React.FC<{ card: DraftCard; children: React.React
setMousePos({ x: e.clientX, y: e.clientY });
};
const isMobile = typeof window !== 'undefined' && window.innerWidth < 1024; // Disable on tablet/mobile
return (
<div
className={className}
@@ -65,7 +67,7 @@ export const CardHoverWrapper: React.FC<{ card: DraftCard; children: React.React
onMouseMove={handleMouseMove}
>
{children}
{isHovering && hasImage && (
{isHovering && hasImage && !isMobile && (
<FloatingPreview card={card} x={mousePos.x} y={mousePos.y} />
)}
</div>

12
src/client/src/modules/cube/CubeManager.tsx
View File

@@ -327,7 +327,7 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, onGoT
<div className="h-full overflow-y-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-8 p-4 md:p-6">
{/* --- LEFT COLUMN: CONTROLS --- */}
<div className="lg:col-span-4 flex flex-col gap-4 sticky top-4 self-start max-h-[calc(100vh-2rem)] overflow-y-auto custom-scrollbar p-1">
<div className="lg:col-span-4 flex flex-col gap-4 lg:sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-2rem)] lg:overflow-y-auto custom-scrollbar p-1">
<div className="bg-slate-800 rounded-xl p-4 border border-slate-700 shadow-xl">
{/* Source Toggle */}
<div className="flex p-1 bg-slate-900 rounded-lg mb-4 border border-slate-700">
@@ -627,21 +627,21 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, onGoT
{/* --- RIGHT COLUMN: PACKS --- */}
<div className="lg:col-span-8">
<div className="flex flex-col sm:flex-row justify-between items-center mb-6 gap-4 sticky top-4 z-40 bg-slate-900/90 backdrop-blur-sm p-3 rounded-xl border border-white/5 shadow-2xl">
<div className="flex items-center gap-4">
<div className="flex flex-col sm:flex-row justify-between items-center mb-6 gap-4 sticky top-4 z-40 bg-slate-900/95 backdrop-blur-xl p-3 rounded-xl border border-white/10 shadow-2xl">
<div className="flex items-center gap-4 w-full sm:w-auto justify-between sm:justify-start">
<h2 className="text-xl font-bold text-white flex items-center gap-2">
<span className="bg-slate-700 text-purple-400 px-3 py-1 rounded-lg text-sm border border-slate-600">{packs.length}</span>
Packs
</h2>
</div>
<div className="flex gap-2">
<div className="flex gap-2 w-full sm:w-auto justify-end overflow-x-auto pb-1 sm:pb-0">
{/* Play Button */}
{packs.length > 0 && (
<>
<button
onClick={onGoToLobby}
className="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold rounded-lg shadow-lg flex items-center gap-2 animate-in fade-in zoom-in"
className="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold rounded-lg shadow-lg flex items-center gap-2 animate-in fade-in zoom-in whitespace-nowrap"
>
<Users className="w-4 h-4" /> <span className="hidden sm:inline">Play Online</span>
</button>
@@ -663,7 +663,7 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, onGoT
</>
)}
<div className="flex bg-slate-800 rounded-lg p-1 border border-slate-700">
<div className="flex bg-slate-800 rounded-lg p-1 border border-slate-700 shrink-0">
<button onClick={() => setViewMode('list')} className={`p-2 rounded ${viewMode === 'list' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><List className="w-4 h-4" /></button>
<button onClick={() => setViewMode('grid')} className={`p-2 rounded ${viewMode === 'grid' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><LayoutGrid className="w-4 h-4" /></button>
<button onClick={() => setViewMode('stack')} className={`p-2 rounded ${viewMode === 'stack' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><Layers className="w-4 h-4" /></button>