tweaking transition and layout

describo · Oct 26, 2024 · 721c148 · 721c148
1 parent f855885
commit 721c148
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/index.md b/src/index.md
@@ -72,7 +72,7 @@ layout: home
           },
       ]"
       :auto-play="true"
-      :interval="6000"
+      :interval="8000"
       :initial-delay=0
   />
 
@@ -133,8 +133,8 @@ layout: home
       ]"
       documentation="/docs/guide/vocabulary.html"
       :auto-play="true"
-      :interval="6000"
-      :initial-delay=3000
+      :interval="8000"
+      :initial-delay=1600
   />
 
   <InfoPanelComponent>
@@ -220,8 +220,8 @@ layout: home
       ]"
       documentation="/docs/guide/transcribing-content.html"
       :auto-play="true"
-      :interval="6000"
-      :initial-delay=6000
+      :interval="8000"
+      :initial-delay=3200
   />
 
   <!-- <InfoPanelComponent  layout="rtl">
@@ -269,8 +269,8 @@ layout: home
       ]"
       documentation="/docs/guide/assistant-supported-discovery.html"
       :auto-play="true"
-      :interval="6000"
-      :initial-delay=1500
+      :interval="8000"
+      :initial-delay=4800
   />
 
   <!-- <InfoPanelComponent>
@@ -316,8 +316,8 @@ layout: home
       ]"
       documentation="/docs/guide/visualising-the-structure.html"
       :auto-play="true"
-      :interval="6000"
-      :initial-delay=4500
+      :interval="8000"
+      :initial-delay=6400
   />
 
 </div>

diff --git a/src/vue-components/InfoPanelCarousel.vue b/src/vue-components/InfoPanelCarousel.vue
@@ -220,7 +220,7 @@
 
 <script setup>
 import { faBook } from "@fortawesome/free-solid-svg-icons";
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount, onBeforeMount } from "vue";
 
 const props = defineProps({
     panels: {
@@ -331,9 +331,13 @@ const preloadImages = () => {
     });
 };
 
-onMounted(() => {
+onBeforeMount(() => {
     preloadImages();
     smallDevice.value = window.innerWidth < 900;
+});
+
+onMounted(() => {
+    preloadImages();
     if (props.autoPlay) {
         // Set initial timeout before starting the regular interval
         setTimeout(() => {
@@ -354,7 +358,7 @@ circle {
 
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity 1s ease;
+    transition: opacity 0.7s ease;
 }
 
 .fade-enter-from,