Merge pull request #48 from fuzue/46-improve-layout-fluidity

46 improve layout fluidity

public/locales/en/translation.json

@@ -7,8 +7,9 @@
   "FoodOfTheMonth_fruitsNumber_other": "{{fruits}} fruits",
   "FoodOfTheMonth_veggiesNumber_one": "and {{veggies}} veggie in season",
   "FoodOfTheMonth_veggiesNumber_other": "and {{veggies}} veggies in season",
-  "FoodPage_notInSeasonText": "Not in season, check below when it's best to buy it.",
+  "FoodPage_notInSeasonText": "Not in season",
   "FoodPage_inSeasonText": "Currently in season",
+  "FoodPage_checkMonths": "Check below when it's best to buy it.",
   "FoodPage_monthsInSeason": "Months in season",
   "backButton": "back",
   "month_0": "January",

public/locales/it/translation.json

@@ -7,8 +7,9 @@
   "FoodOfTheMonth_fruitsNumber_other": "{{fruits}} frutti",
   "FoodOfTheMonth_veggiesNumber_one": "e {{veggies}} verdura di stagione",
   "FoodOfTheMonth_veggiesNumber_other": "e {{veggies}} verdure di stagione",
-  "FoodPage_notInSeasonText": "Non è di stagione, controllate qui sotto quando è meglio acquistarlo.",
+  "FoodPage_notInSeasonText": "Non è di stagione",
   "FoodPage_inSeasonText": "Attualmente è in stagione",
+  "FoodPage_checkMonths": "controllate qui sotto quando è meglio acquistarlo.",
   "FoodPage_monthsInSeason": "Mesi di stagione",
   "backButton": "indietro",
   "month_0":  "Gennaio",

src/components/HeaderBar.tsx

@@ -1,5 +1,10 @@
 import type { FoodList, FoodObject } from "../types/food";
+import Fuse from 'fuse.js'
+import { useRef, useEffect } from "react"
+import { useNavigate, useLocation } from "react-router-dom";
 import i18next from "i18next";
