From 6add0cc327e5e0cc0215ed249fb1697527a26b1d Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 11 Jun 2024 09:38:05 +0700
Subject: [PATCH] feat: responsive card + fix height card

---
 .../04_product-service/NewProductCardComponent.vue     |  4 ++--
 src/pages/04_product-service/MainPage.vue              | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/04_product-service/NewProductCardComponent.vue b/src/components/04_product-service/NewProductCardComponent.vue
index 4e287db0..636c3199 100644
--- a/src/components/04_product-service/NewProductCardComponent.vue
+++ b/src/components/04_product-service/NewProductCardComponent.vue
@@ -18,7 +18,7 @@ withDefaults(
 <template>
   <div
     class="q-pa-lg full-width rounded column items-center hover-card"
-    :style="`border:2px dashed ${isType ? 'var(--purple-11)' : 'var(--pink-6)'}`"
+    :style="`border:2px dashed ${isType ? 'var(--purple-11)' : 'var(--pink-6)'};flex-grow:1`"
     @click="console.log('clicked!')"
   >
     <q-img
@@ -30,7 +30,7 @@ withDefaults(
       class="items-center rounded q-px-lg q-mt-md"
       :style="`border:1px solid  ${isType ? 'var(--purple-11)' : 'var(--pink-6)'};background-color: ${isType ? 'var(--purple-11)' : 'var(--pink-6)'}`"
     >
-      <div class="text-white">+ {{ $t(label) }}</div>
+      <div class="text-white text-no-wrap">+ {{ $t(label) }}</div>
     </div>
   </div>
 </template>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index fd741438..4429fdd3 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -86,7 +86,11 @@ const inputSearch = ref<string>('');
         </div>
       </div>
       <div class="row q-col-gutter-lg">
-        <div class="col-3" v-for="i in 6" :key="i">
+        <div
+          :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
+          v-for="i in 6"
+          :key="i"
+        >
           <ProductCardComponent
             :title="cardData.title"
             :subtitle="cardData.subtitle"
@@ -95,7 +99,9 @@ const inputSearch = ref<string>('');
             :color="cardData.color"
           />
         </div>
-        <div class="col-3">
+        <div
+          :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
+        >
           <NewProductCardCompoent
             :label="'กลุ่มสินค้าและบริการ'"
             :isType="false"