Merge pull request 'feat: team sidebar as floating panel on desktop' (#85) from feature/team-sidebar-desktop into develop
Reviewed-on: #85
This commit was merged in pull request #85.
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
---
|
||||
# nuzlocke-tracker-532i
|
||||
title: 'UX: Make level field optional in boss defeat modal'
|
||||
status: todo
|
||||
status: completed
|
||||
type: feature
|
||||
priority: normal
|
||||
created_at: 2026-03-21T21:50:48Z
|
||||
updated_at: 2026-03-21T22:04:08Z
|
||||
updated_at: 2026-03-22T09:16:12Z
|
||||
---
|
||||
|
||||
## Problem
|
||||
@@ -22,8 +22,17 @@ When recording which team members beat a boss, users must manually enter a level
|
||||
|
||||
Remove the level field entirely from the UI and make it optional in the backend:
|
||||
|
||||
- [ ] Remove level input from `BossDefeatModal.tsx`
|
||||
- [ ] Make `level` column nullable in the database (alembic migration)
|
||||
- [ ] Update the API schema to make level optional (default to null)
|
||||
- [ ] Update any backend validation that requires level
|
||||
- [ ] Verify boss result display still works without level data
|
||||
- [x] Remove level input from `BossDefeatModal.tsx`
|
||||
- [x] Make `level` column nullable in the database (alembic migration)
|
||||
- [x] Update the API schema to make level optional (default to null)
|
||||
- [x] Update any backend validation that requires level
|
||||
- [x] Verify boss result display still works without level data
|
||||
|
||||
|
||||
## Summary of Changes
|
||||
|
||||
- Removed level input field from BossDefeatModal.tsx, simplifying team selection to just checkboxes
|
||||
- Created alembic migration to make boss_result_team.level column nullable
|
||||
- Updated SQLAlchemy model and Pydantic schemas to make level optional (defaults to null)
|
||||
- Updated RunEncounters.tsx to conditionally render level only when present
|
||||
- Updated frontend TypeScript types for BossResultTeamMember and BossResultTeamMemberInput
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
# nuzlocke-tracker-lkro
|
||||
title: 'UX: Make team section a floating sidebar on desktop'
|
||||
status: todo
|
||||
status: completed
|
||||
type: feature
|
||||
priority: normal
|
||||
created_at: 2026-03-21T21:50:48Z
|
||||
updated_at: 2026-03-22T08:08:13Z
|
||||
updated_at: 2026-03-22T09:11:58Z
|
||||
---
|
||||
|
||||
## Problem
|
||||
@@ -28,9 +28,31 @@ Alternative: A floating action button (FAB) that opens the team in a slide-over
|
||||
|
||||
## Checklist
|
||||
|
||||
- [ ] Add responsive 2-column layout to RunEncounters page (desktop only)
|
||||
- [ ] Move team section into a sticky sidebar column
|
||||
- [ ] Ensure sidebar scrolls independently if team is taller than viewport
|
||||
- [ ] Keep current stacked layout on mobile/tablet
|
||||
- [ ] Test with various team sizes (0-6 pokemon)
|
||||
- [ ] Test evolution/nickname editing still works from sidebar
|
||||
- [x] Add responsive 2-column layout to RunEncounters page (desktop only)
|
||||
- [x] Move team section into a sticky sidebar column
|
||||
- [x] Ensure sidebar scrolls independently if team is taller than viewport
|
||||
- [x] Keep current stacked layout on mobile/tablet
|
||||
- [x] Test with various team sizes (0-6 pokemon)
|
||||
- [x] Test evolution/nickname editing still works from sidebar
|
||||
|
||||
## Summary of Changes
|
||||
|
||||
Implemented a responsive 2-column layout for the RunEncounters page:
|
||||
|
||||
**Desktop (lg, ≥1024px):**
|
||||
- Encounters list on the left in a flex column
|
||||
- Team section in a 256px sticky sidebar on the right
|
||||
- Sidebar stays visible while scrolling through routes and bosses
|
||||
- Independent scrolling for sidebar when team is taller than viewport (max-h-[calc(100vh-6rem)] overflow-y-auto)
|
||||
- 2-column grid for pokemon cards in sidebar
|
||||
|
||||
**Mobile/Tablet (<1024px):**
|
||||
- Original stacked layout preserved (team above encounters)
|
||||
- Collapsible team section with expand/collapse toggle
|
||||
|
||||
**Technical changes:**
|
||||
- Page container widened from max-w-4xl to lg:max-w-6xl
|
||||
- Added lg:flex lg:gap-6 wrapper for 2-column layout
|
||||
- Mobile team section hidden on lg with lg:hidden
|
||||
- Desktop sidebar hidden below lg with hidden lg:block
|
||||
- Sidebar styled with bg-surface-1 border and rounded corners
|
||||
|
||||
Reference in New Issue
Block a user