91 lines
2 KiB
Vue
91 lines
2 KiB
Vue
<template>
|
|
<Toast style="width: 90vw" position="bottom-right" group="br" />
|
|
<TheNavigation @logout="logout" />
|
|
<div class="m-2">
|
|
<router-view v-slot="{ Component }">
|
|
<Transition mode="out-in">
|
|
<component :is="Component" />
|
|
</Transition>
|
|
</router-view>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import TheNavigation from "@/components/UI/TheNavigation.vue";
|
|
import Toast from "primevue/toast";
|
|
|
|
export default defineComponent({
|
|
name: "App",
|
|
components: { TheNavigation, Toast },
|
|
setup() {
|
|
async function logout() {
|
|
const response = await fetch("/auth/api/logout", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({}),
|
|
});
|
|
const result = await response.json();
|
|
result.status === "OK" && window.location.reload();
|
|
}
|
|
return { logout };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less">
|
|
@import "primevue/resources/themes/saga-blue/theme.css";
|
|
@import "primevue/resources/themes/vela-blue/theme.css" screen and (prefers-color-scheme: dark);
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
img {
|
|
content: url(@/assets/logos/logo.png);
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
img {
|
|
content: url(@/assets/logos/logo_white.png);
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "roboto";
|
|
src: url(@/assets/fonts/roboto.ttf);
|
|
font-display: swap;
|
|
}
|
|
|
|
.p-button.p-button-success:enabled:focus,
|
|
.p-button.p-button-danger:enabled:focus,
|
|
.p-button.p-button-success:enabled:active,
|
|
.p-button.p-button-danger:enabled:active {
|
|
box-shadow: none !important;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--surface-b);
|
|
}
|
|
html,
|
|
body {
|
|
font-size: 1.2em;
|
|
font-family: "roboto", sans-serif;
|
|
}
|
|
.p-component {
|
|
font-family: "roboto", sans-serif;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.v-enter-active {
|
|
transition: opacity 0.2s ease-in;
|
|
}
|
|
.v-leave-active {
|
|
transition: opacity 0.1s ease-out;
|
|
}
|
|
.v-enter-from,
|
|
.v-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|