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

Today's hourly cards: bigger icon/temp (~150%), rain%/wind on 2 lines with icons

Browse source 
Icon 26->39px, temp font-size scaled ~150%. Rain% and wind now render on
separate lines (was one line with a '·' separator) with a small Droplet/
Wind icon in front of each. large prop on PointMeta keeps the next-2-days
cards at their existing smaller size -- only today's hourly strip is meant
to read as the detailed/primary view.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-25 13:14:12 +00:00
parent e4f4f031ef
commit 1a5c37d011
2 changed files with 26 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/index.css
View file

@ -114,11 +114,14 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.wx-astro { display: flex; gap: clamp(10px, 1.2vw, 18px); color: var(--text-muted); font-size: clamp(0.7rem, 0.85vw, 0.9rem); }
.wx-astro-item { display: inline-flex; align-items: center; gap: 4px; }
/* Rain% + wind, one line, shown on hourly and 3-hourly point cards */
.wx-meta { display: flex; align-items: center; gap: 4px; font-size: clamp(0.6rem, 0.72vw, 0.72rem); white-space: nowrap; }
/* Rain% and wind, each their own line with a small leading icon — shown on hourly
and 3-hourly point cards. .wx-meta-lg (today's hourly cards) runs ~150% bigger
than the default (next-2-days cards), matching today's larger icon/temp. */
.wx-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: clamp(0.6rem, 0.72vw, 0.72rem); white-space: nowrap; }
.wx-meta-lg { font-size: clamp(0.9rem, 1.08vw, 1.08rem); gap: 3px; }
.wx-meta-line { display: inline-flex; align-items: center; gap: 3px; }
.wx-meta-precip { color: #7dd3fc; }
.wx-meta-wind { color: var(--text-muted); }
.wx-meta-sep { color: var(--text-muted); opacity: .5; }
/* 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. Fills its grid
@ -144,19 +147,19 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
min-height: 0;
}
.wx-hour-card {
flex: 1 0 clamp(52px, 5.2vw, 76px);
flex: 1 0 clamp(74px, 7.4vw, 106px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 4px;
gap: 5px;
padding: clamp(6px, 1vh, 10px) 4px;
border-radius: var(--radius);
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.68rem, 0.82vw, 0.88rem); color: var(--text-muted); }
.wx-hour-temp { font-size: clamp(0.85rem, 1vw, 1.1rem); font-weight: 600; }
.wx-hour-temp { font-size: clamp(1.28rem, 1.5vw, 1.65rem); font-weight: 600; }
/* "Coming up" — tomorrow/day-after (3-hourly) above, days 4-7 (daily) below,
sharing one grid row between them so the pair always fits. */

27
frontend/src/pages/Display.tsx
View file

@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react'
import { CloudOff, Sunrise, Sunset, Umbrella } from 'lucide-react'
import { CloudOff, Sunrise, Sunset, Umbrella, Droplet, Wind } from 'lucide-react'
import { fetchForecast, fetchDisplayConfig } from '../api'
import { WeatherIcon } from '../lib/icons'
import type { ForecastPayload, ForecastPoint, Astro } from '../types'
@ -51,16 +51,23 @@ function AstroRow({ astro }: { astro?: Astro }) {
)
}
// Rain% + wind on one line ("12% · SW 8mph") — was two separate lines, which was
// part of what pushed the hourly strip past a single viewport's worth of height.
function PointMeta({ point }: { point: ForecastPoint }) {
// Rain% and wind, each on their own line with a small leading icon. `large` bumps
// the text size for today's hourly cards; the next-2-days cards stay at the
// smaller default so today still reads as the primary/detailed view.
function PointMeta({ point, large }: { point: ForecastPoint; large?: boolean }) {
if (point.precip_prob == null && point.wind_speed_mph == null) return null
const iconSize = large ? 13 : 10
return (
<span className="wx-meta">
{point.precip_prob != null && <span className="wx-meta-precip">{Math.round(point.precip_prob)}%</span>}
{point.precip_prob != null && point.wind_speed_mph != null && <span className="wx-meta-sep">·</span>}
<span className={`wx-meta${large ? ' wx-meta-lg' : ''}`}>
{point.precip_prob != null && (
<span className="wx-meta-line wx-meta-precip">
<Droplet size={iconSize} strokeWidth={2} />
{Math.round(point.precip_prob)}%
</span>
)}
{point.wind_speed_mph != null && (
<span className="wx-meta-wind">
<span className="wx-meta-line wx-meta-wind">
<Wind size={iconSize} strokeWidth={2} />
{point.wind_dir_deg != null ? `${compassFromDeg(point.wind_dir_deg)} ` : ''}
{Math.round(point.wind_speed_mph)}mph
</span>
@ -242,9 +249,9 @@ function HourCard({ point, isNow }: { point: ForecastPoint; isNow: boolean }) {
return (
<div className={`wx-hour-card${isNow ? ' now' : ''}`}>
<span className="wx-hour-time">{isNow ? 'Now' : formatHour(point.ts)}</span>
<WeatherIcon icon={point.icon} size={26} />
<WeatherIcon icon={point.icon} size={39} />
<span className="wx-hour-temp">{roundTemp(point.temp_c)}</span>
<PointMeta point={point} />
<PointMeta point={point} large />
</div>
)
}