From 061d0bd21e015dc4b1f812b39fa4e7e66c40acb0 Mon Sep 17 00:00:00 2001
From: survellow <59056368+survellow@users.noreply.github.com>
Date: Wed, 17 Jan 2024 21:03:14 +0100
Subject: [PATCH] fix overlapping transition declarations

---
 frontend/src/App.vue              |  8 ++++++--
 frontend/src/view/DynamicPage.vue | 15 +++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d563074..36efbff 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -35,7 +35,7 @@ window.addEventListener("resize", updateMobile);
   <MenuBar />
   <RouterView v-slot="{ Component }">
     <transition name="scale" mode="out-in">
-      <component :is="Component" />
+      <component :is="Component" class="origin-near-top"/>
     </transition>
   </RouterView>
   <!-- show CalendarPreview but only on specific router views -->
@@ -52,6 +52,10 @@ window.addEventListener("resize", updateMobile);
 .scale-enter-from,
 .scale-leave-to {
   opacity: 0;
-  transform: scale(0.9);
+  transform: scale(0.95);
+}
+
+.origin-near-top {
+  transform-origin: center 33vh;
 }
 </style>
diff --git a/frontend/src/view/DynamicPage.vue b/frontend/src/view/DynamicPage.vue
index 163e66a..41390ee 100644
--- a/frontend/src/view/DynamicPage.vue
+++ b/frontend/src/view/DynamicPage.vue
@@ -24,11 +24,12 @@ const hasContent = computed(() => {
 </script>
 
 <template>
-  <div
-    class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
-    :class="{ 'md:mt-8': hideContent }"
+  <div 
+    class="flex flex-column align-items-center mt-0"
   >
-    <div class="flex align-items-center justify-content-center gap-2 mx-2">
+    <div class="flex align-items-center justify-content-center gap-2 mx-2 transition-rolldown"
+      :class="{'md:mt-8': hideContent}"
+    >
       <h3 class="text-4xl">
         {{ headline }}
       </h3>
@@ -71,3 +72,9 @@ const hasContent = computed(() => {
     </div>
   </div>
 </template>
+
+<style scoped>
+  .transition-rolldown {
+    transition: margin-top 0.5s ease-in-out;
+  }
+</style>