Stat block panel: fold/unfold and pin to second panel #3

Closed
opened 2026-03-11 11:12:00 +01:00 by dostulata · 0 comments
Owner

Summary

Replace the stat block panel's close button with fold/unfold controls that collapse the panel to a slim tab on the right edge (with smooth CSS animation). Add a "pin" button that opens the creature in a second panel on the left side of the screen, allowing the user to browse other creatures in the right panel. The pin button is hidden on small screens where dual panels don't fit. Remove the "Stat Block" heading text as the panel is self-explanatory.

Acceptance Criteria

Fold and Unfold Stat Block Panel

  • Clicking the fold button slides the panel out and shows a slim vertical tab with the creature's name on the right edge
  • Clicking the folded tab slides the panel back in showing the same creature that was displayed before folding
  • The panel has no close button — only a fold toggle
  • The panel has no "Stat Block" heading text
  • Fold/unfold transitions complete with a smooth slide animation (~200ms ease-out)

Pin Creature to Second Panel

  • Clicking the pin button on a wide screen opens the current creature in a new panel on the left side
  • After pinning, clicking a different combatant updates the right panel while the left panel keeps showing the pinned creature
  • Clicking the unpin button on the left panel removes it, leaving only the right panel
  • The pin button is hidden on small screens / mobile viewports

Fold Behavior with Pinned Panel

  • Folding the right panel while a creature is pinned leaves the left pinned panel visible
  • Unfolding the right panel restores the last browsed creature

Edge Cases

  • If a pinned creature is removed from the encounter, the pinned panel continues displaying its stat block
  • If the active combatant changes while the panel is folded, the panel automatically unfolds to show the new active creature
  • Resizing from wide to narrow hides the pinned panel and pin button; resizing back restores them
  • Fold/unfold works identically when the panel is showing bulk import content
## Summary Replace the stat block panel's close button with fold/unfold controls that collapse the panel to a slim tab on the right edge (with smooth CSS animation). Add a "pin" button that opens the creature in a second panel on the left side of the screen, allowing the user to browse other creatures in the right panel. The pin button is hidden on small screens where dual panels don't fit. Remove the "Stat Block" heading text as the panel is self-explanatory. ## Acceptance Criteria ### Fold and Unfold Stat Block Panel - [x] Clicking the fold button slides the panel out and shows a slim vertical tab with the creature's name on the right edge - [x] Clicking the folded tab slides the panel back in showing the same creature that was displayed before folding - [x] The panel has no close button — only a fold toggle - [x] The panel has no "Stat Block" heading text - [x] Fold/unfold transitions complete with a smooth slide animation (~200ms ease-out) ### Pin Creature to Second Panel - [x] Clicking the pin button on a wide screen opens the current creature in a new panel on the left side - [x] After pinning, clicking a different combatant updates the right panel while the left panel keeps showing the pinned creature - [x] Clicking the unpin button on the left panel removes it, leaving only the right panel - [x] The pin button is hidden on small screens / mobile viewports ### Fold Behavior with Pinned Panel - [x] Folding the right panel while a creature is pinned leaves the left pinned panel visible - [x] Unfolding the right panel restores the last browsed creature ### Edge Cases - [x] If a pinned creature is removed from the encounter, the pinned panel continues displaying its stat block - [x] If the active combatant changes while the panel is folded, the panel automatically unfolds to show the new active creature - [x] Resizing from wide to narrow hides the pinned panel and pin button; resizing back restores them - [x] Fold/unfold works identically when the panel is showing bulk import content
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: dostulata/initiative#3