From dd09434deb1afa77c9750a66074089b50b4508c8 Mon Sep 17 00:00:00 2001
From: nguyen van thai <nguyenvanthailtv@gmail.com>
Date: Thu, 30 May 2024 22:42:55 +0700
Subject: [PATCH] thainv-dev: responsive

---
 .../page-component/templates/articles/individuals/Card.vue | 6 +++---
 .../templates/categories/BasicCategories.vue               | 4 ++--
 components/dynamic-page/page-section/layouts/Default.vue   | 7 ++++---
 components/dynamic-page/page/layouts/Default.vue           | 6 +++---
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/components/dynamic-page/page-component/templates/articles/individuals/Card.vue b/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
index e0626a9..67cecf2 100644
--- a/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
+++ b/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
@@ -56,12 +56,12 @@ const drop = (e: any) => {
             <div>
                 <template v-if="parseData">
                     <nuxt-link :to="`/bai-viet/${parseData.slug}`">
-                        <h3 v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 line-clamp-2 text-base font-600 hover:text-primary-100 transition-all duration-300">
+                        <h3 v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 line-clamp-2 text-base font-700 hover:text-primary-100 transition-all duration-300">
                             {{ parseData.title?.replace(/<[^>]+>/g, '') }}
                         </h3>
                     </nuxt-link>
                 </template>
-                <p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 line-clamp-2">
+                <p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 line-clamp-3 sm:line-clamp-5 text-[14px]">
                     <template v-if="parseData">
                         <template v-if="parseData.intro">
                             {{ parseData.intro?.replace(/<[^>]+>/g, '') }}
@@ -82,7 +82,7 @@ const drop = (e: any) => {
     height: 100%;
 
     &.vertical {
-        grid-template-columns: repeat(1, minmax(0, 1fr));
+        @apply lg:grid-cols-1 sm:grid-cols-2;
         .basic-article_content {
             padding: 10px 0px;
         }
diff --git a/components/dynamic-page/page-component/templates/categories/BasicCategories.vue b/components/dynamic-page/page-component/templates/categories/BasicCategories.vue
index 814abf1..38827db 100644
--- a/components/dynamic-page/page-component/templates/categories/BasicCategories.vue
+++ b/components/dynamic-page/page-component/templates/categories/BasicCategories.vue
@@ -23,8 +23,8 @@ const _dataResult = computed(() => {
 
 <template>
   <div>
-    <div class="flex gap-4 items-end py-2" @click="selectComponent">
-      <nuxt-link :to="`/${component.code}`" v-for="(component, index) in _dataResult" :key="index" class="font-medium text-[18px] first:font-600 first:text-[24px]">
+    <div class="flex gap-4 items-end" @click="selectComponent">
+      <nuxt-link :to="`/${component.code}`" v-for="(component, index) in _dataResult" :key="index" class=" py-1 font-400 text-[16px] first:font-600 first:text-[20px] sm:block hidden first:block first:border-b-[1px] first:border-b-solid first:border-b-[#409eff]">
         <h3 class="m-0 leading-none hover:text-primary-100 transition-all duration-300">{{ component.title }}</h3>
       </nuxt-link>
     </div>
diff --git a/components/dynamic-page/page-section/layouts/Default.vue b/components/dynamic-page/page-section/layouts/Default.vue
index e427d45..14c16c0 100644
--- a/components/dynamic-page/page-section/layouts/Default.vue
+++ b/components/dynamic-page/page-section/layouts/Default.vue
@@ -141,7 +141,7 @@ const CLASS_FOR_SECTION = computed(() => {
 </script>
 
 <template>
-    <div class="section_layout grid  gap-x-5 gap-y-2.5" :class="[CLASS_FOR_SECTION.section_layout]">
+    <div class="section_layout grid  sm:gap-x-5 sm:gap-y-2.5 gap-[10px] lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
       <div
         v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
         :key="index"
@@ -159,11 +159,12 @@ const CLASS_FOR_SECTION = computed(() => {
   }
 
   &.two_col_layout {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    @apply md:grid-cols-2 grid-cols-1;
   }
 
   &.three_col_layout {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    @apply lg:grid-cols-3 grid-cols-1;
+    // grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   &.four_col_layout {
     grid-template-columns: repeat(4, minmax(0, 1fr));
diff --git a/components/dynamic-page/page/layouts/Default.vue b/components/dynamic-page/page/layouts/Default.vue
index e43d6dc..4c3d846 100644
--- a/components/dynamic-page/page/layouts/Default.vue
+++ b/components/dynamic-page/page/layouts/Default.vue
@@ -8,13 +8,13 @@ const CLASS_FOR_LAYOUT = computed(() => {
     switch (props.layout) {
         case 'Full_Page':
             _classForLayout = {
-                page_container: 'page_container w-full',
+                page_container: 'page_container w-full px-2',
                 layout_container: 'layout_container px-5',
             };
             break;
         case 'Center_Page':
             _classForLayout = {
-                page_container: 'page_container w-full',
+                page_container: 'page_container w-full px-2',
                 layout_container: 'layout_container container mx-auto',
             };
             break;
@@ -26,7 +26,7 @@ const CLASS_FOR_LAYOUT = computed(() => {
             break;
         default: 
             _classForLayout = {
-                page_container: 'page_container',
+                page_container: 'page_container px-2',
                 layout_container: 'layout_container',
             };
             break;