Fix banner clicks
Make simple/table switch clearer
This commit is contained in:
Fraxle
2026-07-09 10:42:55 +01:00
parent 6eb1b277d5
commit e2f8f8cc53
4 changed files with 49 additions and 11 deletions
+12 -4
View File
@@ -616,7 +616,7 @@ export function UTCIForecast() {
</div>
`}
${activeEvents.length > 1 && html`
<div class="event-banner-dots">
<div class="event-banner-dots" onClick=${(e) => e.stopPropagation()}>
${activeEvents.map((_, i) => html`
<span
key=${i}
@@ -905,11 +905,19 @@ export function UTCIForecast() {
<div class="table-with-rail">
<div class=${'table-main' + (forecastView === 'simple' ? ' table-main--simple' : '')}>
<div class="col-toggles">
<span class="forecast-view-toggle-label">View:</span>
<span class="forecast-view-toggle">
<button type="button" class=${'fvt-btn' + (forecastView === 'simple' ? ' on' : '')} onClick=${() => setForecastView('simple')}>Simple</button>
<button type="button" class=${'fvt-btn' + (forecastView === 'table' ? ' on' : '')} onClick=${() => setForecastView('table')}>Table</button>
<button type="button" title="Quick view visual card layout" class=${'fvt-btn' + (forecastView === 'simple' ? ' on' : '')} onClick=${() => setForecastView('simple')}>
<svg class="fvt-btn-icon" viewBox="0 0 12 12" width="12" height="12"><rect x=".5" y=".5" width="4.5" height="4.5" rx=".8" fill="currentColor"/><rect x="7" y=".5" width="4.5" height="4.5" rx=".8" fill="currentColor"/><rect x=".5" y="7" width="4.5" height="4.5" rx=".8" fill="currentColor"/><rect x="7" y="7" width="4.5" height="4.5" rx=".8" fill="currentColor"/></svg>
Quick
</button>
<button type="button" title="Detailed view full hourly table" class=${'fvt-btn' + (forecastView === 'table' ? ' on' : '')} onClick=${() => setForecastView('table')}>
<svg class="fvt-btn-icon" viewBox="0 0 12 12" width="12" height="12"><rect x=".5" y="1.5" width="11" height="3" rx=".6" fill="currentColor"/><rect x=".5" y="5.5" width="11" height="2.5" rx=".5" fill="currentColor" opacity=".35"/><rect x=".5" y="8.8" width="11" height="2.5" rx=".5" fill="currentColor" opacity=".25"/></svg>
Detailed
</button>
</span>
<span class="fvt-interval">
<span class="fvt-interval-label">Hours:</span>
${[1, 2, 3, 4].map(n => html`<button key=${n} type="button" class=${'hour-interval-btn' + (tableInterval === n ? ' on' : '')} title=${n === 1 ? 'Every hour' : `Every ${n} hours`} onClick=${() => setTableInterval(n)}>${n}h</button>`)}
</span>
${forecastView === 'simple' && (() => {
@@ -1288,7 +1296,7 @@ export function UTCIForecast() {
</div>
<div class="fsc-table-btn-wrap">
<button type="button" class="fsc-table-btn" onClick=${() => setForecastView('table')}>
View Detailed Hourly Forecast
Detailed Hourly Forecast
</button>
</div>
</div>