screentinker/frontend/js/views
ScreenTinker 803f4ec26d Portrait templates, a canvas that matches the layout, and a playlist mockup
Three related pieces. Zones were already stored as percentages and layouts
already carried their own width/height, so this is mostly design work rather
than plumbing.

SIX PORTRAIT TEMPLATES at 1080x1920. Deliberately not the landscape set turned
sideways: "Three Column" at 33% each becomes three tall slivers, and a 15% ticker
that reads well across 1080px is a 288px band on a 1920px-tall panel, so the
portrait ticker is 12% and the PiP window is wider than tall (a 30x30 box is
square on 16:9 and 324x576 in portrait). Seeded in schema.sql for fresh installs
AND as a migration, because schema.sql never runs on an existing database — and
upgraded instances are exactly the ones with portrait panels already deployed.

THE EDITOR CANVAS followed a hardcoded padding-top:56.25% — the 16:9 ratio trick.
Authoring a portrait layout meant dragging zones on a landscape canvas: the
percentages landed correctly on the panel and looked wrong everywhere you
designed them. It now derives from the layout's own height/width, clamped so a
pathological row cannot produce an unusable editor.

THE PLAYLIST PAGE now draws where content actually lands. A playlist has no
intrinsic layout, so the server reuses #104's derivation from the items' own zone
bindings and returns it. Previously an item could be tagged "Bottom Ticker" with
nothing to say the ticker is a thin strip along the bottom — people assigned by
zone name and found out by looking at a screen. Empty zones are dimmed, because
an empty zone shows its background colour on a real panel and that is worth
seeing before publishing rather than after.

Verified against a copy of prod: 6 templates and 12 zones created, the 7
landscape templates untouched, no errors at boot, and a second boot changes
nothing. Each stacked template's zone heights sum to exactly 100%.

1074 pass.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Uaeo9MvzKoyXuN6ZsbhtkL
2026-08-05 13:23:15 -05:00
..
activity.js Stop eight dashboard views reporting success for requests the server refused 2026-07-30 21:21:56 -05:00
admin-player-debug.js Add player debug overlay and server-side error telemetry sink 2026-05-15 15:20:42 -05:00
admin.js Stop eight dashboard views reporting success for requests the server refused 2026-07-30 21:21:56 -05:00
billing.js i18n batch 5: wire layout-editor + video-wall + billing (~85 keys) 2026-04-29 20:13:38 -05:00
content-library.js Stop the content edit dialog rewriting types it cannot represent 2026-07-30 21:09:59 -05:00
dashboard.js Wire BrightSign native sync end to end, chosen per group 2026-08-05 10:06:18 -05:00
designer.js Translate the labels that never went through t() 2026-07-28 19:52:52 -05:00
device-detail.js Drop the user-agent fallback — it could never fire 2026-08-05 10:30:10 -05:00
force-password-change.js feat(admin): admin-provisioned user creation + first-login gate (#10) 2026-06-05 11:03:56 -05:00
help.js docs(help): add AI Content Design quick-start to the in-app Help page (#41) 2026-06-09 13:58:53 -05:00
kiosk.js Stop eight dashboard views reporting success for requests the server refused 2026-07-30 21:21:56 -05:00
layout-editor.js Portrait templates, a canvas that matches the layout, and a playlist mockup 2026-08-05 13:23:15 -05:00
login.js feat(auth): self-service password reset 2026-07-27 11:19:39 -05:00
no-workspace.js feat(signup): optional org-on-create for self-service signups (#12) 2026-06-05 11:16:27 -05:00
onboarding.js i18n batch 3b: wire onboarding.js + admin.js (~84 keys) 2026-04-29 20:04:23 -05:00
playlists.js Portrait templates, a canvas that matches the layout, and a playlist mockup 2026-08-05 13:23:15 -05:00
reports.js Stop eight dashboard views reporting success for requests the server refused 2026-07-30 21:21:56 -05:00
schedule.js Stop eight dashboard views reporting success for requests the server refused 2026-07-30 21:21:56 -05:00
settings.js Make help tips reachable, and explain the pages that had none 2026-07-28 19:37:49 -05:00
teams.js Stop eight dashboard views reporting success for requests the server refused 2026-07-30 21:21:56 -05:00
video-wall.js Translate the labels that never went through t() 2026-07-28 19:52:52 -05:00
widgets.js Stop eight dashboard views reporting success for requests the server refused 2026-07-30 21:21:56 -05:00
workspace-members.js feat(admin): admin-provisioned user creation + first-login gate (#10) 2026-06-05 11:03:56 -05:00