hotel-manage-stack/weather
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bigger tip chip(s), soft umbrella tier, and a jacket tip

Browse source 
- Umbrella tip now bigger (larger padding/font/icon) and there can be
  more than one chip shown at once (e.g. cold + rainy).
- Added a softer 'You might want an umbrella' tier: shown when the
  existing strong threshold isn't met but any remaining hour today
  still has a real (>10%) rain chance -- previously that case showed
  nothing at all.
- Added a jacket tip: shown when today's forecast high is below 12°C.
  Both new thresholds are named constants at the top of summary.js,
  easy to retune without touching the logic.

summary.js's umbrella boolean is replaced by a tips[] array so future
nudges (e.g. a UV/sun-cream tip, if we add UV index data) slot in the
same way without another one-off boolean + span.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-31 12:05:11 +00:00
parent 335e6e31a8
commit b4f1e81eed
4 changed files with 69 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/index.css
View file

@ -94,18 +94,28 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.wx-now-meta { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: clamp(0.8rem, 1.05vw, 1.05rem); }
.wx-summary-headline { color: var(--text); font-weight: 600; font-size: clamp(0.95rem, 1.3vw, 1.3rem); }
.wx-summary-note { color: #fbbf24; }
.wx-umbrella-tip {
/* Tip chips (umbrella/jacket/...) -- can be more than one at once (e.g. a cold
rainy day), so this wraps multiple .wx-tip pills rather than a single fixed
span. Sized up from the old single-tip version to read clearly at a glance
on the kiosk tablet. */
.wx-tips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(8px, 1vw, 12px);
margin-left: auto;
}
.wx-tip {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
padding: clamp(6px, 0.9vh, 10px) clamp(12px, 1.4vw, 18px);
gap: 10px;
padding: clamp(8px, 1.2vh, 13px) clamp(14px, 1.7vw, 22px);
border-radius: 999px;
background: rgba(125, 211, 252, 0.14);
border: 1px solid rgba(125, 211, 252, 0.35);
color: #7dd3fc;
font-weight: 600;
font-size: clamp(0.75rem, 0.95vw, 0.95rem);
font-size: clamp(0.9rem, 1.15vw, 1.15rem);
white-space: nowrap;
}