3.2.3.2
Fix banner clicks Make simple/table switch clearer
This commit is contained in:
+12
-4
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user