+import { useTranslation } from "react-i18next";
+import { ArrowBackIosNew, Menu, Search } from "@mui/icons-material";
 import {
   AppBar,
   styled,
@@ -8,13 +13,6 @@ import {
   IconButton,
   InputBase,
 } from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-import SearchIcon from "@mui/icons-material/Search";
-import { useTranslation } from "react-i18next";
-import { ArrowBackIosNew } from "@mui/icons-material";
-import Fuse from 'fuse.js'
-import { useRef, useEffect } from "react"
-import { useNavigate, useLocation } from "react-router-dom";
 
 type Props = {
   ifSearched: boolean;
@@ -61,7 +59,37 @@ export default function HeaderBar(props: Props) {
     return fuse.search(searchLanguage).map((i) => i.item)
   };
 
-  const Search = styled("div")(({ theme }) => ({
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  function leftButton() {
+    if (location.pathname.split("/")[1] === "foodpage") {
+      return (
+        <IconButton
+          size="large"
+          edge="start"
+          color="inherit"
+          aria-label="return"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowBackIosNew />
+        </IconButton>
+      );
+    }
+    return (
+      <IconButton
+        size="large"
+        edge="start"
+        color="inherit"
+        aria-label="open drawer"
+        onClick={props.toggleDrawer}
+      >
+        <Menu />
+      </IconButton>
+    );
+  }
+
+  const SearchBar = styled("div")(({ theme }) => ({
     position: "relative",
     borderRadius: theme.shape.borderRadius,
     backgroundColor: alpha(theme.palette.common.white, 0.15),
@@ -72,9 +100,9 @@ export default function HeaderBar(props: Props) {
     width: "auto",
   }));
 
-  const SearchIconWrapper = styled("div")(({ theme }) => ({
-    padding: theme.spacing(0, 2),
+  const SearchIconWrapper = styled("div")(() => ({
     height: "100%",
+    aspectRatio: 1,
     position: "absolute",
     pointerEvents: "none",
     display: "flex",
@@ -86,66 +114,32 @@ export default function HeaderBar(props: Props) {
     color: "inherit",
     "& .MuiInputBase-input": {
       padding: theme.spacing(1, 1, 1, 0),
-      // vertical padding + font size from searchIcon
-      paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-      transition: theme.transitions.create("width"),
-      width: "12ch",
+      paddingLeft: `calc(1em + ${theme.spacing(3)})`,
+      transition: theme.transitions.create("max-width"),
+      width: "100%",
+      maxWidth: "0ch",
       "&:focus": {
-        width: "20ch",
+        maxWidth: "20ch",
       },
     },
   }));
 
-  const StyledAppBar = styled(AppBar)(() => ({
-    borderRadius: "2%",
-    background: 'primary.main' ,
-    marginTop: "0",
-  }));
-
-  const navigate = useNavigate();
-  const location = useLocation();
 
-  function leftButton() {
-    if (location.pathname.split("/")[1] === "foodpage") {
-      return (
-        <IconButton
-          size="large"
-          edge="start"
-          color="inherit"
-          aria-label="open drawer"
-          onClick={() => navigate(-1)}
-        >
-          <ArrowBackIosNew />
-        </IconButton>
-      );
-    }
-    return (
-      <IconButton
-        size="large"
-        edge="start"
-        color="inherit"
-        aria-label="open drawer"
-        onClick={props.toggleDrawer}
-      >
-        <MenuIcon />
-      </IconButton>
-    );
-  }
 
   return (
-    <StyledAppBar position="static">
+    <AppBar position="static" sx={{mb: 1, backgroundColor:"primary.dark"}}>
       <Toolbar>
         {leftButton()}
-        <Search>
+        <SearchBar>
           <SearchIconWrapper>
             <IconButton
+              sx={{m: 0}}
               size="large"
               edge="start"
               color="inherit"
               aria-label="open drawer"
-              sx={{ mr: 2 }}
             >
-              <SearchIcon type="submit" />
+              <Search />
             </IconButton>
           </SearchIconWrapper>
           <form onSubmit={(e) => handleSubmit(e)}>
@@ -156,8 +150,8 @@ export default function HeaderBar(props: Props) {
               id="search-bar"
             />
           </form>
-        </Search>
+        </SearchBar>
       </Toolbar>
-    </StyledAppBar>
+    </AppBar>
   );
 }

src/components/Item.tsx

@@ -1,37 +1,50 @@
-import type { FoodObject } from "../types/food"
+import type { FoodObject } from "../types/food";
 
 import { Link } from "react-router-dom";
-import { Box, Typography, styled } from "@mui/material";
+import { Box, Stack, Typography, styled } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
-
-const ImgBox = styled(Box)(({ theme }) => ({
+const ImgBox = styled(Stack)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
-  width: "6em",
+  width: "100%",
+  aspectRatio: 1,
   boxShadow: "3px 4px 8px #888888",
-  textAlign: "center",
-  backgroundColor:"#fefefe",
-  [theme.breakpoints.down("xs")]: {
-    width: "115px",
-  },
+  overflow: "clip",
+  color: theme.palette.primary.light,
+  backgroundColor: theme.palette.primary.main, 
+
 }));
 
 function Item(props: FoodObject) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   const image = props.image.toLowerCase();
   return (
-    <Link to={`/foodpage/${props.description[0].slug}`}>
-      <ImgBox>
-        <img
-          className="food-image"
-          src={`../images/${image}.png`}
-          alt={`image of ${image}`}
-        />
-        <Typography sx={{ paddingBottom: "0.25em" }}>
-          {t(props.description[0].name)}
-        </Typography>
-      </ImgBox>
-    </Link>
+    <Box
+      sx={{ flexGrow: 1, width: "100%", maxWidth: "30%", minWidth: 90 }}
+    >
+      <Link to={`/foodpage/${props.description[0].slug}`}>
+        <ImgBox>
+          <Box position="relative" flexGrow={1}>
+            <img
+              className="food-image"
+              src={`../images/${image}.png`}
+              alt={`image of ${image}`}
+            />
+          </Box>
+          <Box position="relative" height="20%" sx={{ textAlign: 'center'}}>
+            <Typography
+
+              top={0}
+              fontSize="max(1rem, min(4.5vw, 3rem))"
+              fontWeight={400}
+              sx={{ p: "0.25em", transform: "translateY(-20%)" }}
+            >
+              {t(props.description[0].name)}
+            </Typography>
+          </Box>
+        </ImgBox>
+      </Link>
+    </Box>
   );
 }
 

src/components/RenderFoods.tsx

@@ -1,6 +1,6 @@
 import type { FoodList } from "../types/food";
 import Item from "./Item";
-import { Box, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import { FunctionComponent } from "react";
 
 interface RenderFoodProps {
@@ -14,15 +14,13 @@ interface RenderFoodProps {
 //render the grid of foods
 const RenderFoods:FunctionComponent<RenderFoodProps> = (props:RenderFoodProps) => {
   const foodList = props.foodList
-  const foodItems = foodList.map((item, key) => {
+  const foodItems = foodList.map((item ) => {
     return (
-      <Box sx={{mb: 1, mx: '5px', display: 'flex', flexGrow: 1, justifyContent: "center"}} key={key}>
-        <Item {...item} />
-      </Box>
+      <Item {...item} />
     );
   });
   return (
-    <Stack direction="row" flexWrap="wrap">
+    <Stack direction="row" flexWrap="wrap" justifyContent="space-between" gap={1.5}>
       {foodItems}
     </Stack>
   );

src/components/SearchResult.tsx

@@ -1,52 +1,77 @@
+import { ReactElement, forwardRef } from "react";
 import type { FoodList } from "../types/food";
-import Item from "./Item"
-import { Box, Typography, Dialog, Grid } from "@mui/material";
+import Item from "./Item";
+import {
+  Box,
+  Typography,
+  Dialog,
+  Slide,
+  IconButton,
+  Stack,
+} from "@mui/material";
+import { TransitionProps } from "@mui/material/transitions";
+import { Close } from "@mui/icons-material";
 
 type Props = {
-  searchResults: FoodList
-  ifSearched: boolean
-  closeModal: () => void
-}
+  searchResults: FoodList;
+  ifSearched: boolean;
+  closeModal: () => void;
+};
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: ReactElement;
+  },
+  ref: React.Ref<unknown>
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
 
 function SearchResult(props: Props) {
   const { searchResults, ifSearched, closeModal } = props;
 
   const foodItems = searchResults.map((item, key) => {
-    return ( <Item key={key} {...item} />);
-  })
-
-  const renderResults = (foodItems: JSX.Element[]) => {
-    return (
-      <Box
-        sx={{
-          display: 'inline-flex',
-          flexWrap: 'wrap',
-          maxWidth: 450,
-          gap:2,
-          m:2,
-          justifyContent:'space-around',
-        }}>
-          {foodItems}
-        </Box>
-    )
-  }
+    return <Item key={key} {...item} />;
+  });
 
   return (
     <Dialog
+      fullScreen
       open={ifSearched}
       onClose={closeModal}
       aria-labelledby="search results"
       aria-describedby="the results of your search are shown here"
-      onClick={closeModal}
+      TransitionComponent={Transition}
     >
+      <Stack direction="row">
+        <IconButton
+          sx={{ m: 2, ml: "auto" }}
+          edge="start"
+          color="inherit"
+          onClick={closeModal}
+          aria-label="close"
+        >
+          <Close />
+        </IconButton>
+      </Stack>
       {searchResults.length === 0 ? (
-        <Box sx={{ p:2 }}>
+        <Box sx={{ p: 2 }}>
           <Typography variant="h6">ITEM NOT FOUND</Typography>
         </Box>
       ) : (
-        <Grid>
-          {renderResults(foodItems)}
-        </Grid>
+        <Stack
+          py={4}
+          flexGrow={1}
+          direction="row"
+          flexWrap="wrap"
+          justifyContent="space-between"
+          gap={1.5}
+          maxWidth={1024}
+          width="100%"
+          mx="auto"
+        >
+          {foodItems}
+        </Stack>
       )}
     </Dialog>
   );