minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive

Browse Source
This commit is contained in:
nguyen van thai
2024-07-08 17:38:54 +07:00
parent 76b2fa4771
commit 08ad924483
8 changed files with 253 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-section/layouts/none/Default.vue
+53 -46
View File
@@ -166,8 +166,9 @@ const CLASS_FOR_SECTION = computed(() => {
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
_classForSection = {
section_layout: "section_layout three_col_layout",
0: "col-span-2",
section_layout: "section_layout twelve_col_layout",
0: "sm:col-span-8 col-span-12",
1: "sm:col-span-4 col-span-12",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
@@ -178,8 +179,9 @@ const CLASS_FOR_SECTION = computed(() => {
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
_classForSection = {
section_layout: "section_layout six_col_layout",
1: "col-span-5",
section_layout: "section_layout grid-cols-12",
0: "lg:col-span-2 lg:block hidden",
1: "lg:col-span-10 col-span-12",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]:
@@ -202,7 +204,7 @@ const CLASS_FOR_SECTION = computed(() => {
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
_classForSection = {
section_layout: "section_layout twelve_col_layout",
section_layout: "section_layout grid-cols-12 123",
0: "col-span-2",
1: "col-span-5",
2: "col-span-3",
@@ -217,7 +219,10 @@ const CLASS_FOR_SECTION = computed(() => {
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]:
_classForSection = {
section_layout: "section_layout three_col_layout",
section_layout: "section_layout grid-cols-12",
0: "sm:col-span-4 col-span-12",
1: "sm:col-span-4 col-span-12",
2: "sm:col-span-4 col-span-12"
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
@@ -239,15 +244,19 @@ const CLASS_FOR_SECTION = computed(() => {
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
_classForSection = {
section_layout: "section_layout six_col_layout",
1: "col-span-4",
section_layout: "section_layout grid-cols-12",
0: "lg:col-span-2 md:col-span-6 col-span-12 lg:order-1 md:order-2 order-2",
1: "lg:col-span-8 md:col-span-12 col-span-12 lg:order-2 md:order-1 order-1",
2: "lg:col-span-2 md:col-span-6 col-span-12 lg:order-3 md:order-3 order-3",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
_classForSection = {
section_layout: "section_layout six_col_layout",
1: "col-span-2",
2: "col-span-3",
section_layout: "section_layout grid-cols-12",
0: "col-span-2 lg:block hidden",
1: "lg:col-span-4 md:col-span-5 col-span-12",
2: "lg:col-span-6 md:col-span-7 col-span-12",
};
break;
default:
@@ -295,8 +304,6 @@ const mapActivesToItems = (index: number) => {
:key="index"
:class="['border-custom', CLASS_FOR_SECTION[index]]"
:style="mapActivesToItems(index)['div.section_child']"
@dragover.prevent
@drop.stop.prevent="dropPlacementInSection($event, index, position.data)"
>
<RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
</div>
@@ -366,39 +373,39 @@ const mapActivesToItems = (index: number) => {
&.twelve_col_layout {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-5 {
grid-column: span 5 / span 5;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.col-span-7 {
grid-column: span 7 / span 7;
}
.col-span-8 {
grid-column: span 8 / span 8;
}
.col-span-9 {
grid-column: span 9 / span 9;
}
.col-span-10 {
grid-column: span 10 / span 10;
}
.col-span-11 {
grid-column: span 11 / span 11;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
// .col-span-2 {
// grid-column: span 2 / span 2;
// }
// .col-span-3 {
// grid-column: span 3 / span 3;
// }
// .col-span-4 {
// grid-column: span 4 / span 4;
// }
// .col-span-5 {
// grid-column: span 5 / span 5;
// }
// .col-span-6 {
// grid-column: span 6 / span 6;
// }
// .col-span-7 {
// grid-column: span 7 / span 7;
// }
// .col-span-8 {
// grid-column: span 8 / span 8;
// }
// .col-span-9 {
// grid-column: span 9 / span 9;
// }
// .col-span-10 {
// grid-column: span 10 / span 10;
// }
// .col-span-11 {
// grid-column: span 11 / span 11;
// }
// .col-span-12 {
// grid-column: span 12 / span 12;
// }
.border-custom {
border-color: #e5e5e5 !important;
}