services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ca7b5bf7fa1f1d28aa9b982957bc6e6767930c65
mtg-online-drafter/docs/development/devlog/2025-12-17-024000_view_scale_slider.md

1.1 KiB
Raw Blame History

View Scale Slider

Objective

Provide the user with granular control over card thumbnail sizes across the application, ensuring consistency between Grid and Stack views.

Changes

  • CubeManager:
    • Added a new cardWidth state variable, persisted to localStorage (default 140px).
    • Introduced a Range Slider in the top-right control toolbar (visible on desktop) allowing adjustment from 100px to 300px.
    • Passed cardWidth down to PackCard.
  • PackCard (Grid View):
    • Replaced the responsive grid-cols-* logic with a flex flex-wrap layout.
    • Each card container now receives an explicit style={{ width: cardWidth }}.
  • StackView (Stack View):
    • Accepted cardWidth prop.
    • Applied style={{ width: cardWidth }} to the column containers, dynamically ensuring that stacks resize in sync with the grid view setting.

Result

Users can now drag a slider to instantly resize all card thumbnails on the screen. This allows for customized density—make cards huge to admire the art, or tiny to see the entire cube/pool at a glance—with perfect size synchronization between the different view modes.