advent22/ui/src/App.vue

70 lines
1.5 KiB
Vue

<template>
<section class="hero is-small is-primary" style="overflow-x: auto">
<div class="hero-body">
<h1 class="title is-uppercase">Adventskalender</h1>
<h2 class="subtitle">Der Gelöt</h2>
</div>
</section>
<section class="section">
<div class="container">
<AdminView v-if="is_admin" />
<UserView v-else />
</div>
</section>
<div class="is-flex-grow-1" />
<footer class="footer">
<div class="level is-mobile">
<div class="level-item">
<p v-html="footer" />
</div>
<div class="level-right">
<AdminButton
class="level-item tag is-link is-outlined"
v-model="is_admin"
/>
</div>
</div>
</footer>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import AdminView from "./components/admin/AdminView.vue";
import AdminButton from "./components/AdminButton.vue";
import UserView from "./components/UserView.vue";
@Options({
components: {
AdminView,
AdminButton,
UserView,
},
})
export default class extends Vue {
public is_admin = false;
public footer = "";
public mounted(): void {
this.$advent22
.api_get<string>("user/footer")
.then((footer) => (this.footer = footer))
.catch((error) => alert(this.$advent22.format_user_error(error)));
}
}
</script>
<style>
html {
overflow-y: auto !important;
}
#app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
</style>