audon/audon-fe/src/App.vue

110 wiersze
2.2 KiB
Vue
Czysty Zwykły widok Historia

2022-12-17 02:30:46 +00:00
<script>
2023-01-23 12:10:21 +00:00
import { RouterView } 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 {
components: {
RouterView,
},
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-23 12:10:21 +00:00
<img
height="20"
src="./assets/img/audon-logo-orange.svg"
alt="Branding Logo"
/>
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-19 02:23:07 +00:00
bottom: 20px;
2023-01-03 03:58:41 +00:00
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>