From 6afb38fdb3504b96eebc6d0c649ca5ffbce9e7e2 Mon Sep 17 00:00:00 2001
From: Parmeet Singh <parmeet.asi@gmail.com>
Date: Wed, 2 Feb 2022 02:27:17 +0530
Subject: [PATCH] Fix: Handle Extra wide images

---
 README.md                                              |  2 +-
 gatsby-ssr.js                                          | 10 ----------
 src/containers/landing/sections/ProductsSection.js     |  9 +++------
 .../sections/ProductListingSection.js                  |  4 +++-
 .../single-product/sections/ProductDetails.js          |  6 +++++-
 .../{contentfulProduct.slug}/index.js                  |  4 ----
 6 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 09e5fe3..db14a03 100644
--- a/README.md
+++ b/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 />
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index c674c57..5023fbf 100644
--- a/gatsby-ssr.js
+++ b/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);
-  }
-};
diff --git a/src/containers/landing/sections/ProductsSection.js b/src/containers/landing/sections/ProductsSection.js
index c373291..9a0c044 100644
--- a/src/containers/landing/sections/ProductsSection.js
+++ b/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
           }
         }
       }
diff --git a/src/containers/single-product-category/sections/ProductListingSection.js b/src/containers/single-product-category/sections/ProductListingSection.js
index 958a803..35a79cb 100644
--- a/src/containers/single-product-category/sections/ProductListingSection.js
+++ b/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 ?
diff --git a/src/containers/single-product/sections/ProductDetails.js b/src/containers/single-product/sections/ProductDetails.js
index 45982d0..287cf4b 100644
--- a/src/containers/single-product/sections/ProductDetails.js
+++ b/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"));
 
diff --git a/src/pages/products/{contentfulProduct.category__name}/{contentfulProduct.slug}/index.js b/src/pages/products/{contentfulProduct.category__name}/{contentfulProduct.slug}/index.js
index c75bd2a..58bbbd7 100644
--- a/src/pages/products/{contentfulProduct.category__name}/{contentfulProduct.slug}/index.js
+++ b/src/pages/products/{contentfulProduct.category__name}/{contentfulProduct.slug}/index.js
@@ -47,10 +47,6 @@ export const query = graphql`
       quantityUnit {
         unit
       }
-      shape {
-        name
-      }
-      whole
       packagingQuantity
     }
   }