Merge branch 'master' of https://github.com/okbel/e-comm-example

assets/global.css

@@ -59,7 +59,7 @@
 }
 
 .fit {
-  min-height: calc(100vh - 300px);
+  min-height: calc(100vh - 88px - 41px);
 }
 
 *,

components/core/Footer/Footer.tsx

@@ -22,10 +22,6 @@ const Footer: FC<Props> = ({ className, pages }) => {
 
   return (
     <div className="bg-black text-white">
-      <hr
-        className="hidden md:block mt-4 border-gray-700"
-        style={{ flexBasis: '100%', height: 0 }}
-      />
       <footer className={rootClassName}>
         <Link href="/">
           <a className="flex flex-initial items-center md:items-start font-bold md:mr-24">

components/core/Navbar/Navbar.tsx

@@ -20,7 +20,7 @@ const Navbar: FC<Props> = ({ className }) => {
               <Logo />
             </a>
           </Link>
-          <nav className="space-x-4 ml-6 hidden md:block">
+          <nav className="space-x-4 ml-6 sm:hidden lg:block">
             <Link href="/">
               <a className={s.link}>All</a>
             </Link>
@@ -33,11 +33,11 @@ const Navbar: FC<Props> = ({ className }) => {
           </nav>
         </div>
 
-        <div className="md:flex flex-1 justify-center hidden">
+        <div className="lg:flex flex-1 justify-center sm:hidden">
           <Searchbar />
         </div>
 
-        <div className="flex flex-initial md:flex-1 justify-end space-x-8">
+        <div className="flex flex-1 justify-end space-x-8">
           <Toggle
             checked={theme === 'dark'}
             onChange={() =>
@@ -47,7 +47,8 @@ const Navbar: FC<Props> = ({ className }) => {
           <UserNav />
         </div>
       </div>
-      <div className="block flex pb-4 md:hidden px-4 md:px-6">
+
+      <div className="sm:flex pb-4 lg:px-6 lg:hidden">
         <Searchbar />
       </div>
     </div>

components/product/ProductSlider/ProductSlider.module.css

@@ -1,9 +1,14 @@
 .root {
   @apply relative w-full h-full;
+  overflow-y: hidden;
+
+  & > div {
+    overflow: visible !important;
+  }
 }
 
 .rootPanel {
-  @apply absolute flex flex-row inset-0 z-20 overflow-hidden;
+  @apply absolute flex flex-row inset-0 z-20 m-20;
 }
 
 .leftPanel {

components/product/ProductSlider/ProductSlider.tsx

@@ -19,13 +19,18 @@ const ProductSlider: FC<Props> = ({ children }) => {
 
   return (
     <div className={s.root}>
+      <SwipeableViews
+        index={idx}
+        onChangeIndex={setIdx}
+        containerStyle={{ overflow: 'visible' }}
+        slideStyle={{ overflow: 'visible' }}
+      >
+        {children}
+      </SwipeableViews>
       <div className={s.rootPanel}>
         <div className={s.leftPanel} onClick={goBack}></div>
         <div className={s.rightPanel} onClick={goNext}></div>
       </div>
-      <SwipeableViews index={idx} onChangeIndex={setIdx}>
-        {children}
-      </SwipeableViews>
     </div>
   )
 }

components/product/ProductView/ProductView.module.css

@@ -1,30 +1,40 @@
 .root {
-  @apply relative grid items-start my-12 gap-8 grid-cols-1;
+  @apply relative grid items-start gap-8 grid-cols-1;
 
-  @screen md {
-    @apply grid-cols-12;
+  @screen lg {
+    @apply grid-cols-12 pt-10;
   }
 }
 
-.button {
-  min-width: 300px;
-  text-align: center;
-}
-
 .productDisplay {
-  @apply flex px-0 pb-0 relative box-border min-h-full col-span-7;
+  @apply relative flex px-0 pb-0 relative box-border col-span-7;
   margin-right: -2rem;
   margin-left: -2rem;
-
   min-height: 400px;
 
   @screen md {
-    @apply px-24 mx-0;
+    min-height: 700px;
+  }
+
+  @screen lg {
+    @apply mx-0;
+    min-height: 100%;
+    height: 100%;
+  }
+}
+
+.squareBg {
+  @apply absolute inset-0 bg-violet z-0;
+  max-height: 250px;
+
+  @screen md {
+    @apply inset-20;
+    max-height: 500px;
   }
 }
 
 .nameBox {
-  @apply absolute top-0 left-0 z-50;
+  @apply absolute top-6 left-0 z-50;
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold text-3xl;
@@ -42,33 +52,38 @@
   }
 }
 
-.squareBg {
-  @apply absolute inset-0 bg-violet z-0;
-  max-height: 250px;
-
-  @screen md {
-    @apply inset-14;
-    min-height: 100%;
-  }
-}
-
 .sidebar {
-  @apply flex flex-col md:pt-24 col-span-5;
+  @apply flex flex-col col-span-5;
+
+  @screen lg {
+    padding-top: 5rem;
+  }
 }
 
 .sliderContainer {
-  @apply absolute z-10 inset-0 flex items-center justify-center;
-
-  @screen lg {
-    @apply -m-12;
-  }
+  @apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
 }
 
 .img {
-  @apply w-full object-cover;
+  @apply w-full h-full object-cover;
+
+  @screen md {
+    height: 100%;
+    margin-top: -2.75rem;
+  }
+
+  @screen lg {
+    height: 150%;
+    margin-top: -10%;
+  }
 
   @screen xl {
-    margin-top: -14%;
-    height: 140%;
+    height: 170%;
+    margin-top: -19%;
   }
 }
+
+.button {
+  min-width: 300px;
+  text-align: center;
+}

components/product/ProductView/ProductView.tsx

@@ -65,7 +65,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
         }}
       />
       <div className={cn(s.root, 'fit')}>
-        <div className={s.productDisplay}>
+        <div className={cn(s.productDisplay, 'fit')}>
           <div className={s.squareBg}></div>
           <div className={s.nameBox}>
             <h1 className={s.name}>{product.name}</h1>

components/ui/Sidebar/Sidebar.tsx

@@ -52,7 +52,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                 leaveTo="opacity-0"
               >
                 <div
-                  className="absolute inset-0 bg-black bg-opacity-25 transition-opacity"
+                  className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
                   // Close the sidebar when clicking on the backdrop
                   onClick={close}
                 />

pages/_app.tsx

@@ -1,7 +1,10 @@
 import '@assets/global.css'
 import '@assets/tailwind.css'
 import '@assets/utils.css'
+
+// To be removed
 import 'animate.css'
+
 import { FC } from 'react'
 import type { AppProps } from 'next/app'
 

tailwind.config.js

@@ -3,11 +3,7 @@ module.exports = {
     removeDeprecatedGapUtilities: true,
     purgeLayersByDefault: true,
   },
-  purge: [
-    './components/**/*.{js,ts,jsx,tsx}',
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './ui/**/*.{js,ts,jsx,tsx}',
-  ],
+  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       backgroundOpacity: {