@dcodegroup-au/page-builder 0.7.0 → 0.7.3

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

@@ -10,17 +10,17 @@
               :key="index"
               class="w-full flex-shrink-0 py-10"
           >
-            <div class="flex space-x-16 max-w-[1640px] md:px-[120px] mx-auto w-full">
+            <div class="flex flex-col-reverse lg:flex-row gap-8 xl:gap-x-16 max-w-[1640px] md:px-[120px] mx-auto w-full">
               <article class="flex-1 flex flex-col justify-center gap-8">
               <span class="flex items-center gap-1">
                 <template v-for="star in 5">
                   <Star class="w-5 h-5 text-yellow-100"></Star>
                 </template>
               </span>
-                <h3 class="font-medium text-3xl leading-[38px]" v-html="feature.description"></h3>
+                <h3 class="font-medium text-2xl md:text-3xl md:leading-[38px]" v-html="feature.description"></h3>
                 <p class="text-gray-600">{{ feature.title }}</p>
               </article>
-              <div class="h-[480px] w-[560px]">
+              <div class="h-[480px] w-full md:w-[560px] lg:h-[300px] lg:w-[350px] xl:h-[480px] xl:w-[560px]">
                 <img
                     v-if="feature.featured_image"
                     :src="feature.featured_image"
@@ -39,7 +39,7 @@
 
         <!-- Controls -->
         <footer class="flex max-w-[1640px] md:px-[120px] mx-auto w-full gap-4 relative">
-          <div class="absolute bottom-[40px] left-[120px] w-full gap-4 flex">
+          <div class="absolute bottom-[40px] right-0 md:right-[120px] xl:left-[120px] gap-4 flex">
             <button
                 type="button"
                 @click="prevSlide"

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,12 +1,14 @@
 <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 gap-1.5 lg:gap-4"
+           :style="innerWidth >= 1024 ? 'grid-template-columns: 33% auto;' : ''"
+           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">
+        <div class="rounded-xl md:rounded-3xl overflow-hidden relative" v-if="imageComponent">
           <img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="w-full h-full object-cover"/>
           <p v-html="imageComponent.caption" class="mt-2 text-[13px]"></p>
         </div>
@@ -22,13 +24,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">
@@ -64,7 +66,7 @@
 
 <script setup>
 import IconComponent from "@/components/common/Icon.vue";
-import {ref, computed, onMounted} from "vue";
+import {ref, computed} from "vue";
 import {formatUrl} from "@/components/helpers/common";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import "quill/dist/quill.snow.css";
@@ -76,10 +78,8 @@ const props = defineProps({
   },
 });
 
-const leftColumn = ref(null);
-const rightColumn = ref(null);
-
 const section = ref(props.section);
+const innerWidth = ref(window.innerWidth);
 const paragraphComponent = computed(() => {
   return section.value.components.find((component) => component.type === "paragraph");
 });
@@ -109,10 +109,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")],
 };