2022-12-17 02:30:46 +00:00
|
|
|
<script>
|
|
|
|
import { RouterView, RouterLink } from "vue-router";
|
2022-12-18 06:20:45 +00:00
|
|
|
import locales from "./locales";
|
2022-12-17 02:30:46 +00:00
|
|
|
|
|
|
|
export default {
|
2023-01-11 20:53:15 +00:00
|
|
|
components: {
|
|
|
|
RouterView,
|
|
|
|
RouterLink,
|
|
|
|
},
|
2022-12-17 02:30:46 +00:00
|
|
|
setup() {
|
|
|
|
return {
|
2022-12-18 06:20:45 +00:00
|
|
|
locales,
|
|
|
|
};
|
|
|
|
},
|
2022-12-19 01:25:01 +00:00
|
|
|
data() {
|
2022-12-18 06:20:45 +00:00
|
|
|
const appElem = document.getElementById("app");
|
|
|
|
return {
|
2022-12-19 01:25:01 +00:00
|
|
|
version: appElem.getAttribute("data-version"),
|
|
|
|
};
|
2022-12-17 02:30:46 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
onLocaleChange() {
|
|
|
|
localStorage.setItem("locale", this.$i18n.locale);
|
2022-12-18 06:20:45 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
2022-12-03 03:20:49 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2023-01-04 10:48:24 +00:00
|
|
|
<v-app style="min-height: 100%">
|
|
|
|
<div id="mascot" class="pa-3">
|
2023-01-12 23:45:35 +00:00
|
|
|
<img :draggable="false" src="./assets/img/mascot.webp" />
|
2023-01-04 10:48:24 +00:00
|
|
|
</div>
|
2022-12-07 19:03:22 +00:00
|
|
|
<v-system-bar window>
|
2022-12-19 01:25:01 +00:00
|
|
|
<div class="d-flex justify-center align-center w-100">
|
2023-01-03 03:58:41 +00:00
|
|
|
<RouterLink :to="{ name: 'home' }" class="d-flex align-center">
|
|
|
|
<img
|
|
|
|
height="20"
|
|
|
|
src="./assets/img/audon-logo-orange.svg"
|
|
|
|
alt="Branding Logo"
|
|
|
|
/>
|
|
|
|
</RouterLink>
|
2022-12-19 01:25:01 +00:00
|
|
|
</div>
|
2022-12-07 05:45:05 +00:00
|
|
|
</v-system-bar>
|
|
|
|
<v-main>
|
|
|
|
<v-container class="fill-height">
|
2022-12-17 02:30:46 +00:00
|
|
|
<v-row
|
|
|
|
align="center"
|
|
|
|
justify="center"
|
|
|
|
class="fill-height"
|
|
|
|
id="mainArea"
|
|
|
|
>
|
2022-12-07 05:45:05 +00:00
|
|
|
<v-col>
|
|
|
|
<v-responsive class="mx-auto" max-width="600px">
|
2022-12-17 02:30:46 +00:00
|
|
|
<RouterView />
|
2022-12-07 05:45:05 +00:00
|
|
|
</v-responsive>
|
|
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-container>
|
|
|
|
</v-main>
|
2022-12-17 02:30:46 +00:00
|
|
|
<v-bottom-navigation :height="30">
|
|
|
|
<div class="w-100 d-flex justify-space-between align-center px-3">
|
|
|
|
<div>
|
2022-12-18 06:20:45 +00:00
|
|
|
<a
|
|
|
|
href="https://codeberg.org/nmkj/audon"
|
|
|
|
class="plain"
|
|
|
|
target="_blank"
|
|
|
|
>{{ version }}</a
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<select
|
|
|
|
v-model="$i18n.locale"
|
|
|
|
id="localeSelector"
|
|
|
|
@change="onLocaleChange"
|
|
|
|
>
|
2022-12-17 02:30:46 +00:00
|
|
|
<option
|
|
|
|
v-for="locale in $i18n.availableLocales"
|
|
|
|
:key="`locale-${locale}`"
|
|
|
|
:value="locale"
|
|
|
|
>
|
|
|
|
{{ locales[locale] }}
|
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</v-bottom-navigation>
|
2022-12-07 05:45:05 +00:00
|
|
|
</v-app>
|
2022-12-03 03:20:49 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<style>
|
2023-01-03 03:58:41 +00:00
|
|
|
#mascot {
|
2023-01-04 10:48:24 +00:00
|
|
|
position: fixed;
|
2023-01-03 03:58:41 +00:00
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#mascot img {
|
|
|
|
opacity: 1;
|
|
|
|
width: 200px;
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
|
2022-12-07 05:45:05 +00:00
|
|
|
#app .v-application__wrap {
|
|
|
|
min-height: 100%;
|
|
|
|
}
|
2022-12-17 02:30:46 +00:00
|
|
|
|
|
|
|
#localeSelector option {
|
|
|
|
background: black;
|
|
|
|
color: white;
|
|
|
|
}
|
2022-12-03 03:20:49 +00:00
|
|
|
</style>
|