Add layout transitions

Nuxtify-drupal · May 18, 2024 · c5dec52 · c5dec52
1 parent 7a0d6aa
commit c5dec52
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 17 deletions.
diff --git a/frontend/base/app.vue b/frontend/base/app.vue
@@ -67,13 +67,6 @@ useSeoMeta({
 
     <NuxtPage
       :transition="{
-        enterFromClass: 'opacity-0',
-        enterToClass: 'opacity-100',
-        leaveFromClass: 'opacity-100',
-        leaveToClass: 'opacity-0',
-        enterActiveClass: 'transition-opacity',
-        leaveActiveClass: 'transition-opacity',
-        mode: 'out-in',
         onBeforeEnter,
       }"
     />

diff --git a/frontend/base/assets/css/tailwind.css b/frontend/base/assets/css/tailwind.css
@@ -5,3 +5,18 @@
 #app {
   @apply flex flex-col flex-1;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  @apply opacity-100;
+}
diff --git a/frontend/base/loading/index.css b/frontend/base/loading/index.css
@@ -18,16 +18,19 @@ body::before {
 }
 
 .logo {
+  animation: pulse-shadow 1s infinite alternate;
+  filter: drop-shadow(2px 2px 0.2rem rgba(0, 0, 0, 0.5));
   max-width: 16rem;
 }
 
 .throbber {
-  animation: spin 1s infinite;
+  animation: spin 1s infinite linear;
   border: 0.25rem solid transparent;
   border-top-color: #000;
   border-radius: 50%;
   flex-shrink: 0;
   height: 2.5rem;
+  top: 0;
   transform-origin: center;
   width: 2.5rem;
 }
@@ -38,6 +41,12 @@ body::before {
   }
 }
 
+@keyframes pulse-shadow {
+  to {
+    filter: drop-shadow(2px 2px 1rem rgba(0, 0, 0, 0.5));
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #1c1917;
@@ -49,6 +58,13 @@ body::before {
 
   .throbber {
     border-top-color: #fff;
+    filter: drop-shadow(2px 2px 0.1rem rgba(128, 128, 128, 0.5));
+  }
+
+  @keyframes pulse-shadow {
+    to {
+      filter: drop-shadow(2px 2px 1rem rgba(128, 128, 128, 0.5));
+    }
   }
 }
 

diff --git a/frontend/base/loading/index.ts b/frontend/base/loading/index.ts
@@ -37,7 +37,7 @@ export default (data: Data) => {
 
     <div class="flex flex-col h-full items-center justify-center">
       <a
-        href="https://github.com/Dobefu/nuxtify"
+        href="https://github.com/Nuxtify-drupal/Nuxtify"
         target="_blank"
         rel="noopener"
       >

diff --git a/frontend/base/nuxt.config.ts b/frontend/base/nuxt.config.ts
@@ -33,6 +33,14 @@ export default defineNuxtConfig({
 
   app: {
     rootId: 'app',
+    pageTransition: {
+      name: 'fade',
+      mode: 'out-in',
+    },
+    layoutTransition: {
+      name: 'fade',
+      mode: 'out-in',
+    },
   },
 
   site: {

diff --git a/frontend/base/pages/[...slug].vue b/frontend/base/pages/[...slug].vue
@@ -14,7 +14,7 @@ const { locale } = useI18n()
 const slug = Array.isArray(route.params.slug) ? route.params.slug.join('/') : ''
 const path = ref<string>(slug)
 
-const { data } = await useLazyAsyncData(
+const { data } = await useAsyncData(
   'route',
   async () => await useGraphqlQuery(
     'route',
@@ -26,7 +26,7 @@ const { data } = await useLazyAsyncData(
 )
 
 if (data.value?.data?.route === null)
-  showError({ statusCode: 404, statusMessage: 'Not Found' })
+  throw createError({ statusCode: 404, statusMessage: 'Not Found', fatal: true })
 
 const page = ref<NodeUnion | undefined>(undefined)
 
@@ -66,7 +66,7 @@ const i18nRoutes = computed(() => {
   }
 
   // Remove the slug for the home page
-  if (`/${routes.en.slug}` === data.value?.data.info.home) {
+  if (`/${routes.en?.slug}` === data.value?.data.info.home) {
     for (const [langcode] of Object.entries(routes))
       routes[langcode].slug = ''
   }
@@ -111,8 +111,10 @@ useHead({
 </script>
 
 <template>
-  <BasePageLayout
-    v-if="page"
-    :page="page"
-  />
+  <div>
+    <BasePageLayout
+      v-if="page"
+      :page="page"
+    />
+  </div>
 </template>
diff --git a/frontend/base/pages/preview/[...slug].vue b/frontend/base/pages/preview/[...slug].vue
@@ -52,7 +52,7 @@ else {
 }
 
 if (data.value === null)
-  showError({ statusCode: 404, statusMessage: 'Not Found' })
+  throw createError({ statusCode: 404, statusMessage: 'Not Found', fatal: true })
 
 const page = ref<NodeUnion | undefined>(undefined)
 

diff --git a/frontend/themes/default/assets/css/tailwind.css b/frontend/themes/default/assets/css/tailwind.css
@@ -13,3 +13,18 @@ body {
 #app {
   @apply flex flex-col flex-1;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  @apply opacity-100;
+}