From fd6619e6ef55b52751c09b1b58be7d1fcd100fde Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 20 Oct 2020 15:46:53 -0300
Subject: [PATCH] More size for Product View

---
 assets/global.css                             |  2 +-
 components/core/Footer/Footer.tsx             |  4 -
 components/core/Navbar/Navbar.tsx             | 10 +--
 .../ProductSlider/ProductSlider.module.css    |  7 +-
 .../product/ProductSlider/ProductSlider.tsx   | 11 ++-
 .../ProductView/ProductView.module.css        | 75 +++++++++++--------
 .../product/ProductView/ProductView.tsx       |  2 +-
 7 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/assets/global.css b/assets/global.css
index bde37971d..4d3d23402 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -59,7 +59,7 @@
 }
 
 .fit {
-  min-height: calc(100vh - 300px);
+  min-height: calc(100vh - 88px - 41px);
 }
 
 *,
diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index bf31d6128..55f855429 100644
--- a/components/core/Footer/Footer.tsx
+++ b/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">
diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
index c549b3577..b3026a15b 100644
--- a/components/core/Navbar/Navbar.tsx
+++ b/components/core/Navbar/Navbar.tsx
@@ -13,14 +13,14 @@ const Navbar: FC<Props> = ({ className }) => {
   const { theme, setTheme } = useTheme()
   return (
     <div className={rootClassName}>
-      <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
+      <div className="flex justify-between align-center flex-row py-4 lg:py-6 relative">
         <div className="flex flex-1 items-center">
           <Link href="/">
             <a className="cursor-pointer">
               <Logo />
             </a>
           </Link>
-          <nav className="space-x-4 ml-6 hidden md:block">
+          <nav className="space-x-4 ml-6 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 hidden">
           <Searchbar />
         </div>
 
-        <div className="flex flex-initial md:flex-1 justify-end space-x-8">
+        <div className="flex flex-initial lg:flex-1 justify-end space-x-8">
           <Toggle
             checked={theme === 'dark'}
             onChange={() =>
@@ -47,7 +47,7 @@ const Navbar: FC<Props> = ({ className }) => {
           <UserNav />
         </div>
       </div>
-      <div className="block flex pb-4 md:hidden px-4 md:px-6">
+      <div className="block flex pb-4 lg:hidden px-4 lg:px-6">
         <Searchbar />
       </div>
     </div>
diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
index 299ff893f..5f076af16 100644
--- a/components/product/ProductSlider/ProductSlider.module.css
+++ b/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 {
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
index 9f9bf7666..77610e8c1 100644
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/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>
   )
 }
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index 9637d1e82..8ca415fc7 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/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 {
+  @screen lg {
     @apply grid-cols-12;
   }
 }
 
-.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;
+}
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 909352804..91747cd92 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/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>