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

Calendar widget styling

Browse Source
This commit is contained in:
ajnart
2023-01-03 22:30:52 +09:00
parent 780b4d5f81
commit c1d3bebfb3
1 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/widgets/calendar/CalendarTile.tsx
View File

@@ -1,4 +1,4 @@
import { Center, createStyles, MantineThemeColors, useMantineTheme } from '@mantine/core'; import { createStyles, Group, MantineThemeColors, useMantineTheme } from '@mantine/core';
import { Calendar } from '@mantine/dates'; import { Calendar } from '@mantine/dates';
import { IconCalendarTime } from '@tabler/icons'; import { IconCalendarTime } from '@tabler/icons';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
@@ -21,7 +21,7 @@ const definition = defineWidget({
}, },
}, },
gridstack: { gridstack: {
minWidth: 4, minWidth: 3,
minHeight: 5, minHeight: 5,
maxWidth: 12, maxWidth: 12,
maxHeight: 12, maxHeight: 12,
@@ -55,10 +55,11 @@ function CalendarTile({ widget }: CalendarTileProps) {
}); });
return ( return (
<Group grow style={{ height: '100%' }}>
<Calendar <Calendar
month={month} month={month}
// Should be offset 5px to the left // Should be offset 5px to the left
style={{ position: 'relative', left: -10, top: -10 }} style={{ position: 'relative', top: -10 }}
onMonthChange={setMonth} onMonthChange={setMonth}
size="xs" size="xs"
fullWidth fullWidth
@@ -84,6 +85,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
<CalendarDay date={date} medias={getReleasedMediasForDate(medias, date)} /> <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date)} />
)} )}
/> />
</Group>
); );
} }