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

feat: Enhance card size slider UI with tooltips and improved layout/styling in draft and deck builder views.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-18 03:04:41 +01:00
parent 78af33ec99
commit b39da587d4
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/client/src/modules/draft/DeckBuilderView.tsx
View File

@@ -702,8 +702,8 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
</div> </div>
{/* Slider */} {/* Slider */}
<div className="hidden sm:flex items-center gap-2 bg-slate-900 rounded-lg px-2 py-1 border border-slate-700 h-9"> <div className="hidden sm:flex items-center gap-2 bg-slate-900 rounded-lg px-2 border border-slate-700 h-9">
<div className="w-2 h-3 rounded border border-slate-500 bg-slate-700" /> <div className="w-2 h-3 rounded border border-slate-500 bg-slate-700" title="Small Cards" />
<input <input
type="range" type="range"
min="60" min="60"
@@ -719,7 +719,7 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
onTouchEnd={() => setCardWidth(localCardWidth)} onTouchEnd={() => setCardWidth(localCardWidth)}
className="w-24 accent-purple-500 cursor-pointer h-1.5 bg-slate-800 rounded-lg appearance-none" className="w-24 accent-purple-500 cursor-pointer h-1.5 bg-slate-800 rounded-lg appearance-none"
/> />
<div className="w-3 h-5 rounded border border-slate-500 bg-slate-700" /> <div className="w-3 h-5 rounded border border-slate-500 bg-slate-700" title="Large Cards" />
</div> </div>
</div> </div>

7
src/client/src/modules/draft/DraftView.tsx
View File

@@ -268,8 +268,8 @@ export const DraftView: React.FC<DraftViewProps> = ({ draftState, currentPlayerI
</div> </div>
{/* Card Scalar */} {/* Card Scalar */}
<div className="flex flex-col gap-1 w-24 md:w-32"> <div className="flex items-center gap-2 bg-slate-900 rounded-lg px-2 border border-slate-700 h-10">
<label className="text-[10px] text-slate-500 uppercase font-bold tracking-wider">Card Size</label> <div className="w-2 h-3 rounded border border-slate-500 bg-slate-700" title="Small Cards" />
<input <input
type="range" type="range"
min="0.35" min="0.35"
@@ -286,8 +286,9 @@ export const DraftView: React.FC<DraftViewProps> = ({ draftState, currentPlayerI
}} }}
onMouseUp={() => setCardScale(localCardScale)} onMouseUp={() => setCardScale(localCardScale)}
onTouchEnd={() => setCardScale(localCardScale)} onTouchEnd={() => setCardScale(localCardScale)}
className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500" className="w-24 accent-emerald-500 cursor-pointer h-1.5 bg-slate-800 rounded-lg appearance-none"
/> />
<div className="w-3 h-5 rounded border border-slate-500 bg-slate-700" title="Large Cards" />
</div> </div>
</div> </div>