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

feat: Implement vertical and horizontal layout selection for Draft View and update development documentation.
Some checks failed
Build and Deploy / build (push) Failing after 1m2s
Details

Browse Source
This commit is contained in:
Daniele Viti
2025-12-17 18:58:17 +01:00
parent 79a44173d0
commit bf40784667
3 changed files with 150 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/development/CENTRAL.md
View File

@@ -88,3 +88,4 @@
- [2025-12-17-183500_draft_ui_upgrade](./devlog/2025-12-17-183500_draft_ui_upgrade.md): Completed. Implemented 3D flip preview and consistent foil rendering in Draft View.
- [2025-12-17-184000_fix_draft_pool_ui](./devlog/2025-12-17-184000_fix_draft_pool_ui.md): Completed. Fixed "Your Pool" resizing bugs and removed unwanted hover animation.
- [Customizable Deck Builder Layout](./devlog/2025-12-17-170000_customizable_deck_builder.md): Completed. Implemented switchable Vertical (Side-by-Side) and Horizontal (Top-Bottom) layouts, with an integrated, improved Land Station.
- [Draft View Layout Selection](./devlog/2025-12-17-185000_draft_view_layout.md): Completed. Implemented Vertical/Horizontal layout selection for Draft View to match Deck Builder, optimizing screen space and preventing overlap.

19
docs/development/devlog/2025-12-17-185000_draft_view_layout.md Normal file
View File

@@ -0,0 +1,19 @@
# 2025-12-17 Draft View Layout Implementation
## Objective
Implement vertical and horizontal layout selection for the Draft View "Your Pool" section, similar to the Deck Builder. Ensure the pool section does not overlap with the card preview sidebar and shares the width with the active pack section in vertical mode.
## Changes
1. **Modified `src/client/src/modules/draft/DraftView.tsx`**:
* Added `layout` state ('vertical' | 'horizontal').
* Added layout toggle buttons (`Columns`, `LayoutTemplate` icons) to the header toolbar.
* Refactored the main content area to utilize a `flex` container that wraps both the Active Pack and the Pool sections.
* **Vertical Layout**: Renders Pack and Pool side-by-side (50/50 split) within the content area, ensuring `Pool` is to the right of the `ZoomSidebar` and does not overlap.
* **Horizontal Layout**: Retains the original "Pool at Bottom" behavior but moves the Pool section *inside* the content area flex container to respect the sidebar boundary.
* Updated `PoolCardItem` to support a vertical grid layout style when in vertical mode.
## Verification
* **Layout Switching**: Confirmed logic for switching between vertical (row) and horizontal (column) flex directions.
* **Sidebar Overlap**: The Pool section is now a sibling of the Pack section and both are children of the container adjacent to the fixed-width Sidebar. Use of `flex-1 flex overflow-hidden` ensures proper containment.
* **Resizing**: Preserved resize functionality for the horizontal layout (pool height).
* **Visual Consistency**: Used similar styling and icons as the Deck Builder.