Improved day tab selection and icons
Tweaked at a glance panel
This commit is contained in:
Fraxle
2026-06-23 17:28:47 +01:00
parent c090367f7c
commit 87907f50d6
5 changed files with 52 additions and 48 deletions
+17 -14
View File
@@ -1514,20 +1514,23 @@ export function UTCIForecast() {
${((glanceSummary && glanceSummary.length > 0) || eventGlanceItems.length > 0) && html`
<div class="insight-panel insight-panel--glance">
<div class="insight-panel-title">At a glance${glanceDate ? ` · ${glanceDate}` : ''}</div>
${glanceSummary.map(({ icon, label, value, alert }) => html`
<div class=${`insight-row${alert ? ' insight-row--alert' : ''}`} key=${label}>
<span class="insight-icon">${icon}</span>
<span class="insight-label">${label}</span>
<span class="insight-value">${value}</span>
</div>
`)}
${eventGlanceItems.map(({ icon, label, value, alert }) => html`
<div class=${`insight-row${alert ? ' insight-row--alert' : ''}`} key=${`ev-${label}`}>
<span class="insight-icon">${icon}</span>
<span class="insight-label">${label}</span>
<span class="insight-value">${value}</span>
</div>
`)}
${(() => {
const heatEvents = eventGlanceItems.filter(e => /heat spike|heat warning|extreme heat/i.test(e.label)).map(e => ({ ...e, alert: true }));
const otherEvents = eventGlanceItems.filter(e => !/heat spike|heat warning|extreme heat/i.test(e.label));
const renderRow = ({ icon, label, value, alert }, keyPrefix = '') => html`
<div class=${`insight-row${alert ? ' insight-row--alert' : ''}`} key=${`${keyPrefix}${label}`}>
<span class="insight-icon">${icon}</span>
<span class="insight-label">${label}</span>
<span class="insight-value">${value}</span>
</div>`;
return [
...glanceSummary.flatMap(item => [
renderRow(item),
...(item.label === 'Peak felt temp' ? heatEvents.map(e => renderRow(e, 'ev-')) : []),
]),
...otherEvents.map(e => renderRow(e, 'ev-')),
];
})()}
</div>`}
${visible.length > 0 && html`
<div class="export-panel">