filter UX for tablet/desktop (#216)

Closes #185 Closes #211
andrew-codes · Feb 19, 2024 · 9c973ac · 9c973ac
2 parents 1aaf033 + e966736
commit 9c973ac
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 27 deletions.
diff --git a/apps/playnite-web/src/components/FilterDrawer.tsx b/apps/playnite-web/src/components/FilterDrawer.tsx
@@ -91,6 +91,7 @@ const DrawerHeader = styled('div', {
 })<{ open: boolean }>(({ open, theme }) => ({
   position: 'absolute',
   right: `24px`,
+  top: '13px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-end',
@@ -100,6 +101,9 @@ const DrawerHeader = styled('div', {
   ...(!open && {
     display: 'none',
   }),
+  [theme.breakpoints.down('lg')]: {
+    top: '0',
+  },
 }))
 
 const DrawerBody = styled('div', {
@@ -111,8 +115,7 @@ const DrawerBody = styled('div', {
   position: 'relative',
   flexDirection: 'column',
   overflowY: 'hidden',
-  paddingTop: `56px`,
-  padding: `${theme.spacing(2.5)}`,
+  padding: `56px ${theme.spacing(2.5)} ${theme.spacing(2.5)}`,
   backgroundColor: theme.palette.background.paper,
 
   '> *': {
@@ -168,7 +171,6 @@ const FilterDrawer: FC<{
       anchor="right"
       open={open}
       onClose={handleClose}
-      // ModalProps={{ keepMounted: true }}
     >
       <DrawerHeader open={open}>
         <IconButton

diff --git a/apps/playnite-web/src/components/Filters/FilterForm.tsx b/apps/playnite-web/src/components/Filters/FilterForm.tsx
@@ -211,13 +211,30 @@ const FilterForm: FC<{
         sx={(theme) => ({
           display: 'flex',
           flexDirection: 'row',
-          justifyContent: 'space-between',
           width: '100%',
+          [theme.breakpoints.up('lg')]: {
+            justifyContent: 'center',
+            '> button': {
+              margin: `0 ${theme.spacing(2)}`,
+            },
+          },
+          [theme.breakpoints.down('lg')]: {
+            justifyContent: 'space-between',
+            '> button': {
+              flex: 1,
+            },
+          },
         })}
       >
-        <Button type="submit">Filter</Button>
-        <Button type="reset">Clear</Button>
-        <Button onClick={handleCancel}>Cancel</Button>
+        <Button type="submit" size="large">
+          Filter
+        </Button>
+        <Button type="reset" size="large">
+          Clear
+        </Button>
+        <Button onClick={handleCancel} size="large">
+          Cancel
+        </Button>
       </Box>
     </Form>
   )

diff --git a/apps/playnite-web/src/components/Navigation/Drawer.tsx b/apps/playnite-web/src/components/Navigation/Drawer.tsx
@@ -2,15 +2,24 @@ import { Box, useMediaQuery, useTheme } from '@mui/material'
 import { FC, PropsWithChildren, ReactNode } from 'react'
 import MobileDrawerNavigation from './MobileDrawerNavigation'
 
-const Drawer: FC<PropsWithChildren<{ title?: ReactNode }>> = ({
-  children,
-  title,
-}) => {
+const Drawer: FC<
+  PropsWithChildren<{
+    title?: ReactNode | undefined
+    secondaryMenu?: ReactNode | undefined
+  }>
+> = ({ children, secondaryMenu, title }) => {
   const theme = useTheme()
   const shouldUseMobileDrawer = useMediaQuery(theme.breakpoints.down('lg'))
 
   return shouldUseMobileDrawer ? (
-    <MobileDrawerNavigation title={title}>
+    <MobileDrawerNavigation
+      title={
+        <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+          {title}
+          <Box sx={{ alignSelf: 'flex-end' }}>{secondaryMenu}</Box>
+        </Box>
+      }
+    >
       <Box
         component={'main'}
         sx={(theme) => ({
@@ -65,6 +74,17 @@ const Drawer: FC<PropsWithChildren<{ title?: ReactNode }>> = ({
         },
       })}
     >
+      <Box
+        sx={{
+          display: 'flex',
+          position: 'absolute',
+          top: '24px',
+          right: '24px',
+          zIndex: 1500,
+        }}
+      >
+        {secondaryMenu}
+      </Box>
       {children}
     </Box>
   )

diff --git a/apps/playnite-web/src/routes/browse.tsx b/apps/playnite-web/src/routes/browse.tsx
@@ -1,5 +1,5 @@
 import { FilterAlt } from '@mui/icons-material'
-import { Box, Button, styled } from '@mui/material'
+import { Button, styled } from '@mui/material'
 import type { LoaderFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
@@ -72,20 +72,16 @@ function Browse() {
   return (
     <Drawer
       title={
-        <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-          <Title>
-            <Button variant="text" onClick={handleScrollTop}>
-              My Games
-            </Button>
-          </Title>
-          <IconButton
-            onClick={() => setOpen(true)}
-            name="open-filter-drawer"
-            sx={{ alignSelf: 'flex-end' }}
-          >
-            <FilterAlt />
-          </IconButton>
-        </Box>
+        <Title>
+          <Button variant="text" onClick={handleScrollTop}>
+            My Games
+          </Button>
+        </Title>
+      }
+      secondaryMenu={
+        <IconButton onClick={() => setOpen(true)} name="open-filter-drawer">
+          <FilterAlt />
+        </IconButton>
       }
     >
       <MyLibrary gamesOnPlatforms={gamesOnPlatforms ?? []} />