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

Feature: Implement 2-column grid layout for current events

Browse Source 
- Removed display limits on current events to show all active notifications
- Implemented responsive 2-column grid layout (single column for 1 event, 2 columns for 2+)
- Added min-height to event-header for consistent spacing with/without ticket badges
- Fixed padding inconsistency between events with and without ticket numbers
- Maintained 2-event limit for upcoming events to preserve screen space
- Scaled proportionally for 4K displays (90px min-height, 24px margin)

This allows the dashboard to display all current events efficiently without
vertical overflow, addressing user feedback about event count limitations.

🤖 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:14:15 -04:00
parent 49f8274f47
commit 850885c911
1 changed files with 37 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
public/index.html
View File

@@ -123,6 +123,22 @@
margin-bottom: 20px;
}
.events-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
/* Single event - full width */
.events-grid.single {
grid-template-columns: 1fr;
}
/* 3 or more events - use 2 columns */
.events-grid.multi {
grid-template-columns: repeat(2, 1fr);
}
.section-title {
font-size: 36px;
font-weight: 800;
@@ -199,6 +215,7 @@
align-items: center;
margin-bottom: 12px;
gap: 20px;
min-height: 45px;
}
.event-title {
@@ -338,12 +355,21 @@
padding: 24px 50px;
}
.events-grid {
gap: 30px;
}
.event-card {
padding: 60px 80px;
margin-bottom: 30px;
margin-bottom: 0;
border-left: 100px solid;
}
.event-header {
min-height: 90px;
margin-bottom: 24px;
}
.event-title {
font-size: 64px;
}
@@ -463,12 +489,11 @@
let html = '';
// Limit display to fit on TV screen without scrolling
// 1080p: 2+2 = 4 events max
// 4K: Will scale up automatically via CSS
const MAX_CURRENT = 2;
// Current events: no limit, use grid layout for space efficiency
// Upcoming events: limit to 2 to save space
const MAX_UPCOMING = 2;
// Current Events (limit to MAX_CURRENT)
// Current Events - show all in grid layout
if (data.current && data.current.length > 0) {
// Determine badge color based on highest severity
const severity = getHighestSeverity(data.current);
@@ -476,8 +501,11 @@
html += '<div class="events-section">';
html += `<div class="section-title current severity-${severity}">CURRENT EVENTS</div>`;
const currentToShow = data.current.slice(0, MAX_CURRENT);
currentToShow.forEach(event => {
// Determine grid class based on number of events
const gridClass = data.current.length === 1 ? 'single' : 'multi';
html += `<div class="events-grid ${gridClass}">`;
data.current.forEach(event => {
const borderColor = getColorFromType(event.typecolor);
html += `
<div class="event-card current" style="border-left-color: ${borderColor};">
@@ -493,12 +521,8 @@
`;
});
// Show indicator if there are more events
if (data.current.length > MAX_CURRENT) {
html += `<div class="more-events">+ ${data.current.length - MAX_CURRENT} more current event(s)</div>`;
}
html += '</div>';
html += '</div>'; // Close grid
html += '</div>'; // Close section
}
// Upcoming Events (limit to MAX_UPCOMING)