Fix: Handle Extra wide images

README.md

@@ -2,7 +2,7 @@
 It is an e-commerce website that serves as a product catalogue for a manufacturing firm.  
 
 [![Status](https://img.shields.io/badge/Status-Development-blue.svg)](https://shields.io/)
-
+[![Netlify Status](https://api.netlify.com/api/v1/badges/977de8e9-c3d6-4382-a7b6-61101caa691f/deploy-status)](https://app.netlify.com/sites/ecstatic-engelbart-5878f6/deploys)
 
 
 <br />

gatsby-ssr.js

@@ -6,13 +6,3 @@ import TopLayout from "./plugins/gatsby-plugin-top-layout/TopLayout";
 export const wrapRootElement = ({ element }) => {
   return <TopLayout>{element}</TopLayout>;
 };
-
-export const onRouteUpdate = ({ location }) => {
-  if (location.hash) {
-    setTimeout(() => {
-      document
-        .querySelector(`${location.hash}`)
-        .scrollIntoView({ behavior: "smooth", block: "center" });
-    }, 0);
-  }
-};

src/containers/landing/sections/ProductsSection.js

@@ -141,6 +141,8 @@ const useCardStyles = makeStyles(theme => ({
 
   cardImage: {
     height: "200px",
+    objectFit: "contain",
+    maxWidth: props => (props.category === "Nut" ? "150px" : "220px"),
     position: "absolute",
     top: "50%",
     left: "50%",
@@ -164,7 +166,7 @@ const useCardStyles = makeStyles(theme => ({
 // done: make it flexible for inverted theme as well
 // todo: add default images for each category
 const SingleProduct = ({ data, variant }) => {
-  const classes = useCardStyles({ variant });
+  const classes = useCardStyles({ variant, category: data.category.name });
   // console.log({ classes });
   // console.log({ data });
   // check if image is present ?
@@ -178,7 +180,6 @@ const SingleProduct = ({ data, variant }) => {
 
   return (
     <Box className={classes.cardContainer} onClick={handleProductCardClick}>
-      >
       <Box className={classes.card}>
         <img src={image} className={classes.cardImage} alt={data.name} />
       </Box>
@@ -233,10 +234,6 @@ const ProductsSection = () => {
             quantityUnit {
               unit
             }
-            shape {
-              name
-            }
-            whole
           }
         }
       }

src/containers/single-product-category/sections/ProductListingSection.js

@@ -69,6 +69,8 @@ const useCardStyles = makeStyles(theme => ({
     left: "50%",
     transform: "translate(-50%, -50%)",
     transition: "transform 0.3s ease-out",
+    objectFit: "contain",
+    maxWidth: props => (props.category === "Nut" ? "150px" : "200px"),
   },
   name: {
     color: props =>
@@ -87,7 +89,7 @@ const useCardStyles = makeStyles(theme => ({
 // todo: make it flexible for inverted theme as well
 // todo: add default images for each category
 const SingleProduct = ({ data, variant }) => {
-  const classes = useCardStyles({ variant });
+  const classes = useCardStyles({ variant, category: data.category.name });
   // console.log({ classes });
   // console.log({ data });
   // check if image is present ?

src/containers/single-product/sections/ProductDetails.js

@@ -49,8 +49,12 @@ const useStyles = makeStyles(theme => ({
     top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)",
+    objectFit: "contain",
+    maxWidth: props => (props.category === "Nut" ? "270px" : "320px"),
+
     [theme.breakpoints.up("lg")]: {
       height: "400px",
+      maxWidth: props => (props.category === "Nut" ? "350px" : "420px"),
     },
   },
   card: {
@@ -125,7 +129,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const ProductDetails = ({ product }) => {
-  const classes = useStyles();
+  const classes = useStyles({ category: product.category.name });
   const theme = useTheme();
   const isMediumAndBiggerDevices = useMediaQuery(theme.breakpoints.up("md"));
 

src/pages/products/{contentfulProduct.category__name}/{contentfulProduct.slug}/index.js

@@ -47,10 +47,6 @@ export const query = graphql`
       quantityUnit {
         unit
       }
-      shape {
-        name
-      }
-      whole
       packagingQuantity
     }
   }