From 037de93e65d05dcb64bf177512ddd0cd507695fb Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Mon, 26 Oct 2020 20:41:01 -0300 Subject: [PATCH 1/5] test improvements --- .../ProductCard/ProductCard.module.css | 19 +++++++------------ pages/index.tsx | 4 ++-- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 171190df0..a289cc1df 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -1,5 +1,6 @@ .root { - @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer; + @apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer; + height: 100% !important; &:hover { & .squareBg:before { @@ -119,17 +120,11 @@ } .wishlistButton { - @apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer; + @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer; } -.imageContainer { - @apply absolute z-10 inset-0 flex items-center justify-center; - - & > div { - @apply h-full; - & > div { - @apply h-full; - padding-bottom: 0 !important; - } - } +.product-image { + position: absolute; + width: 100%; + height: 100%; } diff --git a/pages/index.tsx b/pages/index.tsx index 5304f691e..44a93c1d7 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -80,8 +80,8 @@ export default function Home({ key={node.path} product={node} // The first image is the largest one in the grid - imgWidth={i === 0 ? '65vw' : '30vw'} - imgHeight={i === 0 ? '45vw' : '22vw'} + imgWidth={i === 0 ? 1600 : 820} + imgHeight={i === 0 ? 1600 : 820} priority /> ))} From 695a446314401722d2b0b4e70b94cf98549a8f78 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Mon, 26 Oct 2020 21:01:00 -0300 Subject: [PATCH 2/5] improve image component styles --- .../EnhancedImage/EnhancedImage.module.css | 14 +++++++++++++ .../core/EnhancedImage/EnhancedImage.tsx | 3 ++- .../ProductCard/ProductCard.module.css | 6 ------ .../product/ProductCard/ProductCard.tsx | 20 +++++++++---------- 4 files changed, 25 insertions(+), 18 deletions(-) create mode 100644 components/core/EnhancedImage/EnhancedImage.module.css diff --git a/components/core/EnhancedImage/EnhancedImage.module.css b/components/core/EnhancedImage/EnhancedImage.module.css new file mode 100644 index 000000000..9caafc3be --- /dev/null +++ b/components/core/EnhancedImage/EnhancedImage.module.css @@ -0,0 +1,14 @@ +.root { + @apply transform transition-transform duration-500; + height: 100%; + margin: auto; + + &:hover { + transform: scale(1.05); + } + + & div { + height: 100%; + margin: auto; + } +} diff --git a/components/core/EnhancedImage/EnhancedImage.tsx b/components/core/EnhancedImage/EnhancedImage.tsx index 3ff97224b..ceae4918b 100644 --- a/components/core/EnhancedImage/EnhancedImage.tsx +++ b/components/core/EnhancedImage/EnhancedImage.tsx @@ -1,6 +1,7 @@ import { FC } from 'react' import { useInView } from 'react-intersection-observer' import Image from 'next/image' +import s from './EnhancedImage.module.css' type Props = Omit< JSX.IntrinsicElements['img'], @@ -33,7 +34,7 @@ const EnhancedImage: FC = ({ }) return ( -
+
) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index a289cc1df..1276a7c0b 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -122,9 +122,3 @@ .wishlistButton { @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer; } - -.product-image { - position: absolute; - width: 100%; - height: 100%; -} diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index d48c5b4cf..3f46534d1 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -70,17 +70,15 @@ const ProductCard: FC = ({ variant={p.variants.edges?.[0]!} />
-
- -
+ ) From 78238c7061e0ad2076990c65bda8ce59d4cd0f08 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Mon, 26 Oct 2020 21:13:58 -0300 Subject: [PATCH 3/5] fix nested css --- .../HomeAllProductsGrid.module.css | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css index 464087ebc..ec2f8ea49 100644 --- a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css +++ b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css @@ -4,20 +4,20 @@ @screen md { @apply flex-row; } -} -.asideWrapper { - @apply pr-3 w-full relative; + & .asideWrapper { + @apply pr-3 w-full relative; - @screen md { - @apply w-48; - } -} - -.aside { - @apply flex flex-row w-full justify-around mb-12; - - @screen md { - @apply mb-0 block sticky top-32; + @screen md { + @apply w-48; + } + } + + & .aside { + @apply flex flex-row w-full justify-around mb-12; + + @screen md { + @apply mb-0 block sticky top-32; + } } } From 0478b43e9ce3eee7bd75279269f91d3c0487195a Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Mon, 26 Oct 2020 21:45:39 -0300 Subject: [PATCH 4/5] improve the images --- .../core/EnhancedImage/EnhancedImage.module.css | 14 -------------- components/core/EnhancedImage/EnhancedImage.tsx | 3 +-- .../product/ProductCard/ProductCard.module.css | 8 ++++++++ components/product/ProductCard/ProductCard.tsx | 2 +- 4 files changed, 10 insertions(+), 17 deletions(-) delete mode 100644 components/core/EnhancedImage/EnhancedImage.module.css diff --git a/components/core/EnhancedImage/EnhancedImage.module.css b/components/core/EnhancedImage/EnhancedImage.module.css deleted file mode 100644 index 9caafc3be..000000000 --- a/components/core/EnhancedImage/EnhancedImage.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.root { - @apply transform transition-transform duration-500; - height: 100%; - margin: auto; - - &:hover { - transform: scale(1.05); - } - - & div { - height: 100%; - margin: auto; - } -} diff --git a/components/core/EnhancedImage/EnhancedImage.tsx b/components/core/EnhancedImage/EnhancedImage.tsx index ceae4918b..3ff97224b 100644 --- a/components/core/EnhancedImage/EnhancedImage.tsx +++ b/components/core/EnhancedImage/EnhancedImage.tsx @@ -1,7 +1,6 @@ import { FC } from 'react' import { useInView } from 'react-intersection-observer' import Image from 'next/image' -import s from './EnhancedImage.module.css' type Props = Omit< JSX.IntrinsicElements['img'], @@ -34,7 +33,7 @@ const EnhancedImage: FC = ({ }) return ( -
+
) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 1276a7c0b..412721464 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -122,3 +122,11 @@ .wishlistButton { @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer; } + +.product-image { + margin: auto; + + & div { + margin: auto; + } +} diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index e1a0a3d91..3243e8261 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -72,7 +72,7 @@ const ProductCard: FC = ({
Date: Mon, 26 Oct 2020 21:52:36 -0300 Subject: [PATCH 5/5] make the images bigger --- .../ProductCard/ProductCard.module.css | 16 ++++++++++----- .../product/ProductCard/ProductCard.tsx | 20 ++++++++++--------- 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 412721464..0c8dd1c04 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -123,10 +123,16 @@ @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer; } -.product-image { - margin: auto; - - & div { - margin: auto; +.imageContainer { + & > div { + & > div { + height: 100%; + margin: 0 auto; + } } } + +.product-image { + height: 120% !important; + top: -10% !important; +} diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 3243e8261..808e37063 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -70,15 +70,17 @@ const ProductCard: FC = ({ variant={p.variants.edges?.[0]!} /> - +
+ +
)