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>
<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']">
<template v-if="!isEmpty(component)">
<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" />
</svg>
<h3 :style="mapActivesToItems(index)['h3.categories']">
<h3 :style="mapActivesToItems(index)['h3.categories']" class="whitespace-nowrap">
{{ component.title }}
</h3>
</div>
@@ -173,8 +173,9 @@ const CLASS_FOR_SECTION = computed(() => {
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
_classForSection = {
section_layout: "section_layout three_col_layout",
1: "col-span-2",
section_layout: "section_layout grid-cols-12",
0: "md:col-span-4 col-span-12",
1: "md:col-span-8 col-span-12",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
@@ -195,20 +196,20 @@ const CLASS_FOR_SECTION = computed(() => {
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
_classForSection = {
section_layout: "section_layout twelve_col_layout",
0: "col-span-5",
1: "col-span-2",
2: "col-span-2",
3: "col-span-3",
section_layout: "section_layout grid-cols-12",
0: "md:col-span-5 col-span-12",
1: "md:col-span-2 sm:col-span-6 col-span-1",
2: "md:col-span-2 sm:col-span-6 col-span-2",
3: "md:col-span-3 col-span-12",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
_classForSection = {
section_layout: "section_layout grid-cols-12 123",
0: "col-span-2",
1: "col-span-5",
2: "col-span-3",
3: "col-span-2",
section_layout: "section_layout grid-cols-12",
0: "col-span-2 md:block hidden",
1: "md:col-span-5 sm:col-span-7 col-span-12",
2: "md:col-span-3 sm:col-span-5 col-span-12",
3: "col-span-2 md:block hidden",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]: