kyle/SignageHTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI overhaul: kiosk-optimized landscape mode #23

Merged
kyle merged 4 commits from ui-overhaul into main 2026-02-15 10:15:17 -08:00
Conversation 0 Commits 4 Files Changed 16 +3051 -2391
kyle commented 2026-02-15 10:14:55 -08:00
Owner
Copy Link

Summary

  • Kiosk UI/UX overhaul: Dark landscape mode with 5-row full-width grid layout optimized for readability at 3-10m distance
  • Codebase modernization: ES modules, inline style cleanup, template modal, accessibility improvements, responsive design
  • Map selector fix: Load nearby stops from SL API correctly

Key Changes (Kiosk Overhaul)

  • Dark background (#1a1a2e) with high-contrast text, background overlay hidden
  • Compact weather bar replacing full widget (temp + sunrise/sunset)
  • Hero countdown at 2em with 3-tier urgency colors: Nu (green), 1-2min (red), 3-5min (orange)
  • Next 2-3 absolute departure times replacing time ranges
  • Full-width blue gradient site headers
  • Tighter card spacing (65px min-height, 8px gap) so all 4 stops fit without scrolling
  • Scrolling news ticker with /api/ticker endpoint + fallback messages
  • Daylight bar repositioned into grid flow (no more fixed overlay)
  • All landscape changes scoped behind body.landscape CSS selectors

Test plan

  • Start server with npm start, open http://localhost:3002
  • Set orientation to Landscape in settings
  • Verify all 4 stops visible without scrolling (when service is running)
  • Verify countdown numbers are large and readable
  • Verify destination names not truncated at 1920px
  • Verify urgency colors (green/red/orange) appear correctly
  • Verify compact weather bar shows temp + sun times
  • Verify news ticker scrolls at bottom
  • Verify dark background with no image overlay
  • Switch to Normal orientation - verify original layout is unchanged

?? Generated with Claude Code

## Summary - **Kiosk UI/UX overhaul**: Dark landscape mode with 5-row full-width grid layout optimized for readability at 3-10m distance - **Codebase modernization**: ES modules, inline style cleanup, template modal, accessibility improvements, responsive design - **Map selector fix**: Load nearby stops from SL API correctly ## Key Changes (Kiosk Overhaul) - Dark background (#1a1a2e) with high-contrast text, background overlay hidden - Compact weather bar replacing full widget (temp + sunrise/sunset) - Hero countdown at 2em with 3-tier urgency colors: Nu (green), 1-2min (red), 3-5min (orange) - Next 2-3 absolute departure times replacing time ranges - Full-width blue gradient site headers - Tighter card spacing (65px min-height, 8px gap) so all 4 stops fit without scrolling - Scrolling news ticker with /api/ticker endpoint + fallback messages - Daylight bar repositioned into grid flow (no more fixed overlay) - All landscape changes scoped behind `body.landscape` CSS selectors ## Test plan - [ ] Start server with `npm start`, open http://localhost:3002 - [ ] Set orientation to Landscape in settings - [ ] Verify all 4 stops visible without scrolling (when service is running) - [ ] Verify countdown numbers are large and readable - [ ] Verify destination names not truncated at 1920px - [ ] Verify urgency colors (green/red/orange) appear correctly - [ ] Verify compact weather bar shows temp + sun times - [ ] Verify news ticker scrolls at bottom - [ ] Verify dark background with no image overlay - [ ] Switch to Normal orientation - verify original layout is unchanged ?? Generated with [Claude Code](https://claude.com/claude-code)
kyle added 4 commits 2026-02-15 10:14:56 -08:00
Items 10-15: ES modules, inline style cleanup, template modal, code modernization 1fdb3e48c7 
- Item 10: Convert to ES modules with import/export, single module entry point
- Item 11: Replace inline styles with CSS classes (background overlay, card
  animations, highlight effect, config modal form elements)
- Item 12: Move ConfigManager modal HTML from JS template literal to
  <template> element in index.html
- Item 13: Replace deprecated url.parse() with new URL() in server.js
  and update route handlers to use searchParams
- Item 14: Replace JSON.parse/stringify deep clone with structuredClone()
- Item 15: Remove dead JSON-fixing regex code from departures.js route

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Items 16-22: Icon classification, accessibility, responsive design, API params cdfd32dc69 
- Consolidate 5 weather icon methods into classifyWeatherIcon/applyWeatherIconClasses
- Add focus-visible styles, ARIA attributes, keyboard nav on config button/modal
- Add responsive breakpoints for departure cards, weather widget, config modal
- Simplify CSS selectors: replace :not(:is(...)) chains with body.normal
- Fix upsidedown layout margin assumption with transform-based centering
- Upgrade weather icons from @2x to @4x for high-DPI displays
- Add forecast window and transport filter params to SL departures API

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Fix map selector to load nearby stops from SL API 6565661740 
Replace hardcoded single-stop search with /api/sites/nearby endpoint
that loads all transit stops within radius of map center. Stops load
dynamically as user pans/zooms the map. Also unified marker layer
management and consistent CSS class for select buttons.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Kiosk UI/UX overhaul: dark landscape mode with hero countdowns and full-width layout 60e41c2cc4 
Redesign the landscape orientation for kiosk readability at 3-10m distance:

- Add dark kiosk background (#1a1a2e) with high-contrast light text
- Replace 2-column grid with 5-row full-width stacking layout
- Add compact weather bar (temp + sunrise/sunset) replacing full widget
- Enlarge countdown to 2em hero size in landscape
- Replace time ranges with next 2-3 absolute departure times
- Add 3-tier urgency colors: Nu (green), 1-2min (red), 3-5min (orange)
- Make site headers full-width blue gradient bars in landscape
- Tighten card spacing (65px min-height, 8px gap) for 4-stop visibility
- Add scrolling news ticker with /api/ticker fallback messages
- Fix daylight bar from position:fixed to relative in landscape grid
- Hide background overlay in landscape for maximum contrast
- Fix weather-section HTML missing closing div tags

All changes scoped behind body.landscape CSS selectors; other orientations unaffected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
kyle merged commit f2e5f23b18 into main 2026-02-15 10:15:17 -08:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
kyle
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kyle/SignageHTML#23
Delete Branch "ui-overhaul"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?