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

Landscape kiosk overhaul: 3-column layout, resilient updates, visual polish

Browse Source 
- Add 3-column balanced site distribution using greedy weight algorithm
- Build new DOM off-screen in DocumentFragment, swap atomically (no flash)
- Skip empty API responses and preserve display on transient errors
- Remove news ticker from UI and grid layout
- Add blue-to-red gradient on site header bars
- Bump font sizes: destinations 1.4em, countdowns 1.5em, line numbers 1.6em
- Add breathing pulse animation on daylight bar sun/moon icons
- Fix daylight bar indicator snapping to position on first render
- Make config button visible in landscape with semi-transparent background
- Add weather forecast strip as grid row 4 with compact styling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kyle
2026-02-15 23:07:10 +01:00
parent 5f60ed88c8
commit 57cd9809e0
5 changed files with 222 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
public/css/components.css
View File

@@ -56,6 +56,12 @@ body.dark-mode .clock-container {
opacity: 1;
}
body.landscape .config-button {
background-color: rgba(255, 255, 255, 0.15);
opacity: 0.7;
bottom: 50px;
}
/* Configuration modal styles */
.config-modal {
display: none;
@@ -1046,16 +1052,16 @@ body.landscape .site-header {
body.landscape .site-name {
display: block;
background: rgba(0, 97, 161, 0.3);
color: var(--color-text-secondary);
font-weight: 600;
background: linear-gradient(90deg, rgba(0, 97, 161, 0.45), rgba(200, 30, 50, 0.45));
color: #fff;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
padding: 4px 16px;
padding: 5px 16px;
border-radius: 2px;
box-shadow: none;
font-size: 0.8em;
border-left: 3px solid var(--color-primary-light);
font-size: 0.95em;
border-left: 4px solid var(--color-accent);
}
/* Compact weather bar - hidden by default, shown in landscape */
@@ -1092,13 +1098,7 @@ body.landscape #compact-weather-bar {
}
body.landscape #news-ticker {
display: block;
overflow: hidden;
background: var(--ticker-bg);
height: var(--ticker-height);
line-height: var(--ticker-height);
border-radius: 4px;
position: relative;
display: none;
}
#news-ticker .ticker-content {
@@ -1155,13 +1155,28 @@ body.landscape #news-ticker {
pointer-events: none;
}
#daylight-hours-bar .sun-icon {
#daylight-hours-bar .sun-icon,
#daylight-hours-bar .moon-icon {
font-size: 18px;
display: block;
animation: celestial-pulse 3s ease-in-out infinite;
}
#daylight-hours-bar .sun-icon {
filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}
#daylight-hours-bar .moon-icon {
filter: drop-shadow(0 0 4px rgba(180, 200, 255, 0.8));
text-shadow: 0 0 8px rgba(180, 200, 255, 0.6);
}
@keyframes celestial-pulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.3); opacity: 1; }
}
/* Landscape: daylight bar sits in grid instead of fixed overlay */
body.landscape #daylight-hours-bar {
position: relative;