Merge pull request #133 from zackha/dev

feat: responsive cart and checkout

app/components/AppHeader.vue

@@ -207,7 +207,7 @@ onClickOutside(onClickOutsideRef, event => {
   </div>
   <button
     v-if="cartModal"
-    class="hover:bg-white/65 dark:hover:bg-white/10 transition shadow-2xl mt-4 mx-5 items-center justify-center min-w-12 min-h-12 rounded-[2rem] right-0 fixed flex z-50 bg-white/85 dark:bg-black/30 dark:border dark:border-white/10 cart-button-bezel backdrop-blur-lg">
+    class="hover:bg-white/65 dark:hover:bg-white/10 transition shadow-2xl mt-3 lg:mt-4 mx-3 lg:mx-5 items-center justify-center min-w-12 min-h-12 rounded-[2rem] right-0 fixed flex z-50 bg-white/85 dark:bg-black/30 dark:border dark:border-white/10 cart-button-bezel backdrop-blur-lg">
     <UIcon class="text-[#5f5f5f] dark:text-[#b7b7b7]" name="i-iconamoon-close" size="26" />
   </button>
   <Transition name="dropdown">

app/components/Cart.vue

@@ -5,13 +5,16 @@ const { order } = useCheckout();
 
 <template>
   <div
-    class="select-none mx-5 shadow-2xl mt-20 rounded-[2rem] right-0 fixed flex z-50 bg-white/85 dark:bg-black/85 dark:border dark:border-white/10 cart-button-bezel backdrop-blur-lg overflow-hidden">
+    class="select-none mx-3 lg:mx-5 shadow-2xl mt-20 rounded-[2rem] right-0 fixed flex z-50 bg-white/85 dark:bg-black/85 dark:border dark:border-white/10 cart-button-bezel backdrop-blur-lg overflow-hidden">
     <Transition name="fade" mode="out-in">
       <PaymentSuccessful v-if="order?.orderNumber && !cart.length" />
-      <div v-else-if="cart.length" class="flex w-full h-full">
-        <div class="w-80 relative">
-          <div class="absolute h-full w-full overflow-auto">
-            <div v-for="product in cart.slice().reverse()" :key="product.key" class="flex bg-black/5 dark:bg-white/10 m-3 p-3 gap-3 rounded-3xl items-center group relative">
+      <div v-else-if="cart.length" class="flex w-full h-full max-md:flex-col max-md:max-h-[calc(100vh-92px)] max-md:overflow-auto">
+        <div class="w-[calc(100vw-24px)] sm:w-full md:w-80 relative">
+          <div class="md:absolute h-full w-full overflow-auto">
+            <div
+              v-for="product in cart.slice().reverse()"
+              :key="product.key"
+              class="flex bg-black/5 dark:bg-white/10 m-3 p-3 gap-3 rounded-3xl items-center group relative max-md:pr-9">
               <NuxtImg :src="product.variation.node.image.sourceUrl" class="w-24 h-28 object-cover shadow-md rounded-2xl" />
               <div class="flex-1 gap-1 flex flex-col">
                 <div class="font-medium text-sm line-clamp-2 overflow-hidden text-ellipsis">{{ product.product.node.name }}</div>
@@ -27,7 +30,7 @@ const { order } = useCheckout();
               </div>
               <button
                 @click="handleRemoveFromCart(product.key)"
-                class="absolute opacity-0 group-hover:opacity-100 -top-1 -right-1 transition bg-red-700 flex p-1 items-center justify-center rounded-full hover:bg-red-500 active:scale-95">
+                class="absolute md:opacity-0 group-hover:opacity-100 top-2 right-2 md:-top-1 md:-right-1 transition bg-red-700 flex p-1 items-center justify-center rounded-full hover:bg-red-500 active:scale-95">
                 <UIcon :name="removeFromCartButtonStatus === 'remove' ? 'i-iconamoon-trash-light' : 'i-svg-spinners-90-ring-with-bg'" size="18" class="text-white" />
               </button>
             </div>

app/components/Checkout.vue

@@ -4,10 +4,10 @@ const { cart } = useCart();
 </script>
 
 <template>
-  <div class="w-96 h-full bg-black/5 dark:bg-white/10 my-3 mr-3 p-3 rounded-3xl">
+  <div class="md:w-96 h-full bg-black/5 dark:bg-white/10 my-3 mr-3 p-3 max-md:ml-3 rounded-3xl">
     <div class="text-xl font-bold px-2 mb-3">Checkout</div>
     <form @submit.prevent="handleCheckout" class="flex flex-col items-center justify-center">
-      <div class="grid grid-cols-2 gap-3 billing">
+      <div class="grid grid-cols-2 gap-3 billing w-full">
         <div class="col-span-full">
           <input required v-model="userDetails.email" placeholder="Email address" name="email" type="email" class="" />
         </div>

app/components/EmptyCart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-96 h-96 p-3">
+  <div class="w-[calc(100vw-24px)] sm:w-96 h-96 p-3">
     <div
       class="bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-red-100 via-white/0 to-white/0 dark:from-red-700/20 dark:via-black/0 dark:to-black/0 rounded-3xl w-full h-full flex items-center justify-center">
       <div class="flex flex-col items-center justify-center mt-2 mb-4 gap-2">

app/components/PaymentSuccessful.vue

@@ -3,7 +3,7 @@ const { order } = useCheckout();
 </script>
 
 <template>
-  <div class="w-96 h-full rounded-3xl">
+  <div class="w-[calc(100vw-24px)] sm:w-96 h-full rounded-3xl">
     <div class="flex flex-col items-center justify-center mb-6 mt-8 gap-1">
       <div class="bg-green-500/20 dark:bg-green-700/20 flex rounded-full p-3 mb-1">
         <UIcon name="i-iconamoon-check-circle-1-fill" size="46" class="text-[#23a26d] dark:text-[#40d195] shadow-md" />

app/composables/useCheckout.js

@@ -1,7 +1,14 @@
 export const useCheckout = () => {
   const { cart } = useCart();
   const order = useState('order', () => {});
-  const userDetails = ref({ email: '', firstName: '', lastName: '', phone: '', city: '', address1: '' });
+  const userDetails = useState('userDetails', () => ({
+    email: '',
+    firstName: '',
+    lastName: '',
+    phone: '',
+    city: '',
+    address1: '',
+  }));
   const checkoutStatus = ref('order');
 
   const handleCheckout = async () => {