Merge pull request vercel#13 from okbel/arzafran/responsive-bottom-grid

Improve the grid on mobile a bit
THEWWWTHING-MANAGEMENT · Oct 26, 2020 · 3812c13 · 3812c13
2 parents 364ef33 + 411c6b8
commit 3812c13
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 50 deletions.
diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css 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
@@ -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<Props> = ({ categories, brands, newestProducts }) => {
+  return (
+    <div className={s.root}>
+      <div className={s.asideWrapper}>
+        <div className={s.aside}>
+          <ul className="mb-10">
+            <li className="py-1 text-base font-bold tracking-wide">
+              <Link href={getCategoryPath('')}>
+                <a>All Categories</a>
+              </Link>
+            </li>
+            {categories.map((cat: any) => (
+              <li key={cat.path} className="py-1 text-accents-8">
+                <Link href={getCategoryPath(cat.path)}>
+                  <a>{cat.name}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <ul className="">
+            <li className="py-1 text-base font-bold tracking-wide">
+              <Link href={getDesignerPath('')}>
+                <a>All Designers</a>
+              </Link>
+            </li>
+            {brands.flatMap(({ node }: any) => (
+              <li key={node.path} className="py-1 text-accents-8">
+                <Link href={getDesignerPath(node.path)}>
+                  <a>{node.name}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div className="flex-1">
+        <Grid layout="normal">
+          {newestProducts.map(({ node }: any) => (
+            <ProductCard
+              key={node.path}
+              product={node}
+              variant="simple"
+              imgWidth={480}
+              imgHeight={480}
+            />
+          ))}
+        </Grid>
+      </div>
+    </div>
+  )
+}
+
+export default Head
diff --git a/components/core/HomeAllProductsGrid/index.ts b/components/core/HomeAllProductsGrid/index.ts
@@ -0,0 +1 @@
+export { default } from './HomeAllProductsGrid'
diff --git 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
@@ -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({
           />
         ))}
       </Marquee>
-      <div className="py-12 flex flex-row w-full px-6">
-        <div className="pr-3 w-48 relative">
-          <div className="sticky top-32">
-            <ul className="mb-10">
-              <li className="py-1 text-base font-bold tracking-wide">
-                <Link href={getCategoryPath('')}>
-                  <a>All Categories</a>
-                </Link>
-              </li>
-              {categories.map((cat) => (
-                <li key={cat.path} className="py-1 text-accents-8">
-                  <Link href={getCategoryPath(cat.path)}>
-                    <a>{cat.name}</a>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-            <ul className="">
-              <li className="py-1 text-base font-bold tracking-wide">
-                <Link href={getDesignerPath('')}>
-                  <a>All Designers</a>
-                </Link>
-              </li>
-              {brands.flatMap(({ node }) => (
-                <li key={node.path} className="py-1 text-accents-8">
-                  <Link href={getDesignerPath(node.path)}>
-                    <a>{node.name}</a>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-        <div className="flex-1">
-          <Grid layout="normal">
-            {newestProducts.map(({ node }) => (
-              <ProductCard
-                key={node.path}
-                product={node}
-                variant="simple"
-                imgWidth={480}
-                imgHeight={480}
-              />
-            ))}
-          </Grid>
-        </div>
-      </div>
+      <HomeAllProductsGrid
+        categories={categories}
+        brands={brands}
+        newestProducts={newestProducts}
+      />
     </div>
   )
 }