feat: remove cqmin system (#2407)
* feat: remove cqmin system * fix: improve weather widget --------- Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Manuel
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { Box, Group, HoverCard, Space, Stack, Text } from "@mantine/core";
|
||||
import { Box, Group, HoverCard, Stack, Text } from "@mantine/core";
|
||||
import { IconArrowDownRight, IconArrowUpRight, IconMapPin, IconWind } from "@tabler/icons-react";
|
||||
import combineClasses from "clsx";
|
||||
import dayjs from "dayjs";
|
||||
@@ -28,8 +28,8 @@ export default function WeatherWidget({ isEditMode, options }: WidgetComponentPr
|
||||
return (
|
||||
<Stack
|
||||
align="center"
|
||||
gap="sm"
|
||||
justify="center"
|
||||
gap="0"
|
||||
w="100%"
|
||||
h="100%"
|
||||
style={{ pointerEvents: isEditMode ? "none" : undefined }}
|
||||
@@ -49,20 +49,21 @@ interface WeatherProps extends Pick<WidgetComponentProps<"weather">, "options">
|
||||
|
||||
const DailyWeather = ({ options, weather }: WeatherProps) => {
|
||||
const t = useScopedI18n("widget.weather");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Group className="weather-day-group" gap="1cqmin">
|
||||
<Group className="weather-day-group" gap="sm">
|
||||
<HoverCard>
|
||||
<HoverCard.Target>
|
||||
<Box>
|
||||
<WeatherIcon size="20cqmin" code={weather.current.weathercode} />
|
||||
<WeatherIcon size={30} code={weather.current.weathercode} />
|
||||
</Box>
|
||||
</HoverCard.Target>
|
||||
<HoverCard.Dropdown>
|
||||
<WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
|
||||
</HoverCard.Dropdown>
|
||||
</HoverCard>
|
||||
<Text fz="17.5cqmin">
|
||||
<Text fz={30}>
|
||||
{getPreferredUnit(
|
||||
weather.current.temperature,
|
||||
options.isFormatFahrenheit,
|
||||
@@ -70,31 +71,41 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
|
||||
)}
|
||||
</Text>
|
||||
</Group>
|
||||
<Space h="1cqmin" />
|
||||
{options.showCurrentWindSpeed && (
|
||||
<Group className="weather-current-wind-speed-group" wrap="nowrap" gap="1cqmin">
|
||||
<IconWind size="12.5cqmin" />
|
||||
<Text fz="10cqmin">{t("currentWindSpeed", { currentWindSpeed: weather.current.windspeed })}</Text>
|
||||
<Stack gap="xs" align="center">
|
||||
{options.showCurrentWindSpeed && (
|
||||
<Group className="weather-current-wind-speed-group" wrap="nowrap" gap="xs">
|
||||
<IconWind size={16} />
|
||||
<Text fz={16}>{t("currentWindSpeed", { currentWindSpeed: weather.current.windspeed })}</Text>
|
||||
</Group>
|
||||
)}
|
||||
<Group className="weather-max-min-temp-group" wrap="nowrap" gap="sm">
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<IconArrowUpRight size={16} />
|
||||
<Text fz={16}>
|
||||
{getPreferredUnit(
|
||||
weather.daily[0]?.maxTemp,
|
||||
options.isFormatFahrenheit,
|
||||
options.disableTemperatureDecimals,
|
||||
)}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<IconArrowDownRight size={16} />
|
||||
<Text fz={16}>
|
||||
{getPreferredUnit(
|
||||
weather.daily[0]?.minTemp,
|
||||
options.isFormatFahrenheit,
|
||||
options.disableTemperatureDecimals,
|
||||
)}
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
)}
|
||||
<Space h="1cqmin" />
|
||||
<Group className="weather-max-min-temp-group" wrap="nowrap" gap="1cqmin">
|
||||
<IconArrowUpRight size="12.5cqmin" />
|
||||
<Text fz="10cqmin">
|
||||
{getPreferredUnit(weather.daily[0]?.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
|
||||
</Text>
|
||||
<Space w="2.5cqmin" />
|
||||
<IconArrowDownRight size="12.5cqmin" />
|
||||
<Text fz="10cqmin">
|
||||
{getPreferredUnit(weather.daily[0]?.minTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
{options.showCity && (
|
||||
<>
|
||||
<Space h="5cqmin" />
|
||||
<Group className="weather-city-group" wrap="nowrap" gap="1cqmin">
|
||||
<IconMapPin size="12.5cqmin" />
|
||||
<Text size="12.5cqmin" style={{ whiteSpace: "nowrap" }}>
|
||||
<Group className="weather-city-group" wrap="nowrap" gap="xs">
|
||||
<IconMapPin size={16} />
|
||||
<Text fz={16} style={{ whiteSpace: "nowrap" }}>
|
||||
{options.location.name}
|
||||
</Text>
|
||||
</Group>
|
||||
@@ -107,35 +118,35 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
|
||||
const WeeklyForecast = ({ options, weather }: WeatherProps) => {
|
||||
return (
|
||||
<>
|
||||
<Group className="weather-forecast-city-temp-group" wrap="nowrap" gap="5cqmin">
|
||||
<Group className="weather-forecast-city-temp-group" wrap="nowrap" gap="md">
|
||||
{options.showCity && (
|
||||
<>
|
||||
<IconMapPin size="20cqmin" />
|
||||
<Text size="15cqmin" style={{ whiteSpace: "nowrap" }}>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<IconMapPin size={16} />
|
||||
<Text fz={16} style={{ whiteSpace: "nowrap" }}>
|
||||
{options.location.name}
|
||||
</Text>
|
||||
<Space w="20cqmin" />
|
||||
</>
|
||||
</Group>
|
||||
)}
|
||||
<HoverCard>
|
||||
<HoverCard.Target>
|
||||
<Box>
|
||||
<WeatherIcon size="20cqmin" code={weather.current.weathercode} />
|
||||
</Box>
|
||||
</HoverCard.Target>
|
||||
<HoverCard.Dropdown>
|
||||
<WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
|
||||
</HoverCard.Dropdown>
|
||||
</HoverCard>
|
||||
<Text fz="20cqmin">
|
||||
{getPreferredUnit(
|
||||
weather.current.temperature,
|
||||
options.isFormatFahrenheit,
|
||||
options.disableTemperatureDecimals,
|
||||
)}
|
||||
</Text>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<HoverCard>
|
||||
<HoverCard.Target>
|
||||
<Box>
|
||||
<WeatherIcon size={16} code={weather.current.weathercode} />
|
||||
</Box>
|
||||
</HoverCard.Target>
|
||||
<HoverCard.Dropdown>
|
||||
<WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
|
||||
</HoverCard.Dropdown>
|
||||
</HoverCard>
|
||||
<Text fz={16}>
|
||||
{getPreferredUnit(
|
||||
weather.current.temperature,
|
||||
options.isFormatFahrenheit,
|
||||
options.disableTemperatureDecimals,
|
||||
)}
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Space h="2.5cqmin" />
|
||||
<Forecast weather={weather} options={options} />
|
||||
</>
|
||||
);
|
||||
@@ -144,7 +155,7 @@ const WeeklyForecast = ({ options, weather }: WeatherProps) => {
|
||||
function Forecast({ weather, options }: WeatherProps) {
|
||||
const dateFormat = options.dateFormat;
|
||||
return (
|
||||
<Group className="weather-forecast-days-group" w="100%" justify="space-evenly" wrap="nowrap" pb="2.5cqmin">
|
||||
<Group className="weather-forecast-days-group" w="100%" justify="space-evenly" wrap="nowrap" pb="sm">
|
||||
{weather.daily.slice(0, options.forecastDayCount).map((dayWeather, index) => (
|
||||
<HoverCard key={dayWeather.time} withArrow shadow="md">
|
||||
<HoverCard.Target>
|
||||
@@ -157,9 +168,9 @@ function Forecast({ weather, options }: WeatherProps) {
|
||||
gap="0"
|
||||
align="center"
|
||||
>
|
||||
<Text fz="10cqmin">{dayjs(dayWeather.time).format("dd")}</Text>
|
||||
<WeatherIcon size="15cqmin" code={dayWeather.weatherCode} />
|
||||
<Text fz="10cqmin">
|
||||
<Text fz="xl">{dayjs(dayWeather.time).format("dd")}</Text>
|
||||
<WeatherIcon size={16} code={dayWeather.weatherCode} />
|
||||
<Text fz={16}>
|
||||
{getPreferredUnit(dayWeather.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user