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

2.9.9.1

Browse Source 
Percentage bars on panel
This commit is contained in:
fraxle
2026-06-12 18:06:20 +01:00
parent 6556f26b90
commit f6e6efe747
3 changed files with 48 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/ui.css
+18
View File
@@ -1569,8 +1569,26 @@
flex: 1;
color: #4a3420;
font-size: 15px;
display: flex;
flex-direction: column;
gap: 3px;
}
.insight-bar-track {
height: 4px;
background: rgba(0, 0, 0, 0.08);
border-radius: 2px;
overflow: hidden;
}
.insight-bar {
display: block;
height: 100%;
border-radius: 2px;
transition: width 0.35s ease;
}
.bar-pos { background: #c8522a; }
.bar-neg { background: #3a78a8; }
/* Delta values for "Why it feels like this" */
.insight-delta {
font-family: JetBrains Mono, monospace;
assets/js/app.js
+29 -19
View File
@@ -587,25 +587,35 @@ export function UTCIForecast() {
Why It Feels
${currentCat && html`<span class="insight-thermal-cat" style=${{ background: currentCat.bg, color: currentCat.fg }}>${currentCat.label}</span>`}
</div>
${[
{ label: 'Sun and sky', icon: '☀', value: whyFeelsLike.sunAndSky },
{ label: 'Wind', icon: '🌬', value: whyFeelsLike.wind },
{ label: 'Humidity', icon: '💧', value: whyFeelsLike.humidity },
...(whyFeelsLike.environment !== 0 ? [
{ label: UTCI_ENVIRONMENTS[utciEnv]?.label ?? 'Environment', icon: '🌍', value: whyFeelsLike.environment }
] : []),
...(whyFeelsLike.precipitation !== 0 ? [
{ label: 'Precipitation', icon: '🌧', value: whyFeelsLike.precipitation }
] : []),
].map(({ label, icon, value }) => html`
<div class="insight-row" key=${label}>
<span class="insight-icon">${icon}</span>
<span class="insight-label">${label}</span>
<span class=${`insight-delta ${value >= 0 ? 'delta-pos' : 'delta-neg'}`}>
${value >= 0 ? '+' : ''}${value.toFixed(1)}°
</span>
</div>
`)}
${(() => {
const _wflItems = [
{ label: 'Sun and sky', icon: '☀', value: whyFeelsLike.sunAndSky },
{ label: 'Wind', icon: '🌬', value: whyFeelsLike.wind },
{ label: 'Humidity', icon: '💧', value: whyFeelsLike.humidity },
...(whyFeelsLike.environment !== 0 ? [
{ label: UTCI_ENVIRONMENTS[utciEnv]?.label ?? 'Environment', icon: '🌍', value: whyFeelsLike.environment }
] : []),
...(whyFeelsLike.precipitation !== 0 ? [
{ label: 'Precipitation', icon: '🌧', value: whyFeelsLike.precipitation }
] : []),
];
const _wflMax = Math.max(..._wflItems.map(i => Math.abs(i.value)), 0.1);
return _wflItems.map(({ label, icon, value }) => html`
<div class="insight-row" key=${label}>
<span class="insight-icon">${icon}</span>
<span class="insight-label">
${label}
<span class="insight-bar-track">
<span class=${'insight-bar ' + (value >= 0 ? 'bar-pos' : 'bar-neg')}
style=${{ width: `${Math.round(Math.abs(value) / _wflMax * 100)}%` }}></span>
</span>
</span>
<span class=${`insight-delta ${value >= 0 ? 'delta-pos' : 'delta-neg'}`}>
${value >= 0 ? '+' : ''}${value.toFixed(1)}°
</span>
</div>
`);
})()}
</div>`}
</div>
</div>