zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep day forecast hourly cards readable

Browse Source
This commit is contained in:
zv
2026-06-11 18:18:20 +02:00
parent be0b600fdf
commit 68fd967f88
1 changed files with 15 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/forecast/day-forecast-modal.tsx
View File

@@ -9,13 +9,11 @@ import { ForecastIcon } from "@/components/forecast/forecast-icon";
import { ForecastSources } from "@/components/forecast/forecast-sources"; import { ForecastSources } from "@/components/forecast/forecast-sources";
import { Card } from "@/components/ui/card"; import { Card } from "@/components/ui/card";
import { useI18n } from "@/lib/i18n"; import { useI18n } from "@/lib/i18n";
import { cn } from "@/lib/utils";
import { import {
formatForecastRainfall, formatForecastRainfall,
formatForecastTemperature, formatForecastTemperature,
formatForecastWind, formatForecastWind,
getForecastCondition, getForecastCondition,
isForecastHourPast,
} from "@/lib/forecast-utils"; } from "@/lib/forecast-utils";
import type { DailyForecast, ForecastSource, HourlyForecast } from "@/types/forecast"; import type { DailyForecast, ForecastSource, HourlyForecast } from "@/types/forecast";
@@ -148,27 +146,21 @@ export function DayForecastModal({
<h3 className="text-sm font-semibold">{t("forecast.hourlyForDay")}</h3> <h3 className="text-sm font-semibold">{t("forecast.hourlyForDay")}</h3>
<div className="weather-scrollbar -mx-4 mt-4 overflow-x-auto px-4 pb-2 sm:-mx-5 sm:px-5"> <div className="weather-scrollbar -mx-4 mt-4 overflow-x-auto px-4 pb-2 sm:-mx-5 sm:px-5">
<ul className="flex min-w-max gap-2"> <ul className="flex min-w-max gap-2">
{hours.map((hour) => { {hours.map((hour) => (
const isPast = isForecastHourPast(hour.time); <li
return ( key={hour.time}
<li className="w-[5.2rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center"
key={hour.time} title={getForecastCondition(hour.weatherCode, language)}
className={cn( >
"w-[5.2rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center", <p className="text-xs font-medium text-muted">{formatHour(hour.time)}</p>
isPast && "opacity-45", <ForecastIcon code={hour.weatherCode} className="mx-auto my-3 size-6 text-accent" />
)} <p className="text-lg font-semibold tracking-tight">{formatForecastTemperature(hour.temperature, language)}</p>
title={isPast ? t("forecast.pastHour") : getForecastCondition(hour.weatherCode, language)} <p className="mt-2 flex items-center justify-center gap-1 text-[0.66rem] text-accent">
> <Droplets className="size-3" />
<p className="text-xs font-medium text-muted">{formatHour(hour.time)}</p> {hour.precipitationProbability === null ? "—" : `${hour.precipitationProbability}%`}
<ForecastIcon code={hour.weatherCode} className="mx-auto my-3 size-6 text-accent" /> </p>
<p className="text-lg font-semibold tracking-tight">{formatForecastTemperature(hour.temperature, language)}</p> </li>
<p className="mt-2 flex items-center justify-center gap-1 text-[0.66rem] text-accent"> ))}
<Droplets className="size-3" />
{hour.precipitationProbability === null ? "—" : `${hour.precipitationProbability}%`}
</p>
</li>
);
})}
</ul> </ul>
</div> </div>
</Card> </Card>