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

Display: wind dir/speed + rain%, sunrise/sunset, wrap today, merge Coming up

Browse source 
- Today's hourly cards and the next-2-days 3-hourly cards now always show
  rain chance% and wind (compass direction + mph), not just rain% above a
  20% threshold. New wind_dir_deg column on forecast_points (Met Office
  windDirectionFrom10m / Open-Meteo winddirection_10m).
- New forecast_astro table: sunrise/sunset for today + next 2 days, shown
  next to each day's section label. No extra API calls needed — both
  providers' daily responses already carry sunrise/sunset for those dates,
  just weren't being extracted before.
- Today's hourly strip now sits in its own bordered block (wx-today-block)
  so it reads as a distinct group instead of blending into the cards below.
- "Next 2 days" no longer has its own separate heading — tomorrow and the
  day after now sit under the single "Coming up" label, same as days 4-7.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-25 12:48:11 +00:00
parent f977a5778f
commit 0a6eec65e7
6 changed files with 194 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

46
frontend/src/index.css
View file

@ -76,8 +76,33 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
color: var(--text-muted);
margin-bottom: clamp(8px, 1.2vh, 14px);
}
.wx-section-label-row {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: clamp(8px, 1.2vh, 14px);
}
.wx-section-label-row .wx-section-label { margin-bottom: 0; }
/* Today's hourly course */
/* Sunrise/sunset, shown next to a day's label */
.wx-astro { display: flex; gap: clamp(10px, 1.2vw, 18px); color: var(--text-muted); font-size: clamp(0.75rem, 0.9vw, 0.95rem); }
.wx-astro-item { display: inline-flex; align-items: center; gap: 4px; }
/* Rain%/wind, shown on hourly and 3-hourly point cards */
.wx-meta-precip { font-size: clamp(0.62rem, 0.75vw, 0.75rem); color: #7dd3fc; }
.wx-meta-wind { font-size: clamp(0.62rem, 0.75vw, 0.75rem); color: var(--text-muted); white-space: nowrap; }
/* Today — wrapped in its own block so its hourly cards read as one distinct
group, not a continuation of the "Coming up" cards below it. */
.wx-today-block {
background: var(--surface);
border: 1px solid var(--surface-2);
border-radius: var(--radius);
padding: clamp(10px, 1.6vh, 18px);
margin-bottom: clamp(16px, 2.5vh, 28px);
}
.wx-hourly-row {
display: flex;
gap: clamp(6px, 1vw, 14px);
@ -86,45 +111,46 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
flex: 0 0 auto;
}
.wx-hour-card {
flex: 1 0 64px;
flex: 1 0 68px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
gap: 5px;
padding: clamp(8px, 1vh, 14px) 4px;
border-radius: var(--radius);
background: var(--surface);
background: var(--surface-2);
}
.wx-hour-card.now { background: rgba(201,168,76,0.16); border: 1px solid rgba(201,168,76,0.4); }
.wx-hour-time { font-size: clamp(0.75rem, 0.9vw, 0.95rem); color: var(--text-muted); }
.wx-hour-temp { font-size: clamp(0.95rem, 1.1vw, 1.2rem); font-weight: 600; }
.wx-hour-precip { font-size: clamp(0.65rem, 0.8vw, 0.8rem); color: #7dd3fc; }
/* Next 2 days — 3-hourly */
/* Next 2 days — 3-hourly, both under the "Coming up" label */
.wx-next-days {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(12px, 1.6vw, 24px);
margin: clamp(16px, 2.5vh, 28px) 0;
margin-bottom: clamp(16px, 2.5vh, 28px);
}
.wx-next-day-card {
background: var(--surface);
border-radius: var(--radius);
padding: clamp(10px, 1.4vh, 18px);
}
.wx-next-day-title { font-weight: 700; font-size: clamp(0.95rem, 1.2vw, 1.2rem); margin-bottom: 8px; }
.wx-next-day-title-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wx-next-day-title { font-weight: 700; font-size: clamp(0.95rem, 1.2vw, 1.2rem); }
.wx-next-day-points { display: flex; gap: clamp(4px, 0.8vw, 10px); overflow-x: auto; }
.wx-point { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 0 52px; }
.wx-point { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 0 56px; }
.wx-point-time { font-size: clamp(0.65rem, 0.8vw, 0.8rem); color: var(--text-muted); }
.wx-point-temp { font-size: clamp(0.85rem, 1vw, 1.05rem); font-weight: 600; }
/* Days 4-7 — plain daily row */
/* Days 4-7 — plain daily row, still under the "Coming up" label above */
.wx-daily-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(10px, 1.4vw, 20px);
margin-top: auto;
}
.wx-day-card {
display: flex;
flex-direction: column;