diff --git a/assets/css/ui.css b/assets/css/ui.css index ff3902e..1501fee 100644 --- a/assets/css/ui.css +++ b/assets/css/ui.css @@ -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; diff --git a/assets/js/app.js b/assets/js/app.js index e6a42e4..2b8e6e3 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -587,25 +587,35 @@ export function UTCIForecast() { Why It Feels ${currentCat && html`${currentCat.label}`} - ${[ - { 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` -