Keep day forecast modal scrollbar inside panel
This commit is contained in:
@@ -96,85 +96,87 @@ export function DayForecastModal({
|
|||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="day-forecast-title"
|
aria-labelledby="day-forecast-title"
|
||||||
className="weather-scrollbar h-full w-full overflow-y-auto bg-background shadow-card sm:max-w-6xl sm:rounded-panel sm:border sm:border-border/70"
|
className="h-full w-full overflow-hidden bg-background shadow-card sm:max-w-6xl sm:rounded-panel sm:border sm:border-border/70"
|
||||||
initial={{ opacity: 0, y: 28, scale: 0.985 }}
|
initial={{ opacity: 0, y: 28, scale: 0.985 }}
|
||||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||||
exit={{ opacity: 0, y: 20, scale: 0.99 }}
|
exit={{ opacity: 0, y: 20, scale: 0.99 }}
|
||||||
transition={{ type: "spring", stiffness: 260, damping: 28 }}
|
transition={{ type: "spring", stiffness: 260, damping: 28 }}
|
||||||
onPointerDown={(event) => event.stopPropagation()}
|
onPointerDown={(event) => event.stopPropagation()}
|
||||||
>
|
>
|
||||||
<div className="mx-auto max-w-6xl space-y-5 p-4 pb-8 sm:p-6 lg:p-8">
|
<div className="weather-scrollbar h-full overflow-y-auto">
|
||||||
<div className="flex items-start justify-between gap-4">
|
<div className="mx-auto max-w-6xl space-y-5 p-4 pb-8 sm:p-6 lg:p-8">
|
||||||
<div>
|
<div className="flex items-start justify-between gap-4">
|
||||||
<p className="section-kicker flex items-center gap-2">
|
|
||||||
<CloudSun className="size-4" />
|
|
||||||
{t("forecast.dayDetails")}
|
|
||||||
</p>
|
|
||||||
<h2 id="day-forecast-title" className="mt-2 text-2xl font-semibold tracking-tight sm:text-3xl">{locationName}</h2>
|
|
||||||
<p className="mt-1 capitalize text-muted">{formattedDate}</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
ref={closeButtonRef}
|
|
||||||
type="button"
|
|
||||||
aria-label={t("forecast.closeDetails")}
|
|
||||||
className="surface-control rounded-control p-3 text-foreground transition hover:bg-surface-raised/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
<X className="size-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card className="overflow-hidden bg-surface-raised/70 p-5 sm:p-6">
|
|
||||||
<div className="flex flex-col justify-between gap-5 sm:flex-row sm:items-center">
|
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-muted">{getForecastCondition(day.weatherCode, language)}</p>
|
<p className="section-kicker flex items-center gap-2">
|
||||||
<div className="mt-2 flex items-end gap-4">
|
<CloudSun className="size-4" />
|
||||||
<ForecastIcon code={day.weatherCode} className="mb-2 size-14 text-accent" />
|
{t("forecast.dayDetails")}
|
||||||
<p className="text-6xl font-semibold tracking-[-0.08em] sm:text-7xl">{formatForecastTemperature(day.temperatureMax, language)}</p>
|
</p>
|
||||||
<p className="mb-2 text-2xl text-muted">{formatForecastTemperature(day.temperatureMin, language)}</p>
|
<h2 id="day-forecast-title" className="mt-2 text-2xl font-semibold tracking-tight sm:text-3xl">{locationName}</h2>
|
||||||
|
<p className="mt-1 capitalize text-muted">{formattedDate}</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
ref={closeButtonRef}
|
||||||
|
type="button"
|
||||||
|
aria-label={t("forecast.closeDetails")}
|
||||||
|
className="surface-control rounded-control p-3 text-foreground transition hover:bg-surface-raised/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
<X className="size-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card className="overflow-hidden bg-surface-raised/70 p-5 sm:p-6">
|
||||||
|
<div className="flex flex-col justify-between gap-5 sm:flex-row sm:items-center">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted">{getForecastCondition(day.weatherCode, language)}</p>
|
||||||
|
<div className="mt-2 flex items-end gap-4">
|
||||||
|
<ForecastIcon code={day.weatherCode} className="mb-2 size-14 text-accent" />
|
||||||
|
<p className="text-6xl font-semibold tracking-[-0.08em] sm:text-7xl">{formatForecastTemperature(day.temperatureMax, language)}</p>
|
||||||
|
<p className="mb-2 text-2xl text-muted">{formatForecastTemperature(day.temperatureMin, language)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-2 sm:min-w-[22rem]">
|
||||||
|
<DayMetric icon={Droplets} label={t("forecast.precipitation")} value={formatForecastRainfall(day.precipitation, language)} />
|
||||||
|
<DayMetric icon={Wind} label={t("forecast.maxWind")} value={formatForecastWind(maximumWind, language)} />
|
||||||
|
<DayMetric icon={Sunrise} label={t("forecast.sunrise")} value={formatHour(day.sunrise)} />
|
||||||
|
<DayMetric icon={Sunset} label={t("forecast.sunset")} value={formatHour(day.sunset)} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-2 sm:min-w-[22rem]">
|
</Card>
|
||||||
<DayMetric icon={Droplets} label={t("forecast.precipitation")} value={formatForecastRainfall(day.precipitation, language)} />
|
|
||||||
<DayMetric icon={Wind} label={t("forecast.maxWind")} value={formatForecastWind(maximumWind, language)} />
|
<Card className="overflow-hidden p-4 sm:p-5">
|
||||||
<DayMetric icon={Sunrise} label={t("forecast.sunrise")} value={formatHour(day.sunrise)} />
|
<h3 className="text-sm font-semibold">{t("forecast.hourlyForDay")}</h3>
|
||||||
<DayMetric icon={Sunset} label={t("forecast.sunset")} value={formatHour(day.sunset)} />
|
<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">
|
||||||
|
{hours.map((hour) => {
|
||||||
|
const isPast = isForecastHourPast(hour.time);
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={hour.time}
|
||||||
|
className={cn(
|
||||||
|
"w-[5.2rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center",
|
||||||
|
isPast && "opacity-45",
|
||||||
|
)}
|
||||||
|
title={isPast ? t("forecast.pastHour") : getForecastCondition(hour.weatherCode, language)}
|
||||||
|
>
|
||||||
|
<p className="text-xs font-medium text-muted">{formatHour(hour.time)}</p>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="overflow-hidden p-4 sm:p-5">
|
<DayForecastCharts hours={hours} />
|
||||||
<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">
|
|
||||||
<ul className="flex min-w-max gap-2">
|
|
||||||
{hours.map((hour) => {
|
|
||||||
const isPast = isForecastHourPast(hour.time);
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
key={hour.time}
|
|
||||||
className={cn(
|
|
||||||
"w-[5.2rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center",
|
|
||||||
isPast && "opacity-45",
|
|
||||||
)}
|
|
||||||
title={isPast ? t("forecast.pastHour") : getForecastCondition(hour.weatherCode, language)}
|
|
||||||
>
|
|
||||||
<p className="text-xs font-medium text-muted">{formatHour(hour.time)}</p>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<DayForecastCharts hours={hours} />
|
<ForecastSources sources={sources} />
|
||||||
|
</div>
|
||||||
<ForecastSources sources={sources} />
|
|
||||||
</div>
|
</div>
|
||||||
</motion.section>
|
</motion.section>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
Reference in New Issue
Block a user