Overall improvements, updated pages

components/Card.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts"></script>
 
 <template>
-  <main
-    class="dimensions background overflow-auto d-flex flex-column rounded-card gap-4 gap-sm-2 px-4 pt-4 pb-3 animate__animated-sm animate__delay-1-5s animate__fadeInDown"
-  >
+  <main>
     <Navigation />
-    <NuxtPage
-      class="scrollbar overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3 fade-mask"
-    />
+    <NuxtLoadingIndicator />
+    <NuxtLayout>
+      <NuxtPage
+        class="scrollbar fade-mask overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
+      >
+      </NuxtPage>
+    </NuxtLayout>
   </main>
 </template>
 

components/Footer.vue

@@ -15,10 +15,7 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
   <footer
     class="float user-select-none mb-2 animate__animated animate__delay-1s animate__fadeInUpBig animate__slow text-align-center line-height-1-5"
   >
-    <span class="transpaque font-small text-shadow">
-      © 2018-{{ currentYear }},
-      <a class="link-hi-force-dark" href="https://enderman.ch">Enderman</a>. All
-      rights reserved. •
+    <span class="transpaque font-small text-shadow px-2">
       <EMail
         class="link-hi-force-dark"
         address="[email protected]"
@@ -28,8 +25,12 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
       >
         <strong>Report a bug</strong>
       </EMail>
+      <br />
+      © 2018-{{ currentYear }},
+      <a class="link-hi-force-dark" href="https://enderman.ch">Enderman</a>. All
+      rights reserved.
       <sub>
-        β{{ config.public.version ? config.public.version : '0.0.0' }} ({{
+        β{{ config.public.version ? config.public.version : '?.?.?' }} ({{
           config.public.buildDate ? config.public.buildDate : '1970-01-01'
         }})
       </sub>

components/Portal.vue

@@ -611,7 +611,7 @@ onMounted(() => {
   const portal = new Portal(
     props.directory,
     props.create,
-    props.animate,
+    props.animate && window.innerWidth > 600,
     props.randomize,
     props.fade,
     props.speed,

components/TransitionY.vue

@@ -0,0 +1,73 @@
+<script setup>
+console.log('Transition started')
+function enter(el, done) {
+  const width = getComputedStyle(el).width
+  console.log('@enter')
+  el.style.width = width
+  el.style.position = 'absolute'
+  el.style.visibility = 'hidden'
+  el.style.height = 'auto'
+
+  const height = getComputedStyle(el).height
+
+  el.style.width = ''
+  el.style.position = ''
+  el.style.visibility = ''
+  el.style.height = '0'
+
+  // Force repaint to make sure the
+  // animation is triggered correctly.
+  getComputedStyle(el).height
+
+  // Trigger the animation.
+  // We use `requestAnimationFrame` because we need
+  // to make sure the browser has finished
+  // painting after setting the `height`
+  // to `0` in the line above.
+  requestAnimationFrame(() => {
+    el.style.height = height
+  })
+
+  done()
+}
+
+function afterEnter(element) {
+  console.log('@after-enter')
+  element.style.height = 'auto'
+}
+
+function leave(element) {
+  console.log('@leave')
+  const height = getComputedStyle(element).height
+
+  element.style.height = height
+
+  // Force repaint to make sure the
+  // animation is triggered correctly.
+  getComputedStyle(element).height
+
+  requestAnimationFrame(() => {
+    element.style.height = '0'
+  })
+}
+</script>
+
+<template>
+  <Transition
+    name="expand"
+    @enter="enter"
+    @after-enter="afterEnter"
+    @leave="leave"
+  >
+    <slot />
+  </Transition>
+</template>
+
+<style scoped lang="scss">
+* {
+  will-change: height;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+</style>