mobile friendly touches

src/components/_mobile/collection/Search.tsx

@@ -2,9 +2,9 @@
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import SearchIcon from '@mui/icons-material/Search';
 import { 
-  Accordion as MUIAccordion, AccordionDetails, AccordionSummary, Box, Button, Checkbox, Dialog, DialogActions, DialogContent, 
-  Fab, FormControlLabel, FormGroup, InputAdornment, Modal, styled, TextField, ToggleButton, ToggleButtonGroup, 
-  Typography, useTheme, Zoom 
+  Accordion as MuiAccordion, AccordionDetails, AccordionSummary, Box, Button, Checkbox as MuiCheckbox, Dialog, DialogActions, DialogContent, 
+  Fab, FormControlLabel as MuiFCL, FormGroup, InputAdornment, styled, TextField, ToggleButton, ToggleButtonGroup, 
+  Typography, useMediaQuery, useTheme, Zoom 
 } from '@mui/material';
 import React, { FormEvent, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -12,12 +12,21 @@ import search_api from '../../collection/search/search';
 import { ElementIcon, TribeIcon } from '../../Snippets';
 import API, { sets } from '../../SpreadsheetData/API';
 
-const Accordion = styled(MUIAccordion)(() => ({
+const Accordion = styled(MuiAccordion)(() => ({
   "&.Mui-expanded": {
     margin: 0
   }
 }));
 
+const Checkbox = styled(MuiCheckbox)(() => ({
+  padding: "4px"
+}));
+
+const FormControlLabel = styled(MuiFCL)(() => ({
+  marginLeft: "-4px",
+  marginRight: "8px"
+}));
+
 const initInput = (() => {
   /* @ts-ignore */
   const cardSets: {[key in keyof typeof sets]: boolean} = {};
@@ -53,7 +62,6 @@ const initExpand = ({
 const queryList = ["sets", "types", "rarity", "tribes", "elements", "mull", "gender"];
 
 const inputReducer = (state: typeof initInput, newState: Partial<typeof initInput>) => {
-  console.log(state, newState);
   return { ...state, ...newState };
 };
 
@@ -70,6 +78,7 @@ function Search ({ setContent, setInfo }) {
   const [expand, dispatchExpand] = useReducer(expandReducer, initExpand, parseExpand);
   const [loaded, setLoaded] = useState(false);
   const [open, setOpen] = useState(false);
+  const fullscreen = useMediaQuery("@media (max-width:530px)");
 
   useEffect(() => {
     setInfo({ 'text': 'Loading..' });
@@ -125,21 +134,11 @@ function Search ({ setContent, setInfo }) {
     localStorage.setItem("collapsed", JSON.stringify({ ...expand, [field]: isExpanded }));
   };
 
-  const handleOpen = () => {
-    setOpen(true);
-  };
+  const handleOpen = () => {setOpen(true)};
 
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const transitionDuration = {
-    enter: theme.transitions.duration.enteringScreen,
-    exit: theme.transitions.duration.leavingScreen,
-  };
+  const handleClose = () => {setOpen(false)};
 
   const generate = (type: string, row: boolean, label: (item: string) => React.ReactNode) => {
-    console.log(type, input[type]);
     return Object.keys(input[type]).map((item, i) => (
       <FormControlLabel style={{ display: "inline" }} key={i} control={
         <Checkbox checked={input[type][item]} onChange={handleChange(item, type)} />
@@ -149,13 +148,13 @@ function Search ({ setContent, setInfo }) {
 
   const tribes = useMemo(() => (
     generate("tribes", true, (item) =>
-      <TribeIcon tribe={item} />
+      <TribeIcon size="icon20" tribe={item} />
     )
   ), [input.tribes]);
 
   const elements = useMemo(() => (
     generate("elements", true, (item) =>
-      <ElementIcon element={item} value="5" />
+      <ElementIcon size="icon20" element={item} value="5" />
     ).slice(0, -2)
   ), [input.elements]);
 
@@ -182,7 +181,15 @@ function Search ({ setContent, setInfo }) {
       <TextField key={item}
         value={input.disciplines[item]}
         onChange={handleChange(item, "disciplines")}
-        sx={{ width: "25%", "& .MuiInputBase-input": { pt: 1, pb: 1 }}}
+        sx={{
+          "@media (max-width:530px)": {
+            width: "25%"
+          },
+          "@media (min-width:530px)": {
+            width: "20%"
+          },
+          "& .MuiInputBase-input": { pt: 1, pb: 1 }
+        }}
         InputProps={{
           inputProps: { min: 0 },
           startAdornment: (
@@ -195,119 +202,142 @@ function Search ({ setContent, setInfo }) {
     ))
   ), [input.disciplines]);
 
+  const transitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen,
+  };
+
   return (<>
-    <Modal
-      open={true} // todo
+    <Dialog
+      open={open}
       onClose={handleClose}
-      sx={{ overflow: "scroll" }}
+      fullScreen={fullscreen}
     >
-      {((loaded == false) ? <></> : (
-        <Box component="form" 
-          onSubmit={handleSearch}
-          sx={{
-            position: 'absolute' as 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: 400,
-            bgcolor: 'background.paper',
-            border: '2px solid #000',
-            boxShadow: 24,
-            p: 4,
-          }}>
-          <FormGroup>
-            <TextField 
-              label="Name"
-              value={input.name}
-              onChange={handleChange("name")}
-            />
-            <TextField
-              label="Text"
-              value={input.text}
-              onChange={handleChange("text")}
-            />
-            <TextField
-              label="Subtypes | Initiative"
-              value={input.subtypes}    
-              onChange={handleChange("subtypes")}
-            />
-            <FormControlLabel control={
-              <Checkbox checked={!input.flavor} onChange={(e) => {dispatchInput({ flavor: !e.target.checked })}} />
-            } label="Ignore Flavortext & Artist" />
-          </FormGroup>
-          <FormGroup row>
-            <FormControlLabel control={
-              <Checkbox checked={input.mull.unique} onChange={handleChange("unique", "mull")} />
-            } label="Unique" />
-            <FormControlLabel control={
-              <Checkbox checked={input.mull.loyal} onChange={handleChange("loyal", "mull")} />
-            } label="Loyal" />
-            <FormControlLabel control={
-              <Checkbox checked={input.mull.legendary} onChange={handleChange("legendary", "mull")} />
-            } label="Legendary" />
-          </FormGroup>
-          <FormControlLabel control={
-            <Checkbox checked={input.mull.mixed} onChange={handleChange("mixed", "mull")} />
-          } label="Non-Loyal" />
-          <FormGroup row>
-            {tribes}
-          </FormGroup>
-          <FormGroup row>
-            {elements}
-            <FormControlLabel control={
-              <Checkbox checked={input.elements.none} onChange={handleChange("none", "elements")} />
-            } label="None" />
-          </FormGroup>
-          <ToggleButtonGroup
-            value={input.elements.and}
-            exclusive
-            sx={{ mb: 1 }}
-            onChange={(e, value) => {dispatchInput({ "elements": { ...input.elements, "and": value }})} }
+      {(loaded === true) && (<>
+        <DialogContent>
+          <Box component="form" 
+            id='search-form'
+            onSubmit={handleSearch}
           >
-            <ToggleButton value={false} sx={{ paddingTop: 0, paddingBottom: 0 }}>{(input.elements.none) ? "none" : "or"}</ToggleButton>
-            <ToggleButton value={true} sx={{ paddingTop: 0, paddingBottom: 0 }}>{(input.elements.none) ? "only" : "and"}</ToggleButton>
-          </ToggleButtonGroup>
-          <FormGroup row>{disciplines}</FormGroup>
-          <Accordion
-            expanded={expand.types}
-            onChange={handleExpand("types")}
-          >
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography>Card Type</Typography> 
-            </AccordionSummary>
-            <AccordionDetails>
-              <FormGroup>{types}</FormGroup>
-            </AccordionDetails>
-          </Accordion>
-          <Accordion
-            expanded={expand.rarity}
-            onChange={handleExpand("rarity")}
-          >
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography>Rarity</Typography> 
-            </AccordionSummary>
-            <AccordionDetails>
-              <FormGroup>{rarity}</FormGroup>
-            </AccordionDetails>
-          </Accordion>
-          <Accordion
-            expanded={expand.sets}
-            onChange={handleExpand("sets")}
-          >
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography>Sets</Typography> 
-            </AccordionSummary>
-            <AccordionDetails>
-              <FormGroup>{sets}</FormGroup>
-            </AccordionDetails>
-          </Accordion>
-          <Box>
-            <Button type="submit" variant="outlined">Submit</Button>
-            <Button variant="outlined" onClick={() => cleanInput()}>Reset</Button>
+            <FormGroup>
+              <TextField 
+                label="Name"
+                value={input.name}
+                onChange={handleChange("name")}
+              />
+              <TextField
+                label="Text"
+                value={input.text}
+                onChange={handleChange("text")}
+              />
+              <TextField
+                label="Subtypes | Initiative"
+                value={input.subtypes}    
+                onChange={handleChange("subtypes")}
+              />
+              <FormControlLabel control={
+                <Checkbox checked={!input.flavor} onChange={(e) => {dispatchInput({ flavor: !e.target.checked })}} />
+              } label="Ignore Flavortext & Artist" />
+            </FormGroup>
+            <FormGroup row>
+              <FormControlLabel control={
+                <Checkbox checked={input.mull.unique} onChange={handleChange("unique", "mull")} />
+              } label="Unique" />
+              <FormControlLabel control={
+                <Checkbox checked={input.mull.loyal} onChange={handleChange("loyal", "mull")} />
+              } label="Loyal" />
+              <FormControlLabel control={
+                <Checkbox checked={input.mull.legendary} onChange={handleChange("legendary", "mull")} />
+              } label="Legendary" />
+              <FormControlLabel control={
+                <Checkbox checked={input.mull.mixed} onChange={handleChange("mixed", "mull")} />
+              } label="Non-Loyal" />
+            </FormGroup>
+            <FormGroup row>
+              {tribes}
+            </FormGroup>
+            <FormGroup row>
+              {elements}
+              <FormControlLabel control={
+                <Checkbox checked={input.elements.none} onChange={handleChange("none", "elements")} />
+              } label="None" />
+            </FormGroup>
+            <ToggleButtonGroup
+              value={input.elements.and}
+              exclusive
+              sx={{ mb: 1 }}
+              onChange={(e, value) => {dispatchInput({ "elements": { ...input.elements, "and": value }})} }
+            >
+              <ToggleButton value={false} sx={{ paddingTop: 0, paddingBottom: 0 }}>{(input.elements.none) ? "none" : "or"}</ToggleButton>
+              <ToggleButton value={true} sx={{ paddingTop: 0, paddingBottom: 0 }}>{(input.elements.none) ? "only" : "and"}</ToggleButton>
+            </ToggleButtonGroup>
+            <FormGroup row>
+              {disciplines}
+              <FormControlLabel labelPlacement="start" 
+                sx={{ 
+                  "@media (max-width:530px)": {
+                    marginLeft: "0"
+                  },
+                  "@media (min-width:530px)": {
+                    marginLeft: "4px" 
+                  }
+                }} control={
+                  <Checkbox checked={input.disciplines.max} onChange={handleChange("max", "disciplines")} />
+                } label="Max" />
+            </FormGroup>
+            <FormGroup>
+              <Typography>Energy</Typography>
+              <FormGroup row>
+                <TextField size="small" sx={{ width: "35%" }} label="Min" value={input.energy.min} onChange={handleChange("min", "energy")} />
+                <TextField size="small" sx={{ width: "35%" }} label="Max" value={input.energy.max} onChange={handleChange("max", "energy")} />
+              </FormGroup>
+            </FormGroup>
+            <FormGroup>
+              <Typography>Build Points & Mugic Counters/Cost</Typography>
+              <FormGroup row>
+                <TextField size="small" sx={{ width: "35%" }} label="Min" value={input.mcbp.min} onChange={handleChange("min", "mcbp")} />
+                <TextField size="small" sx={{ width: "35%" }} label="Max" value={input.mcbp.max} onChange={handleChange("max", "mcbp")} />
+              </FormGroup>
+            </FormGroup>
+            <Accordion expanded={expand.types}
+              onChange={handleExpand("types")}
+            >
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography>Card Type</Typography> 
+              </AccordionSummary>
+              <AccordionDetails>
+                <FormGroup>{types}</FormGroup>
+              </AccordionDetails>
+            </Accordion>
+            <Accordion expanded={expand.rarity}
+              onChange={handleExpand("rarity")}
+            >
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography>Rarity</Typography> 
+              </AccordionSummary>
+              <AccordionDetails>
+                <FormGroup>{rarity}</FormGroup>
+              </AccordionDetails>
+            </Accordion>
+            <Accordion expanded={expand.sets}
+              onChange={handleExpand("sets")}
+            >
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography>Sets</Typography> 
+              </AccordionSummary>
+              <AccordionDetails>
+                <FormGroup>{sets}</FormGroup>
+              </AccordionDetails>
+            </Accordion>
           </Box>
-        </Box>
-      ))}
-    </Modal>
+        </DialogContent>
+        <DialogActions sx={{ justifyContent: "flex-start" }}>
+          <Button type="submit" form="search-form" variant="outlined">Submit</Button>
+          <Button variant="outlined" onClick={() => cleanInput()}>Reset</Button>
+          <Button onClick={handleClose} sx={{ marginLeft: "auto !important" }}>Close</Button>
+        </DialogActions>
+      </>)}
+    </Dialog>
     <Zoom
       in={!open}
       timeout={transitionDuration}

src/components/_mobile/collection/index.tsx

@@ -29,6 +29,11 @@ let theme = createTheme({
 
 theme = createTheme(theme, createTheme({
   components: {
+    MuiUseMediaQuery: {
+      defaultProps: {
+        noSsr: true,
+      },
+    },
     MuiCard: {
       styleOverrides: {
         root: {
@@ -63,7 +68,7 @@ export default function Collection (_props) {
   const [content, setContent] = useState<ChaoticCard[]>([]);
   const [info, setInfo] = useState<{text?: string}>({});
   const [selected, setSelected] = useState<ChaoticCard | null>(null);
-  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
+  const isSmall = useMediaQuery(theme.breakpoints.down("sm"), { noSsr: true });
 
   useEffect(() => {
     const load = localStorage.getItem("collection");