feat: Implement full-width layout, sticky sidebar, and Archidekt-style stacked view for Cube Manager, extracting card preview components.
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
# Cube Manager Sticky Sidebar
|
||||
|
||||
## Objective
|
||||
Update the `CubeManager` layout to make the left-side settings/controls panel sticky. This allows the user to access controls (Generate, Reset, etc.) while scrolling through a long list of generated packs on the right.
|
||||
|
||||
## Changes
|
||||
- Modified `src/client/src/modules/cube/CubeManager.tsx`:
|
||||
- Added `sticky top-4` to the left column wrapper.
|
||||
- Added `self-start` to ensure the sticky element doesn't stretch to the full height of the container (which would negate stickiness).
|
||||
- Added `max-h-[calc(100vh-2rem)]` and `overflow-y-auto` to the left panel to ensure its content remains accessible if it exceeds the viewport height.
|
||||
- Added `custom-scrollbar` styling for consistent aesthetics.
|
||||
|
||||
## Result
|
||||
The left panel now follows the user's scroll position, improving usability for large pack generations.
|
||||
12
docs/development/devlog/2025-12-17-003500_cube_full_width.md
Normal file
12
docs/development/devlog/2025-12-17-003500_cube_full_width.md
Normal file
@@ -0,0 +1,12 @@
|
||||
# Cube Manager Full Width Layout
|
||||
|
||||
## Objective
|
||||
Update the `CubeManager` layout to utilize the full width of the screen, removing the maximum width constraint. This allows for better utilization of screen real estate, especially on wider monitors, and provides more space for the pack grid.
|
||||
|
||||
## Changes
|
||||
- Modified `src/client/src/modules/cube/CubeManager.tsx`:
|
||||
- Removed `max-w-7xl` and `mx-auto` classes from the main container.
|
||||
- Added `w-full` to ensure the container spans the entire available width.
|
||||
|
||||
## Result
|
||||
The Cube Manager interface now stretches to fill the viewport width, providing a more expansive view for managing packs and settings.
|
||||
16
docs/development/devlog/2025-12-17-004500_archidekt_view.md
Normal file
16
docs/development/devlog/2025-12-17-004500_archidekt_view.md
Normal file
@@ -0,0 +1,16 @@
|
||||
# Cube Manager Archidekt View
|
||||
|
||||
## Objective
|
||||
Implement an "Archidekt-style" stacked view for pack generation. This view organizes cards into columns by type (Creature, Instant, Land, etc.) with vertical overlapping to save space while keeping headers visible.
|
||||
|
||||
## Changes
|
||||
1. **Refactor PackCard**: Extracted `FloatingPreview` and `CardHoverWrapper` into `src/client/src/components/CardPreview.tsx` to resolve circular dependencies and clean up `PackCard.tsx`.
|
||||
2. **Update StackView**:
|
||||
- Rewrite `StackView.tsx` to group cards by `typeLine` (categories: Creature, Planeswalker, Instant, Sorcery, Enchantment, Artifact, Land, Battle, Other).
|
||||
- Sort cards within categories by CMC.
|
||||
- Render columns using Flexbox.
|
||||
- Implement overlapping "card strip" look using negative `margin-bottom` on cards.
|
||||
- Value tuning: `margin-bottom: -125%` seems appropriate for a standard card aspect ratio to reveal the title bar.
|
||||
|
||||
## Result
|
||||
The "Stack" view option in Cube Manager now renders packs as organized, sorted columns similar to deck-builder interfaces.
|
||||
Reference in New Issue
Block a user