From e10479aecda9256c1e0ef5073b36fc2dc6c45545 Mon Sep 17 00:00:00 2001
From: GFier <guido@studiofreight.com>
Date: Wed, 3 Apr 2024 11:14:35 +0100
Subject: [PATCH] mobile styles

---
 .../(components)/product/product.module.scss  |  42 ++++--
 .../(component)/tutorial/tutorial.module.scss |   9 +-
 app/(pages)/storyblok/storyblok.module.scss   |   4 +
 libs/shopify/cart/modal/index.js              |  20 +--
 libs/shopify/cart/modal/modal.module.scss     | 140 ++++++++++++++----
 5 files changed, 164 insertions(+), 51 deletions(-)

diff --git a/app/(pages)/shopify/(components)/product/product.module.scss b/app/(pages)/shopify/(components)/product/product.module.scss
index f8e0ba58..dca1ac83 100644
--- a/app/(pages)/shopify/(components)/product/product.module.scss
+++ b/app/(pages)/shopify/(components)/product/product.module.scss
@@ -1,35 +1,59 @@
 .product {
   margin: auto;
-  height: 50vh;
   align-items: center;
   justify-items: center;
 
+  @include desktop {
+    height: 50vh;
+  }
+
+  @include mobile {
+    margin-top: mobile-vw(150px);
+  }
+
   .details {
-    grid-column: 4/-4;
+    grid-column: 1/-1;
     display: flex;
     flex-direction: column;
-    gap: desktop-vw(16px);
+    gap: mobile-vw(16px);
     text-align: center;
-    margin-bottom: desktop-vw(16px);
+    margin-bottom: mobile-vw(16px);
+
+    @include desktop {
+      grid-column: 4/-4;
+      gap: desktop-vw(16px);
+      margin-bottom: desktop-vw(16px);
+    }
   }
 
   .media {
     position: relative;
-    grid-column: 3/-3;
+    grid-column: 1/-1;
     aspect-ratio: 341/1404;
-    height: 50vh;
+    height: 40vh;
+
+    @include desktop {
+      grid-column: 3/-3;
+      height: 50vh;
+    }
   }
 
   .add {
     position: relative;
-    grid-column: 4/-4;
+    grid-column: 1/-1;
     display: flex;
     border: 2px solid var(--black);
-    padding: desktop-vw(16px);
-    border-radius: desktop-vw(8px);
+    padding: mobile-vw(16px);
+    border-radius: mobile-vw(8px);
     overflow: hidden;
     cursor: pointer;
 
+    @include desktop {
+      grid-column: 4/-4;
+      padding: desktop-vw(16px);
+      border-radius: desktop-vw(8px);
+    }
+
     &::before {
       content: '';
       position: absolute;
diff --git a/app/(pages)/storyblok/(component)/tutorial/tutorial.module.scss b/app/(pages)/storyblok/(component)/tutorial/tutorial.module.scss
index 2d7c1d53..ee43bad8 100644
--- a/app/(pages)/storyblok/(component)/tutorial/tutorial.module.scss
+++ b/app/(pages)/storyblok/(component)/tutorial/tutorial.module.scss
@@ -14,9 +14,14 @@
   }
 
   code {
-    padding: desktop-vw(8px);
+    padding: mobile-vw(8px);
     border: 1px solid var(--theme-secondary);
-    border-radius: desktop-vw(8px);
+    border-radius: mobile-vw(8px);
     display: inline-block;
+
+    @include desktop {
+      padding: desktop-vw(8px);
+      border-radius: desktop-vw(8px);
+    }
   }
 }
diff --git a/app/(pages)/storyblok/storyblok.module.scss b/app/(pages)/storyblok/storyblok.module.scss
index 8a2f7e75..8256d1b0 100644
--- a/app/(pages)/storyblok/storyblok.module.scss
+++ b/app/(pages)/storyblok/storyblok.module.scss
@@ -7,5 +7,9 @@
     align-items: center;
     justify-content: center;
     flex-grow: 1;
+
+    @include mobile {
+      padding: 0 mobile-vw(16px);
+    }
   }
 }
