Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-02-27 00:40:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(calendar): improve responsive styles (#2538)

Browse Source 
* fix(calendar): improve responsive styles

* fix: remove temporary events

* fix: deepsource issue
This commit is contained in:
Meier Lukas
2025-03-08 20:55:03 +01:00
committed by GitHub
parent fb800a0008
commit 1db9c3c692
3 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/widgets/src/calendar/calendar-event-list.tsx
View File

@@ -30,7 +30,7 @@ export const CalendarEventList = ({ events }: CalendarEventListProps) => {
<ScrollArea
offsetScrollbars
pt={5}
w={400}
w="100%"
styles={{
viewport: {
maxHeight: 450,

16
packages/widgets/src/calendar/calender-day.tsx
View File

@@ -44,7 +44,7 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
w="100%"
p={0}
m={0}
bd={`3px solid ${opened && !disabled ? primaryColor : "transparent"}`}
bd={`2px solid ${opened && !disabled ? primaryColor : "transparent"}`}
pos={"relative"}
style={{
alignContent: "center",
@@ -60,10 +60,11 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
<Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
{date.getDate()}
</Text>
{rootHeight >= 350 && <NotificationIndicator events={events} />}
<NotificationIndicator events={events} rootHeight={rootHeight} />
</Container>
</Popover.Target>
<Popover.Dropdown>
{/* Popover has some offset on the left side, padding is removed because of scrollarea paddings */}
<Popover.Dropdown maw="calc(100vw - 10px)" pe={4} pb={0} style={{ overflow: "hidden" }}>
<CalendarEventList events={events} />
</Popover.Dropdown>
</Popover>
@@ -72,14 +73,17 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
interface NotificationIndicatorProps {
events: CalendarEvent[];
rootHeight: number;
}
const NotificationIndicator = ({ events }: NotificationIndicatorProps) => {
const NotificationIndicator = ({ events, rootHeight }: NotificationIndicatorProps) => {
const isSmall = rootHeight < 256;
const notificationEvents = [...new Set(events.map((event) => event.links[0]?.notificationColor))].filter(String);
/* position bottom is lower when small to not be on top of number*/
return (
<Flex h="xs" w="75%" pos={"absolute"} bottom={0} left={"12.5%"} p={0} direction={"row"} justify={"center"}>
<Flex w="75%" pos={"absolute"} bottom={isSmall ? -2 : 4} left={"12.5%"} p={0} direction={"row"} justify={"center"}>
{notificationEvents.map((notificationEvent) => {
return <Box key={notificationEvent} bg={notificationEvent} h={4} p={0} style={{ flex: 1, borderRadius: 5 }} />;
return <Box key={notificationEvent} bg={notificationEvent} h={2} p={0} style={{ flex: 1, borderRadius: 5 }} />;
})}
</Flex>
);

4
packages/widgets/src/calendar/component.tsx
View File

@@ -105,8 +105,8 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
},
day: {
borderRadius: actualItemRadius,
width: width < 350 ? 20 : 50,
height: height < 350 ? 20 : 50,
width: "100%",
height: "100%",
},
month: {
height: "100%",