feat: Refactor application layout for full-height content and implement resizable draft UI with card zoom and scaling.
This commit is contained in:
23
docs/development/devlog/2025-12-16-195000_draft_ui_polish.md
Normal file
23
docs/development/devlog/2025-12-16-195000_draft_ui_polish.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# 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`).
|
||||
Reference in New Issue
Block a user