Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-01-30 11:19:12 +01:00
Code Issues 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(timezones);
export default function ClockWidget({ options }: WidgetComponentProps<"clock">) {
export default function ClockWidget({ options, width }: WidgetComponentProps<"clock">) {
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 customTimeFormat = options.customTimeFormat;
const customDateFormat = options.customDateFormat;
const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
const time = useCurrentTime(options);
const sizing = width < 128 ? "xs" : width < 196 ? "sm" : "md";
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 && (
<Text className="clock-customTitle-text" size="md" ta="center">
<Text className="clock-customTitle-text" size={sizing} ta="center">
{options.customTitle}
</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
? dayjs(time).tz(timezone).format(customTimeFormat)
: dayjs(time).tz(timezone).format(timeFormat)}
</Title>
{options.showDate && (
<Text className="clock-date-text" size="md" p="sm" lineClamp={1}>
<Text className="clock-date-text" size={sizing} lineClamp={1}>
{options.customDateFormat
? dayjs(time).tz(timezone).format(customDateFormat)
: dayjs(time).tz(timezone).format(dateFormat)}