61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script setup lang="ts">
|
||
import { useQuasar } from 'quasar'
|
||
import { useRuntimeConfig } from '#imports'
|
||
|
||
const config = useRuntimeConfig()
|
||
const quasar = useQuasar()
|
||
|
||
quasar.dark.set('auto')
|
||
|
||
useHead({
|
||
titleTemplate: (chunk) => {
|
||
return !chunk || chunk === config.public.websiteName
|
||
? config.public.websiteName
|
||
: `${chunk} – Enderman`
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
id="ender-layout"
|
||
class="d-flex flex-column align-items-center pt-sm-5 h-100"
|
||
>
|
||
<AClientOnly appear render="xs" mode="out-in">
|
||
<SwipeControls />
|
||
</AClientOnly>
|
||
|
||
<NuxtLayout
|
||
name="card"
|
||
class="animate__animated-sm animate__delay-1-5s animate__fadeInDown"
|
||
>
|
||
<template #footer>
|
||
<AClientOnly
|
||
appear
|
||
render="xs"
|
||
mode="in-out"
|
||
enter="animate__animated animate__delay-1s animate__fadeIn"
|
||
leave="animate__animated animate__fadeOut"
|
||
>
|
||
<Flooter opaque />
|
||
</AClientOnly>
|
||
</template>
|
||
</NuxtLayout>
|
||
</div>
|
||
|
||
<ClientOnly>
|
||
<template #fallback> </template>
|
||
<Portal layout="#ender-layout" animate randomize fade />
|
||
</ClientOnly>
|
||
|
||
<AClientOnly
|
||
appear
|
||
render="sm-up"
|
||
mode="out-in"
|
||
enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
|
||
leave="animate__animated animate__fadeOutDown"
|
||
>
|
||
<Flooter class="floaty mb-2 px-2" />
|
||
</AClientOnly>
|
||
</template>
|