Skip to content

Commit

Permalink
Better spacing of grid view games on all resolutions
Browse files Browse the repository at this point in the history 
Fixes #168
  • Loading branch information
@andrew-codes
andrew-codes committed Feb 9, 2024
1 parent 500651c commit e4e0426
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 38 deletions.
11 changes: 7 additions & 4 deletions apps/playnite-web/src/components/GameFigure.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}))

Expand All @@ -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<
Expand All @@ -36,7 +39,7 @@ const GameFigure: FC<
const { ref } = useInView({ onChange: handleChange })

return (
<Figure style={style} ref={ref}>
<Figure style={style} ref={ref} width={width}>
{hasBeenInViewBefore || noDefer
? [
<Image
Expand Down
46 changes: 27 additions & 19 deletions apps/playnite-web/src/components/GameGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { useFetcher } from '@remix-run/react'
import { FC, SyntheticEvent, useCallback, useMemo } from 'react'
import type { IGame, IList, Match } from '../domain/types'
import GameFigure from './GameFigure'
import useThemeWidth from './useThemeWidth'

const ImageListWithoutOverflow = styled(ImageList)`
overflow-y: hidden;
Expand All @@ -29,45 +30,46 @@ const GameGrid: FC<{
)

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'))
const isSm = useMediaQuery(theme.breakpoints.up('sm'))
const isXs = useMediaQuery(theme.breakpoints.up('xs'))

const columnWidth = useMemo(() => {
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 (
<>
<ImageListWithoutOverflow rowHeight={rowHeight} cols={columns}>
{games.items.map((game, gameIndex) => (
<ImageListItem
key={game.oid.asString}
sx={{ ...(!game.matches ? { display: 'none' } : {}) }}
sx={(theme) => ({
...(!game.matches ? { display: 'none' } : {}),
alignItems: 'center',
})}
>
<GameFigure
game={game}
height={`${rowHeight}px`}
noDefer={gameIndex <= noDeferCount}
width={`${columnWidth - 16}px`}
width={`calc(${columnWidth}px)`}
>
<Typography
variant="caption"
Expand All @@ -79,8 +81,11 @@ const GameGrid: FC<{
textOverflow: 'ellipsis',
overflowY: 'hidden',
maxHeight: '4rem',
lineClamp: 2,
lineClamp: '2',
fontSize: '15px',
display: '-webkit-box',
'-webkit-line-clamp': '2',
'-webkit-box-orient': 'vertical ',
}}
>
{game.name}
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion apps/playnite-web/src/components/MyLibrary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const MyLibrary: FC<{ gamesOnPlatforms: GameOnPlatform[] }> = ({
<Box
sx={(theme) => ({
flexGrow: 1,
maxWidth: `${width}px`,
width: '100%',
margin: '0 auto',
[theme.breakpoints.up('lg')]: {
overflowY: 'auto',
Expand Down
13 changes: 8 additions & 5 deletions apps/playnite-web/src/components/OuterScroll.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,18 @@ const OuterScroll: FC<PropsWithChildren<{}>> = ({ 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}
Expand Down
26 changes: 20 additions & 6 deletions apps/playnite-web/src/components/useThemeWidth.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,34 @@ 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'))
const isSm = useMediaQuery(theme.breakpoints.up('sm'))
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
}
Expand Down
3 changes: 0 additions & 3 deletions apps/playnite-web/src/muiTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down

0 comments on commit e4e0426

Please sign in to comment.