diff --git a/libs/shopify/cart/modal/index.js b/libs/shopify/cart/modal/index.js
index 9c5e932e..5125731c 100644
--- a/libs/shopify/cart/modal/index.js
+++ b/libs/shopify/cart/modal/index.js
@@ -36,15 +36,13 @@ export function CartModal({ children, cart }) {
 }
 
 function EmptyCart() {
-  return <p className={cn('p-l', s.heading)}>your cart is empty</p>
+  return <p className={s.heading}>your cart is empty</p>
 }
 
 function InnerCart({ cart }) {
-  console.log(cart)
-
   return (
     <>
-      <p className={cn('p-l', s.heading)}>your cart</p>
+      <p className={s.heading}>your cart</p>
       <div className={s.lines} data-lenis-prevent>
         {cart?.lines?.map(({ id, merchandise, cost, quantity }, idx) => (
           <div className={s.line} key={`${idx}-${id}`}>
@@ -58,14 +56,12 @@ function InnerCart({ cart }) {
             </div>
             <div className={s.info}>
               <div className={s.details}>
-                <p className={cn('p-s', s.title)}>
-                  {merchandise?.product?.title}
-                </p>
-                <p className={cn('p-xs', s.description)}>
+                <p className={s.title}>{merchandise?.product?.title}</p>
+                <p className={s.description}>
                   {merchandise?.product?.description}
                 </p>
               </div>
-              <p className="p-s">$ {cost?.totalAmount?.amount}</p>
+              <p className={s.price}>$ {cost?.totalAmount?.amount}</p>
             </div>
             <Quantity
               className={s.quantity}
@@ -80,7 +76,7 @@ function InnerCart({ cart }) {
         ))}
       </div>
       <div className={s.checkout}>
-        <div className={cn('p-s', s.top)}>
+        <div className={s.top}>
           <p>sub total</p>
           <p>$ {cart?.cost?.subtotalAmount?.amount}</p>
         </div>
@@ -111,7 +107,7 @@ function Quantity({ className, payload }) {
   return (
     <div className={className}>
       <QuantityButton formAction={() => formAction(-1)}>-</QuantityButton>
-      <span className="p-xs">{quantity}</span>
+      <span>{quantity}</span>
       <QuantityButton formAction={() => formAction(1)}>+</QuantityButton>
     </div>
   )
@@ -149,7 +145,7 @@ function ActionButton({ children, className }) {
           e.preventDefault()
         }
       }}
-      className={cn('p-s', pending && s.disable, className)}
+      className={cn(pending && s.disable, className)}
     >
       {children}
     </button>
diff --git a/libs/shopify/cart/modal/modal.module.scss b/libs/shopify/cart/modal/modal.module.scss
index 400024a3..57459ae9 100644
--- a/libs/shopify/cart/modal/modal.module.scss
+++ b/libs/shopify/cart/modal/modal.module.scss
@@ -30,9 +30,10 @@
 
 .inner {
   position: relative;
-  left: 50%;
-  width: 50%;
+  left: 25%;
+  width: 75%;
   height: 100%;
+  padding: mobile-vw(12px);
   background-color: var(--black);
   color: var(--red);
   display: flex;
@@ -40,27 +41,32 @@
   text-transform: uppercase;
   transition: 800ms transform var(--gleasing);
 
-  .heading {
-    padding-bottom: desktop-vw(16px);
-    border-bottom: 1px solid var(--red);
-  }
-
   @include desktop {
+    width: 50%;
+    left: 50%;
     padding: desktop-vw(8px);
     padding-top: desktop-vw(56px);
   }
+
+  .heading {
+    border-bottom: 1px solid var(--red);
+    padding-bottom: mobile-vw(16px);
+
+    @include desktop {
+      padding-bottom: desktop-vw(16px);
+    }
+  }
 }
 
 .close {
   position: absolute;
-  right: desktop-vw(8px);
-  top: desktop-vw(8px);
-  padding: mobile-vw(7px) mobile-vw(8px);
-  border-radius: mobile-vw(2px);
+  right: mobile-vw(12px);
+  top: mobile-vw(12px);
 
   @include desktop {
-    padding: desktop-vw(7px) desktop-vw(8px);
-    border-radius: desktop-vw(2px);
+    position: absolute;
+    right: desktop-vw(8px);
+    top: desktop-vw(8px);
   }
 
   &.active {
@@ -72,57 +78,103 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  max-height: desktop-vw(600px);
   overflow: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
 
+  @include desktop {
+    max-height: desktop-vw(600px);
+  }
+
   .line {
     display: grid;
     grid-template-columns: repeat(6, minmax(0, 1fr));
     grid-gap: var(--layout-columns-gap);
-    padding: desktop-vw(16px) 0;
+    padding: mobile-vw(16px) 0;
     border-bottom: 1px solid var(--red);
 
+    @include desktop {
+      padding: desktop-vw(16px) 0;
+    }
+
     .media {
       position: relative;
-      grid-column: 1/2;
+      grid-column: 1/4;
       width: 100%;
-      height: desktop-vw(250px);
-      aspect-ratio: 341/1404;
+      height: mobile-vw(150px);
+
+      img {
+        height: 100%;
+        object-fit: contain !important;
+      }
+
+      @include desktop {
+        grid-column: 1/2;
+        height: desktop-vw(250px);
+      }
     }
 
     .info {
-      grid-column: 2/5;
+      grid-column: 4/-1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      padding-left: desktop-vw(8px);
+
+      @include desktop {
+        grid-column: 2/5;
+        padding-left: desktop-vw(8px);
+      }
 
       .details {
         display: flex;
         flex-direction: column;
+
+        @include mobile {
+          font-size: mobile-vw(10px);
+        }
+
         .title {
           margin-bottom: desktop-vw(8px);
         }
 
         .description {
-          width: desktop-vw(308px);
           @extend .ellipsis;
+
+          @include desktop {
+            width: desktop-vw(308px);
+          }
+        }
+      }
+
+      .price {
+        @include mobile {
+          align-self: flex-end;
         }
       }
     }
 
     .quantity {
-      grid-column: 5/6;
+      grid-column: 4/-1;
       display: flex;
       align-items: center;
       width: fit-content;
       height: fit-content;
-      border-radius: desktop-vw(100px);
+      border-radius: mobile-vw(100px);
       background-color: var(--red);
       color: var(--black);
-      padding: desktop-vw(7px) desktop-vw(16px);
+      padding: mobile-vw(8px) mobile-vw(16px);
+
+      @include mobile {
+        grid-row: 2;
+        justify-self: flex-end;
+        font-size: mobile-vw(12px);
+      }
+
+      @include desktop {
+        grid-column: 5/6;
+        border-radius: desktop-vw(100px);
+        padding: desktop-vw(7px) desktop-vw(16px);
+      }
 
       button {
         &.disable {
@@ -132,14 +184,23 @@
       }
 
       span {
-        padding: 0 desktop-vw(16px);
+        padding: 0 mobile-vw(8px);
+
+        @include desktop {
+          padding: 0 desktop-vw(16px);
+        }
       }
     }
 
     .remove {
-      grid-column: 6/-1;
-      align-self: flex-start;
-      justify-self: flex-end;
+      grid-column: 1/4;
+      align-self: flex-end;
+
+      @include desktop {
+        grid-column: 6/-1;
+        justify-self: flex-end;
+        align-self: flex-start;
+      }
 
       button {
         &.disable {
@@ -152,10 +213,29 @@
 }
 
 .checkout {
+  position: relative;
   width: 100%;
   align-self: flex-end;
 
+  &::before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: desktop-vw(-50px);
+    background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 1) 55%,
+      rgba(12, 0, 36, 0) 100%
+    );
+
+    @include mobile {
+      top: mobile-vw(-50px);
+    }
+  }
+
   .top {
+    position: relative;
     display: flex;
     justify-content: space-between;
     margin-bottom: desktop-vw(16px);
@@ -206,4 +286,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;
+
+  @include mobile {
+    -webkit-line-clamp: 8;
+  }
 }