diff --git a/apps/playnite-web/src/components/GameFigure.tsx b/apps/playnite-web/src/components/GameFigure.tsx index ead183cb4..f787794d1 100644 --- a/apps/playnite-web/src/components/GameFigure.tsx +++ b/apps/playnite-web/src/components/GameFigure.tsx @@ -3,7 +3,10 @@ import { FC, PropsWithChildren, useCallback, useState } from 'react' import { useInView } from 'react-intersection-observer' import type { IGame } from '../domain/types' -const Figure = styled('figure')(({ theme }) => ({ +const Figure = styled('figure', { + shouldForwardProp: (prop) => prop !== 'width', +})<{ width: string }>(({ theme, width }) => ({ + width, margin: 0, })) @@ -12,9 +15,9 @@ const Image = styled('img', { })<{ width: string }>(({ width, theme }) => ({ borderRadius: theme.shape.borderRadius, boxShadow: theme.shadows[3], - height: `calc(${width} - 16px)`, + height: `${width}`, objectFit: 'cover', - width: `calc(${width} - 16px)`, + width, })) const GameFigure: FC< @@ -36,7 +39,7 @@ const GameFigure: FC< const { ref } = useInView({ onChange: handleChange }) return ( -
+
{hasBeenInViewBefore || noDefer ? [ { - if (isXl) return 240 - if (isLg) return 240 - if (isMd) return 232 - if (isSm) return 200 - if (isXs) return 184 - return 168 - }, [isXl, isLg, isMd, isSm, isXs]) - const rowHeight = useMemo(() => { - return columnWidth + 64 - }, [columnWidth]) const columns = useMemo(() => { + if (isXxl) return 6 if (isXl) return 5 if (isLg) return 4 if (isMd) return 3 if (isSm) return 2 if (isXs) return 2 return 2 - }, [isXl, isLg, isMd, isSm, isXs]) + }, [isXxl, isXl, isLg, isMd, isSm, isXs]) + + const width = useThemeWidth() + const columnWidth = useMemo(() => { + return Math.floor((width - columns * 16) / columns) + }, [width, columns]) + const rowHeight = useMemo(() => { + return columnWidth + 64 + }, [columnWidth]) return ( <> @@ -61,13 +60,16 @@ const GameGrid: FC<{ {games.items.map((game, gameIndex) => ( ({ + ...(!game.matches ? { display: 'none' } : {}), + alignItems: 'center', + })} > {game.name} @@ -90,12 +95,15 @@ const GameGrid: FC<{ component="div" sx={{ textWrap: 'balance', - lineHeight: '1.5', + lineHeight: '1', textOverflow: 'ellipsis', overflowY: 'hidden', - maxHeight: '4rem', - lineClamp: 2, + maxHeight: '2rem', + lineClamp: '1', fontSize: '13px', + display: '-webkit-box', + '-webkit-line-clamp': '1', + '-webkit-box-orient': 'vertical ', }} > {game.name} diff --git a/apps/playnite-web/src/components/MyLibrary.tsx b/apps/playnite-web/src/components/MyLibrary.tsx index f8a1d95a5..172ab10f8 100644 --- a/apps/playnite-web/src/components/MyLibrary.tsx +++ b/apps/playnite-web/src/components/MyLibrary.tsx @@ -57,7 +57,7 @@ const MyLibrary: FC<{ gamesOnPlatforms: GameOnPlatform[] }> = ({ ({ flexGrow: 1, - maxWidth: `${width}px`, + width: '100%', margin: '0 auto', [theme.breakpoints.up('lg')]: { overflowY: 'auto', diff --git a/apps/playnite-web/src/components/OuterScroll.tsx b/apps/playnite-web/src/components/OuterScroll.tsx index 6fccfd028..18f4dc801 100644 --- a/apps/playnite-web/src/components/OuterScroll.tsx +++ b/apps/playnite-web/src/components/OuterScroll.tsx @@ -40,15 +40,18 @@ const OuterScroll: FC> = ({ children }) => { display: 'flex', flexDirection: 'column', height: `calc(100vh - ${theme.spacing(12)})`, - padding: `0 ${theme.spacing(2.5)} 0 ${theme.spacing()}`, - [theme.breakpoints.down('lg')]: { - overflowY: 'auto', - scrollbarColor: `${theme.palette.text.primary} ${theme.palette.background.default}`, - padding: `0 ${theme.spacing(2.5)} 0 ${theme.spacing(3)}`, + padding: `0 ${theme.spacing()} 0 ${theme.spacing()}`, + [theme.breakpoints.up('xs')]: { + padding: `0 ${theme.spacing(2)} 0 ${theme.spacing(2)}`, }, [theme.breakpoints.only('md')]: { padding: `0 ${theme.spacing(3)} 0 ${theme.spacing(5)}`, }, + // [theme.breakpoints.down('lg')]: { + // overflowY: 'auto', + // scrollbarColor: `${theme.palette.text.primary} ${theme.palette.background.default}`, + // padding: `0 ${theme.spacing()} 0 ${theme.spacing(3)}`, + // }, })} > {children} diff --git a/apps/playnite-web/src/components/useThemeWidth.ts b/apps/playnite-web/src/components/useThemeWidth.ts index 7e88c4825..4b9147977 100644 --- a/apps/playnite-web/src/components/useThemeWidth.ts +++ b/apps/playnite-web/src/components/useThemeWidth.ts @@ -4,6 +4,7 @@ import { useMemo } from 'react' const useThemeWidth = () => { const theme = useTheme() + const isXxl = useMediaQuery(theme.breakpoints.up('xxl')) const isXl = useMediaQuery(theme.breakpoints.up('xl')) const isLg = useMediaQuery(theme.breakpoints.up('lg')) const isMd = useMediaQuery(theme.breakpoints.up('md')) @@ -11,13 +12,26 @@ const useThemeWidth = () => { const isXs = useMediaQuery(theme.breakpoints.up('xs')) const width = useMemo(() => { - if (isXl) return 1280 - if (isLg) return 938 - if (isMd) return 736 - if (isSm) return 398 - if (isXs) return 374 + if (isXxl) { + return theme.breakpoints.values.xxl - 81 - 16 + } + if (isXl) { + return theme.breakpoints.values.xl - 81 - 16 + } + if (isLg) { + return theme.breakpoints.values.lg - 81 - 16 + } + if (isMd) { + return theme.breakpoints.values.md - 16 - 40 - 24 + } + if (isSm) { + theme.breakpoints.values.sm - 24 - 20 + } + if (isXs) { + return theme.breakpoints.values.xs - 24 - 20 + } return 342 - }, [isXl, isLg, isMd, isSm, isXs]) + }, [isXxl, isXl, isLg, isMd, isSm, isXs]) return width } diff --git a/apps/playnite-web/src/muiTheme.ts b/apps/playnite-web/src/muiTheme.ts index 11fb29030..559ea4646 100644 --- a/apps/playnite-web/src/muiTheme.ts +++ b/apps/playnite-web/src/muiTheme.ts @@ -23,9 +23,6 @@ const ssrMatchMedia = : '1440px', }), }) -const defaultTheme = createTheme() - -console.log(JSON.stringify(defaultTheme, null, 2)) const theme = ( deviceType: 'mobile' | 'tablet' | 'desktop' | 'unknown' = 'unknown',