From 58385dc491da2621dab917551ecba89c8f69f1b6 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Mon, 26 Oct 2020 18:28:09 -0300 Subject: [PATCH 1/2] improve the grid on mobile a bit --- components/product/ProductSlider/ProductSlider.module.css | 3 ++- pages/index.tsx | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css index c07228d0b..5ad48cc3d 100644 --- a/components/product/ProductSlider/ProductSlider.module.css +++ b/components/product/ProductSlider/ProductSlider.module.css @@ -48,7 +48,8 @@ @apply hidden; @screen sm { - @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform; + @apply block absolute bottom-6 left-1/2; + transform: translateX(-50%); } } diff --git a/pages/index.tsx b/pages/index.tsx index 44a93c1d7..9f374253b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -129,9 +129,9 @@ export default function Home({ /> ))} -
-
-
+
+
+
  • From 411c6b8d230ad2a0f09da0e2682011b79a5b601a Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Mon, 26 Oct 2020 20:02:29 -0300 Subject: [PATCH 2/2] componentize the homepage grid --- .../HomeAllProductsGrid.module.css | 23 +++++++ .../HomeAllProductsGrid.tsx | 66 +++++++++++++++++++ components/core/HomeAllProductsGrid/index.ts | 1 + pages/index.tsx | 55 ++-------------- 4 files changed, 96 insertions(+), 49 deletions(-) create mode 100644 components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css create mode 100644 components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx create mode 100644 components/core/HomeAllProductsGrid/index.ts diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css new file mode 100644 index 000000000..464087ebc --- /dev/null +++ b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css @@ -0,0 +1,23 @@ +.root { + @apply py-12 flex flex-col w-full px-6; + + @screen md { + @apply flex-row; + } +} + +.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; + } +} diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx new file mode 100644 index 000000000..fc58486cd --- /dev/null +++ b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx @@ -0,0 +1,66 @@ +import { FC } from 'react' +import Link from 'next/link' +import { getCategoryPath, getDesignerPath } from '@utils/search' +import { Grid } from '@components/ui' +import { ProductCard } from '@components/product' +import s from './HomeAllProductsGrid.module.css' + +interface Props { + categories?: any + brands?: any + newestProducts?: any +} + +const Head: FC = ({ categories, brands, newestProducts }) => { + return ( +
    +
    +
    + + +
    +
    +
    + + {newestProducts.map(({ node }: any) => ( + + ))} + +
    +
    + ) +} + +export default Head diff --git a/components/core/HomeAllProductsGrid/index.ts b/components/core/HomeAllProductsGrid/index.ts new file mode 100644 index 000000000..31d313d16 --- /dev/null +++ b/components/core/HomeAllProductsGrid/index.ts @@ -0,0 +1 @@ +export { default } from './HomeAllProductsGrid' diff --git a/pages/index.tsx b/pages/index.tsx index 64443f536..48777bea5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -5,11 +5,10 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products' import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info' import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages' import rangeMap from '@lib/range-map' -import { getCategoryPath, getDesignerPath } from '@utils/search' import { Layout } from '@components/core' import { Grid, Marquee, Hero } from '@components/ui' import { ProductCard } from '@components/product' -import Link from 'next/link' +import HomeAllProductsGrid from '@components/core/HomeAllProductsGrid' export async function getStaticProps({ preview, @@ -129,53 +128,11 @@ export default function Home({ /> ))} -
    -
    -
    - - -
    -
    -
    - - {newestProducts.map(({ node }) => ( - - ))} - -
    -
    +
) }