@dcodegroup-au/page-builder 0.7.0 → 0.7.1

package/src/components/presenters/modules/Timeline.vue

@@ -9,7 +9,7 @@
         <div class="mt-4">
           <div v-for="(data, index) in timelineComponent.data" class="flex flex-row">
             <div class="w-1/5 mr-[40px] relative">
-              <h1 class=" text-[24px] font-semibold text-navy-800">{{ data.title }}</h1>
+              <h1 class=" text-[24px] font-semibold text-navy-800 pr-5">{{ data.title }}</h1>
               <div class="w-[32px] h-[32px] flex items-center justify-center border-2 border-navy-100 rounded-full absolute right-[-17px] bg-white top-0">
                 <p class="w-[16px] h-[16px] rounded-full bg-navy-600"></p>
               </div>
@@ -20,7 +20,7 @@
               <div
                   v-for="(line, index) in data.lines"
                   :key="index"
-                  class="bg-pale-orange-100 p-6 mb-6 rounded-[16px]"
+                  class="bg-pale-orange-100 p-6 mb-6 rounded-lg md:rounded-2xl"
               >
                 <h4 class="text-xl font-semibold text-gray-900">{{ line.title }}</h4>
                 <div class="all-unset ql-editor">

package/src/components/presenters/modules/TwoColumnsImageContent.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="overflow-hidden">
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-4 px-4">
-      <div class="flex gap-4" v-if="paragraphComponent">
-        <div class="w-1/3 bg-gray-100 rounded-xl p-8" :class="{'h-fit': section?.minimum_height}" v-if="paragraphComponent" ref="leftColumn">
+      <div class="grid lg:grid-cols-[33%_auto] gap-1.5 lg:gap-4" v-if="paragraphComponent">
+        <div class="bg-gray-100 rounded-xl p-8" :class="{'h-fit': section?.minimum_height}" v-if="paragraphComponent">
           <h3 class="text-[20px] text-gray-900 font-semibold">{{ paragraphComponent.title }}</h3>
           <p class="text-md font-normal mt-2 text-gray-600 leading-6" v-html="paragraphComponent.paragraph"></p>
         </div>
-        <div class="w-2/3 rounded-[24px] overflow-hidden" v-if="imageComponent" ref="rightColumn">
-          <img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="w-full h-full object-cover"/>
+        <div class="rounded-xl md:rounded-3xl overflow-hidden relative" v-if="imageComponent">
+          <img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="lg:absolute inset-0 w-full h-full object-cover"/>
           <p v-html="imageComponent.caption" class="mt-2 text-[13px]"></p>
         </div>
       </div>
@@ -22,13 +22,13 @@
              class="text-[20px] font-normal mt-4 text-gray-600 leading-[30px] max-w-[800px]"
              v-html="headerComponent.supporting_text"></p>
         </div>
-        <div :class="featureItemsComponent.hasOwnProperty('grid_columns') ? '' : 'flex flex-row gap-8'">
+        <div :class="featureItemsComponent.hasOwnProperty('grid_columns') ? '' : 'flex flex-col-reverse md:flex-row gap-8'">
           <div class="grid gap-8"
-               :class="featureItemsComponent.hasOwnProperty('grid_columns') ? `grid-cols-${featureItemsComponent.grid_columns}` : 'grid-cols-2 w-2/3'">
+               :class="featureItemsComponent.hasOwnProperty('grid_columns') ? `md:grid-cols-${featureItemsComponent.grid_columns}` : 'lg:grid-cols-2 w-2/3'">
             <div v-for="item in items"
                  class="flex gap-3 w-full"
                  :class="{
-              'bg-gray-50 p-8 rounded-[24px] overflow-hidden flex-col' : featureItemsComponent.hasOwnProperty('grid_columns') && (featureItemsComponent.grid_columns > 2 || featureItemsComponent?.has_background),
+              'bg-gray-50 p-8 rounded-xl md:rounded-3xl overflow-hidden flex-col' : featureItemsComponent.hasOwnProperty('grid_columns') && (featureItemsComponent.grid_columns > 2 || featureItemsComponent?.has_background),
               '!p-0 rounded-tr-[0px] rounded-bl-[0px]': item?.image
             }">
               <template v-if="item.title">
@@ -76,9 +76,6 @@ const props = defineProps({
   },
 });
 
-const leftColumn = ref(null);
-const rightColumn = ref(null);
-
 const section = ref(props.section);
 const paragraphComponent = computed(() => {
   return section.value.components.find((component) => component.type === "paragraph");
@@ -109,10 +106,4 @@ const items = computed(() => {
   });
 });
 
-onMounted(() => {
-  if (leftColumn.value && rightColumn.value && section.value?.minimum_height) {
-    rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
-  }
-});
-
 </script>

package/src/components/presenters/modules/VTabs.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
-    <div class="max-md:mx-[30px] 1xl:mx-0 bg-navy-25 rounded-[48px] p-16">
+    <div class="max-md:mx-[30px] 1xl:mx-0 bg-navy-25 rounded-3xl md:rounded-[48px] p-16">
       <div v-for="(component, index) in section.components">
         <component
             :is="currentComponent(component)"

package/tailwind.config.js

@@ -82,5 +82,8 @@ module.exports = {
       },
     },
   },
+  safelist: [
+    "md:grid-cols-2",
+  ],
   plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
 };