mohanki/MRF-AI-SOP-Monitoring-react-node-postgres
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor EventTimeline to Option 2 layout: Unified Panel with 3 scrolling tracks

Browse Source
This commit is contained in:
Mohan K
2026-07-28 14:17:35 +05:30
parent d273cafd51
commit 0def7a5b68
2 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/EventTimeline.jsx
+14 -8
View File
@@ -55,8 +55,15 @@ export default function EventTimeline() {
}; };
}, [events]); }, [events]);
const renderTimeline = (zone, zoneEvents) => ( const renderTimeline = (zone, zoneEvents, index) => (
<div className="glass-panel" style={{ flex: 1, overflowY: 'auto', maxHeight: '70vh' }}> <div style={{
flex: 1,
overflowY: 'auto',
maxHeight: '70vh',
paddingLeft: index === 0 ? '0' : '1.5rem',
paddingRight: index === 2 ? '0' : '1.5rem',
borderRight: index === 2 ? 'none' : '1px solid rgba(255,255,255,0.05)'
}}>
<h2 style={{ <h2 style={{
position: 'sticky', position: 'sticky',
top: 0, top: 0,
@@ -64,8 +71,7 @@ export default function EventTimeline() {
backdropFilter: 'blur(16px)', backdropFilter: 'blur(16px)',
WebkitBackdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
paddingBottom: '1rem', paddingBottom: '1rem',
paddingTop: '1rem', paddingTop: '0.5rem',
marginTop: '-1rem',
borderBottom: '1px solid var(--panel-border)', borderBottom: '1px solid var(--panel-border)',
zIndex: 10 zIndex: 10
}}> }}>
@@ -134,10 +140,10 @@ export default function EventTimeline() {
<p>Location-wise sequential breakdown of events</p> <p>Location-wise sequential breakdown of events</p>
</div> </div>
<div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}> <div className="glass-panel" style={{ display: 'flex', padding: '1.5rem', alignItems: 'stretch' }}>
{renderTimeline('CO', groupedEvents.CO)} {renderTimeline('CO', groupedEvents.CO, 0)}
{renderTimeline('Mill', groupedEvents.Mill)} {renderTimeline('Mill', groupedEvents.Mill, 1)}
{renderTimeline('Conveyor', groupedEvents.Conveyor)} {renderTimeline('Conveyor', groupedEvents.Conveyor, 2)}
</div> </div>
</div> </div>
); );
ui/src/index.css
+20
View File
@@ -175,3 +175,23 @@ tbody tr:last-child td {
.animate-fade-in { .animate-fade-in {
animation: fadeIn 0.4s ease forwards; animation: fadeIn 0.4s ease forwards;
} }
/* Custom Scrollbars */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}