jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(date-time): improve responsive styles (#2539)

Browse Source
This commit is contained in:
Meier Lukas
2025-03-08 20:55:15 +01:00
committed by GitHub
parent 1db9c3c692
commit fd5b1b0c08
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/widgets/src/clock/component.tsx
View File

@@ -13,28 +13,31 @@ dayjs.extend(advancedFormat);
dayjs.extend(utc); dayjs.extend(utc);
dayjs.extend(timezones); dayjs.extend(timezones);
export default function ClockWidget({ options }: WidgetComponentProps<"clock">) { export default function ClockWidget({ options, width }: WidgetComponentProps<"clock">) {
const secondsFormat = options.showSeconds ? ":ss" : ""; const secondsFormat = options.showSeconds ? ":ss" : "";
const timeFormat = options.is24HourFormat ? `HH:mm${secondsFormat}` : `h:mm${secondsFormat} A`; const timeFormat = options.is24HourFormat ? `HH:mm${secondsFormat}` : `hh:mm${secondsFormat} A`;
const dateFormat = options.dateFormat; const dateFormat = options.dateFormat;
const customTimeFormat = options.customTimeFormat; const customTimeFormat = options.customTimeFormat;
const customDateFormat = options.customDateFormat; const customDateFormat = options.customDateFormat;
const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone; const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
const time = useCurrentTime(options); const time = useCurrentTime(options);
const sizing = width < 128 ? "xs" : width < 196 ? "sm" : "md";
return ( return (
<Stack className="clock-text-stack" h="100%" align="center" justify="center" gap="sm"> <Stack className="clock-text-stack" h="100%" align="center" justify="center" gap={sizing}>
{options.customTitleToggle && ( {options.customTitleToggle && (
<Text className="clock-customTitle-text" size="md" ta="center"> <Text className="clock-customTitle-text" size={sizing} ta="center">
{options.customTitle} {options.customTitle}
</Text> </Text>
)} )}
<Title className="clock-time-text" fw={700} order={1} lh="1"> <Title className="clock-time-text" fw={700} order={sizing === "md" ? 2 : sizing === "sm" ? 4 : 6} lh="1">
{options.customTimeFormat {options.customTimeFormat
? dayjs(time).tz(timezone).format(customTimeFormat) ? dayjs(time).tz(timezone).format(customTimeFormat)
: dayjs(time).tz(timezone).format(timeFormat)} : dayjs(time).tz(timezone).format(timeFormat)}
</Title> </Title>
{options.showDate && ( {options.showDate && (
<Text className="clock-date-text" size="md" p="sm" lineClamp={1}> <Text className="clock-date-text" size={sizing} lineClamp={1}>
{options.customDateFormat {options.customDateFormat
? dayjs(time).tz(timezone).format(customDateFormat) ? dayjs(time).tz(timezone).format(customDateFormat)
: dayjs(time).tz(timezone).format(dateFormat)} : dayjs(time).tz(timezone).format(dateFormat)}