Skip to content

TKW: mobile family tree polish — chart-only view + 800% zoom#6

Merged
codebend3r merged 3 commits into
mainfrom
family-tree-chart-mobile
Jun 7, 2026
Merged

TKW: mobile family tree polish — chart-only view + 800% zoom#6
codebend3r merged 3 commits into
mainfrom
family-tree-chart-mobile

Conversation

@codebend3r

Copy link
Copy Markdown
Owner

Summary

  • On viewports ≤ bp.$sm (639.98px), FamilyTreeViewSwitcher renders only the chart — no toggle, no list — even when ?tree=list is in the URL.
  • FamilyTreeChart max zoom raised from 8 → 16; new 800% preset alongside the existing 25 / 50 / 100 / 200 / 400%.
  • On mobile, the chart now snaps to MOBILE_INITIAL_SCALE = 4 (the "200%") once post-mount, so iPhone users see a legible initial view instead of the desktop default fit. reset() honours the live isMobile value.
  • New shared hook lib/useIsMobile.ts (keyed to bp.$sm) drives both components.

Test plan

  • bun run test — full suite (351 tests, 34 files)
  • bun run typecheck + bun run lint clean
  • On desktop (> 639.98px): list ↔ chart toggle still works; URL ?tree=chart honoured
  • On iPhone-sized viewport (DevTools): toggle hidden, only the chart renders
  • On iPhone-sized viewport: chart starts at scale 4 ("200%"); Reset returns to 4
  • 800% preset zooms inner <g> to scale(16); pinch / wheel cap at 16

- `useIsMobile` hook keyed to `bp.$sm` (`max-width: 639.98px`)
- `FamilyTreeViewSwitcher` skips toggle + list when mobile
- chart shows even with `?tree=list` in the URL on mobile
… scale

- `MAX_SCALE` 8 → 16; preset list gains `800%`
- `MOBILE_INITIAL_SCALE = 4` (the new `200%`) applied once post-mount on mobile
- `reset()` honours the live `isMobile` value
- `initialCenteredTransform` takes an explicit `scale` parameter
@netlify

netlify Bot commented Jun 7, 2026

Copy link
Copy Markdown

Deploy Preview for theknownworld ready!

Name Link
🔨 Latest commit 3e9bef1
🔍 Latest deploy log https://app.netlify.com/projects/theknownworld/deploys/6a25c7d7ffbb110008a38fc4
😎 Deploy Preview https://deploy-preview-6--theknownworld.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

…traits

- populate `content/characters/arlan-of-pennytree.md` from AWOIAF (born ~150 AC, died 209 AC, `Ser` title, 3-paragraph body)
- populate `content/characters/hodor.md` from AWOIAF (alias `Walder`, 3-paragraph body; no canon dates)
- swap `melisandre` and `missandei` portraits from PNG to JPG
- add portraits for `arlan-of-pennytree`, `leo-tyrell`, `lyonel-baratheon`, `robyn-rysling`, `tanselle`
- stash rejected `leo` alternate at `public/backups/leo.jpg`
@codebend3r codebend3r merged commit ab3b5cc into main Jun 7, 2026
5 checks passed
@codebend3r codebend3r deleted the family-tree-chart-mobile branch June 7, 2026 19:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant