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

feat: improve departure information hierarchy with clearer time display

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kyle
2026-02-15 19:57:53 +01:00
parent 98441bc906
commit 92166cea6e
2 changed files with 14 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/css/components.css
View File

@@ -473,7 +473,6 @@ body.dark-mode #config-cancel-button:hover {
.clock-time, .clock-time,
.countdown-large, .countdown-large,
.next-departures, .next-departures,
.time-display,
#custom-weather .temperature, #custom-weather .temperature,
#custom-weather .forecast-hour .temp { #custom-weather .forecast-hour .temp {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
@@ -728,20 +727,10 @@ body.dark-mode .direction-destination {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
gap: 3px; gap: 2px;
min-width: 110px;
flex-shrink: 0; flex-shrink: 0;
max-width: 110px;
} }
/* Time display */
.time-display {
display: flex;
align-items: baseline;
gap: 4px;
white-space: nowrap;
font-size: 0.95em;
}
/* Pulse animation for urgent and now states */ /* Pulse animation for urgent and now states */
@keyframes pulse-glow { @keyframes pulse-glow {
@@ -1462,9 +1451,6 @@ body.dark-mode .config-search-input:focus-visible {
max-width: 90px; max-width: 90px;
} }
.time-display {
font-size: 0.85em;
}
.direction-arrow-box { .direction-arrow-box {
width: 24px; width: 24px;

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

@@ -359,33 +359,25 @@ class DeparturesManager {
timesContainer.className = 'times-container'; timesContainer.className = 'times-container';
const firstDeparture = direction.departures[0]; const firstDeparture = direction.departures[0];
const secondDeparture = direction.departures[1];
if (firstDeparture) { if (firstDeparture) {
const displayTime = firstDeparture.display;
const departureTime = this.getDepartureTime(firstDeparture);
const timeDisplay = DeparturesManager.formatDateTime(departureTime);
const { countdownText, countdownClass } = this.getCountdownInfo(firstDeparture); const { countdownText, countdownClass } = this.getCountdownInfo(firstDeparture);
const timeDisplayElement = document.createElement('div'); // Primary countdown - big and prominent
timeDisplayElement.className = 'time-display';
const countdownSpan = document.createElement('span'); const countdownSpan = document.createElement('span');
countdownSpan.className = `countdown-large ${countdownClass}`; countdownSpan.className = `countdown-large ${countdownClass}`;
countdownSpan.textContent = countdownText; countdownSpan.textContent = countdownText;
timesContainer.appendChild(countdownSpan);
timeDisplayElement.appendChild(countdownSpan);
// Next departures - separate line, excludes current departure
// Show next 2-3 absolute times as small text const upcomingTimes = direction.departures.slice(1, 4)
const nextTimesSpan = document.createElement('span');
nextTimesSpan.className = 'next-departures';
const upcomingTimes = direction.departures.slice(0, 3)
.map(d => DeparturesManager.formatDateTime(this.getDepartureTime(d))); .map(d => DeparturesManager.formatDateTime(this.getDepartureTime(d)));
nextTimesSpan.textContent = upcomingTimes.join(' '); if (upcomingTimes.length > 0) {
timeDisplayElement.appendChild(nextTimesSpan); const nextTimesDiv = document.createElement('div');
nextTimesDiv.className = 'next-departures';
timesContainer.appendChild(timeDisplayElement); nextTimesDiv.textContent = 'Sedan: ' + upcomingTimes.join(' ');
timesContainer.appendChild(nextTimesDiv);
}
} }
directionRow.appendChild(timesContainer); directionRow.appendChild(timesContainer);