gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3.2.3.2

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/table.css
+30 -1
View File
@@ -1338,6 +1338,17 @@
/* ── SIMPLE / TABLE VIEW TOGGLE ─────────────────────────────────────────── */
.forecast-view-toggle-label {
font-family: Manrope, sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #7a5c2a;
margin-right: 5px;
flex-shrink: 0;
}
.forecast-view-toggle {
display: inline-flex;
align-items: center;
@@ -1345,11 +1356,14 @@
margin-right: 8px;
}
.fvt-btn {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: Manrope, sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 1;
padding: 4px 10px;
padding: 6px 14px;
cursor: pointer;
border: 1.5px solid #c9b08a;
background: #f5edd6;
@@ -1374,6 +1388,12 @@
color: #fff;
}
.fvt-btn-icon {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
/* Interval buttons shown in the col-toggles bar in simple mode */
.fvt-interval {
display: none;
@@ -1385,6 +1405,15 @@
.table-main--simple .fvt-interval {
display: inline-flex;
}
.fvt-interval-label {
font-family: Manrope, sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #7a5c2a;
margin-right: 3px;
}
/* Hide table-mode column controls when in simple mode */
.table-main--simple .col-toggles-label,
assets/css/ui.css
+4 -3
View File
@@ -110,13 +110,14 @@
/* Slideshow dots */
.event-banner-dots {
display: flex;
gap: 5px;
gap: 10px;
margin-top: 7px;
align-items: center;
padding: 5px 0;
}
.event-banner-dot {
width: 6px;
height: 6px;
width: 10px;
height: 10px;
border-radius: 50%;
opacity: 0.35;
cursor: pointer;
assets/js/app.js
+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>
assets/js/events/weather-checks.js
+3 -3
View File
@@ -121,9 +121,9 @@ export function checkHeatSpike(rows) {
: undefined;
const msgs = {
notable: `Temperatures reaching ${maxTemp.toFixed(1)}°C — above seasonal norms. Stay hydrated and avoid prolonged sun exposure.`,
severe: `Heat warning: ${maxTemp.toFixed(1)}°C expected today. Risk of heat exhaustion for vulnerable people — keep cool and hydrated.`,
extreme: `Extreme heat alert: ${maxTemp.toFixed(1)}°C forecast. Risk of heat stroke — avoid outdoor activity during peak hours.`,
notable: `Air temperature reaching ${maxTemp.toFixed(1)}°C — above seasonal norms. Stay hydrated and avoid prolonged sun exposure.`,
severe: `Heat warning: Air temp ${maxTemp.toFixed(1)}°C expected today. Risk of heat exhaustion for vulnerable people — keep cool and hydrated.`,
extreme: `Extreme heat alert: Air temp ${maxTemp.toFixed(1)}°C forecast. Risk of heat stroke — avoid outdoor activity during peak hours.`,
};
return {
id: 'heat-spike',