ge-aerospace/shopfloor-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: Enable scrolling and remove event display limits

Browse Source 
- Removed overflow: hidden and height: 100vh from body to allow scrolling
- Removed MAX_UPCOMING limit - now displays all upcoming events
- Removed "more events" indicator since all events are shown
- Added grid layout to upcoming events section for consistent display
- Both current and upcoming events now use 2-column grid (single column for 1 event)

This allows users to scroll and interact with the page to view all events
without artificial limits, improving usability for TV displays.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
cproudlock
2025-10-24 10:23:37 -04:00
parent 850885c911
commit 7190606dd6
1 changed files with 10 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/index.html
View File

@@ -18,8 +18,8 @@
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #00003d; /* GE Aerospace Deep Navy */ background: #00003d; /* GE Aerospace Deep Navy */
color: #fff; color: #fff;
overflow: hidden; margin: 0;
height: 100vh; padding: 0;
} }
.container { .container {
@@ -488,11 +488,6 @@
const container = document.getElementById('eventsContainer'); const container = document.getElementById('eventsContainer');
let html = ''; let html = '';
// Limit display to fit on TV screen without scrolling
// Current events: no limit, use grid layout for space efficiency
// Upcoming events: limit to 2 to save space
const MAX_UPCOMING = 2;
// Current Events - show all in grid layout // Current Events - show all in grid layout
if (data.current && data.current.length > 0) { if (data.current && data.current.length > 0) {
// Determine badge color based on highest severity // Determine badge color based on highest severity
@@ -525,13 +520,16 @@
html += '</div>'; // Close section html += '</div>'; // Close section
} }
// Upcoming Events (limit to MAX_UPCOMING) // Upcoming Events - show all in grid layout
if (data.upcoming && data.upcoming.length > 0) { if (data.upcoming && data.upcoming.length > 0) {
html += '<div class="events-section">'; html += '<div class="events-section">';
html += '<div class="section-title upcoming">UPCOMING (Next 72 Hours)</div>'; html += '<div class="section-title upcoming">UPCOMING (Next 72 Hours)</div>';
const upcomingToShow = data.upcoming.slice(0, MAX_UPCOMING); // Determine grid class based on number of events
upcomingToShow.forEach(event => { const gridClass = data.upcoming.length === 1 ? 'single' : 'multi';
html += `<div class="events-grid ${gridClass}">`;
data.upcoming.forEach(event => {
const borderColor = getColorFromType(event.typecolor); const borderColor = getColorFromType(event.typecolor);
html += ` html += `
<div class="event-card upcoming" style="border-left-color: ${borderColor};"> <div class="event-card upcoming" style="border-left-color: ${borderColor};">
@@ -547,12 +545,8 @@
`; `;
}); });
// Show indicator if there are more events html += '</div>'; // Close grid
if (data.upcoming.length > MAX_UPCOMING) { html += '</div>'; // Close section
html += `<div class="more-events">+ ${data.upcoming.length - MAX_UPCOMING} more upcoming event(s)</div>`;
}
html += '</div>';
} }
// No events message // No events message