mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-11 07:55:52 +01:00
🧑💻 Address PR comments
This commit is contained in:
@@ -20,7 +20,6 @@ export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | nul
|
|||||||
const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
|
const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
|
||||||
if (!mainAreaWidth) return null;
|
if (!mainAreaWidth) return null;
|
||||||
|
|
||||||
// TODO: Calculate rem to pixels using Calc function
|
|
||||||
if (mainAreaWidth >= 1400) return 'large';
|
if (mainAreaWidth >= 1400) return 'large';
|
||||||
|
|
||||||
if (mainAreaWidth >= 800) return 'medium';
|
if (mainAreaWidth >= 800) return 'medium';
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
import { MantineSize, useMantineTheme } from '@mantine/core';
|
import { MantineSize, useMantineTheme } from '@mantine/core';
|
||||||
import { useMediaQuery } from '@mantine/hooks';
|
import { useMediaQuery } from '@mantine/hooks';
|
||||||
|
import { MIN_WIDTH_MOBILE } from '../constants/constants';
|
||||||
|
|
||||||
export const useScreenLargerThan = (size: MantineSize | number) => {
|
export const useScreenLargerThan = (size: MantineSize | number) => {
|
||||||
const { breakpoints } = useMantineTheme();
|
const { breakpoints } = useMantineTheme();
|
||||||
const pixelCount = typeof size === 'string' ? breakpoints[size] : size;
|
const pixelCount = typeof size === 'string' ? breakpoints[size] : size;
|
||||||
return useMediaQuery('(min-width: 500px)');
|
return useMediaQuery(`(min-width: ${MIN_WIDTH_MOBILE})`);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ interface CalendarDayProps {
|
|||||||
|
|
||||||
export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
|
export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
|
||||||
const [opened, { close, open }] = useDisclosure(false);
|
const [opened, { close, open }] = useDisclosure(false);
|
||||||
const { colorScheme, colors } = useMantineTheme();
|
|
||||||
|
|
||||||
if (medias.totalCount === 0) {
|
if (medias.totalCount === 0) {
|
||||||
return <div>{date.getDate()}</div>;
|
return <div>{date.getDate()}</div>;
|
||||||
@@ -33,14 +32,14 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
|
|||||||
<Popover.Target>
|
<Popover.Target>
|
||||||
<Box
|
<Box
|
||||||
onClick={open}
|
onClick={open}
|
||||||
style={{
|
sx={(theme) => ({
|
||||||
margin: 5,
|
margin: 5,
|
||||||
backgroundColor: isToday(date)
|
backgroundColor: isToday(date)
|
||||||
? colorScheme === 'dark'
|
? theme.colorScheme === 'dark'
|
||||||
? colors.dark[5]
|
? theme.colors.dark[5]
|
||||||
: colors.gray[0]
|
: theme.colors.gray[0]
|
||||||
: undefined,
|
: undefined,
|
||||||
}}
|
})}
|
||||||
>
|
>
|
||||||
<DayIndicator color="red" position="bottom-start" medias={medias.books}>
|
<DayIndicator color="red" position="bottom-start" medias={medias.books}>
|
||||||
<DayIndicator color="yellow" position="top-start" medias={medias.movies}>
|
<DayIndicator color="yellow" position="top-start" medias={medias.movies}>
|
||||||
|
|||||||
Reference in New Issue
Block a user