Fix Responsive

This commit is contained in:
nguyen van thai
2024-07-09 09:23:17 +07:00
parent 28ce3d42a0
commit 2e49529934
2 changed files with 15 additions and 14 deletions
@@ -37,7 +37,7 @@ const mapActivesToItems = (index: number) => {
</script> </script>
<template> <template>
<div class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']"> <div class="categories-container border-custom flex-wrap" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
<div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']"> <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
<template v-if="!isEmpty(component)"> <template v-if="!isEmpty(component)">
<div class="category-content"> <div class="category-content">
@@ -45,7 +45,7 @@ const mapActivesToItems = (index: number) => {
<path d="M5.984 2.456V4.184H4.336V5.992H2.4V4.184H0.752V2.456H2.4V0.648H4.336V2.456H5.984Z" fill="black" /> <path d="M5.984 2.456V4.184H4.336V5.992H2.4V4.184H0.752V2.456H2.4V0.648H4.336V2.456H5.984Z" fill="black" />
</svg> </svg>
<h3 :style="mapActivesToItems(index)['h3.categories']"> <h3 :style="mapActivesToItems(index)['h3.categories']" class="whitespace-nowrap">
{{ component.title }} {{ component.title }}
</h3> </h3>
</div> </div>
@@ -173,8 +173,9 @@ const CLASS_FOR_SECTION = computed(() => {
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
_classForSection = { _classForSection = {
section_layout: "section_layout three_col_layout", section_layout: "section_layout grid-cols-12",
1: "col-span-2", 0: "md:col-span-4 col-span-12",
1: "md:col-span-8 col-span-12",
}; };
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
@@ -195,20 +196,20 @@ const CLASS_FOR_SECTION = computed(() => {
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
_classForSection = { _classForSection = {
section_layout: "section_layout twelve_col_layout", section_layout: "section_layout grid-cols-12",
0: "col-span-5", 0: "md:col-span-5 col-span-12",
1: "col-span-2", 1: "md:col-span-2 sm:col-span-6 col-span-1",
2: "col-span-2", 2: "md:col-span-2 sm:col-span-6 col-span-2",
3: "col-span-3", 3: "md:col-span-3 col-span-12",
}; };
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
_classForSection = { _classForSection = {
section_layout: "section_layout grid-cols-12 123", section_layout: "section_layout grid-cols-12",
0: "col-span-2", 0: "col-span-2 md:block hidden",
1: "col-span-5", 1: "md:col-span-5 sm:col-span-7 col-span-12",
2: "col-span-3", 2: "md:col-span-3 sm:col-span-5 col-span-12",
3: "col-span-2", 3: "col-span-2 md:block hidden",
}; };
break; break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]: case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]: