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

Kiosk UI/UX overhaul: dark landscape mode with hero countdowns and full-width layout

Browse Source 
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>
This commit is contained in:
kyle
2026-02-15 19:12:08 +01:00
parent 6565661740
commit 60e41c2cc4
9 changed files with 421 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/js/components/DeparturesManager.js
View File

@@ -222,20 +222,16 @@ class DeparturesManager {
const minutesUntil = this.calculateMinutesUntilArrival(departure);
let countdownText = displayTime;
let countdownClass = '';
const urgentThreshold = window.Constants?.TIME_THRESHOLDS?.URGENT || 5;
if (minutesUntil <= 0 || displayTime === 'Nu' || displayTime.toLowerCase() === 'nu') {
countdownText = 'Nu';
countdownClass = 'now';
} else if (minutesUntil < urgentThreshold) {
const minMatch = displayTime.match(/(\d+)\s*min/i);
if (minMatch) {
countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`;
} else {
countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`;
}
} else if (minutesUntil <= 2) {
countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`;
countdownClass = 'urgent';
} else if (minutesUntil <= 5) {
countdownText = `${minutesUntil} min`;
countdownClass = 'soon';
} else {
const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime);
if (isTimeOnly) {
@@ -244,7 +240,7 @@ class DeparturesManager {
countdownText = displayTime;
}
}
return { countdownText, countdownClass };
}
@@ -381,15 +377,13 @@ class DeparturesManager {
timeDisplayElement.appendChild(countdownSpan);
const timeRangeSpan = document.createElement('span');
timeRangeSpan.className = 'time-range';
if (secondDeparture) {
const secondTime = DeparturesManager.formatDateTime(this.getDepartureTime(secondDeparture));
timeRangeSpan.textContent = `${timeDisplay} - ${secondTime}`;
} else {
timeRangeSpan.textContent = timeDisplay;
}
timeDisplayElement.appendChild(timeRangeSpan);
// Show next 2-3 absolute times as small text
const nextTimesSpan = document.createElement('span');
nextTimesSpan.className = 'next-departures';
const upcomingTimes = direction.departures.slice(0, 3)
.map(d => DeparturesManager.formatDateTime(this.getDepartureTime(d)));
nextTimesSpan.textContent = upcomingTimes.join(' ');
timeDisplayElement.appendChild(nextTimesSpan);
timesContainer.appendChild(timeDisplayElement);
}
@@ -481,16 +475,14 @@ class DeparturesManager {
updateCardContent(card, departure) {
const { countdownText, countdownClass } = this.getCountdownInfo(departure);
const countdownElement = card.querySelector('.countdown');
if (countdownElement) {
countdownElement.classList.remove('now', 'urgent');
if (countdownClass === 'now') {
countdownElement.classList.add('now');
} else if (countdownClass === 'urgent') {
countdownElement.classList.add('urgent');
countdownElement.classList.remove('now', 'urgent', 'soon');
if (countdownClass) {
countdownElement.classList.add(countdownClass);
}
if (countdownElement.textContent !== `(${countdownText})`) {
countdownElement.textContent = `(${countdownText})`;
this.highlightElement(countdownElement);