24 lines
1.2 KiB
Markdown
24 lines
1.2 KiB
Markdown
# Draft Interface UI Polish
|
|
|
|
## Status
|
|
- [x] Analyze current UI issues (bottom border, scrolling).
|
|
- [x] Remove global padding from `App.tsx`.
|
|
- [x] Refactor `DraftView.tsx` for a cleaner, game-like experience.
|
|
- [x] Implement immersive 3D effects and tray-style pool view.
|
|
|
|
## Context
|
|
The user requested to improve the draft card pick interface. Specifically to remove the ugly bottom border, avoid page scrolls, and make it feel more like a game.
|
|
|
|
## Implementation Details
|
|
|
|
### `src/client/src/App.tsx`
|
|
- Removed `pb-20` from the main container to allow full-screen layouts without forced scrolling at the bottom.
|
|
|
|
### `src/client/src/modules/draft/DraftView.tsx`
|
|
- **Layout**: Changed to relative positioning with `overflow-hidden` to contain all elements within the viewport.
|
|
- **Visuals**:
|
|
- Added a radial gradient background overlay.
|
|
- Redesigned the "Current Pack" area with `[perspective:1000px]` and 3D hover transforms.
|
|
- Redesigned the "Your Pool" bottom area to be a "tray" with `backdrop-blur`, gradient background, and removed the boxy border.
|
|
- **Scrollbars**: Hidden scrollbars in the main pack view for a cleaner look (`[&::-webkit-scrollbar]:hidden`).
|