Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

some layout tweaks

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-20 22:03:32 +00:00
parent 8b003419a5
commit 6ba3947cb8
4 changed files with 35 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
ui/src/App.vue
View file

@ -1,19 +1,9 @@
<template> <template>
<section class="hero is-primary"> <section class="hero is-small is-primary">
<div class="level is-mobile">
<div class="level-left">
<div class="hero-body"> <div class="hero-body">
<h1 class="title is-uppercase">Adventskalender</h1> <h1 class="title is-uppercase">Adventskalender</h1>
<h2 class="subtitle">Der Gelöt</h2> <h2 class="subtitle">Der Gelöt</h2>
</div> </div>
</div>
<div class="level-right">
<div class="level-item pr-4">
<AdminButton v-model="is_admin" />
</div>
</div>
</div>
</section> </section>
<section class="section"> <section class="section">
@ -22,6 +12,25 @@
<UserView v-else /> <UserView v-else />
</div> </div>
</section> </section>
<footer class="footer">
<nav class="level is-mobile">
<div class="level-item">
<p>
<strong>Advent22</strong> by
<a href="https://www.lenaisten.de/">Lenaisten.de</a>.
</p>
</div>
<div class="level-right">
<div class="level-item">
<AdminButton
v-model="is_admin"
button_class="tag is-link is-outlined"
/>
</div>
</div>
</nav>
</footer>
</template> </template>
<script lang="ts"> <script lang="ts">

9
ui/src/components/AdminButton.vue
View file

@ -2,11 +2,11 @@
<LoginModal v-if="modal_visible" @submit="on_submit" @cancel="on_cancel" /> <LoginModal v-if="modal_visible" @submit="on_submit" @cancel="on_cancel" />
<BulmaButton <BulmaButton
class="button is-primary is-outlined is-inverted" :class="button_class"
@click.left="on_click"
:icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')" :icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
:busy="is_busy" :busy="is_busy"
:text="modelValue ? 'Logout' : 'Login'" text="Admin"
@click.left="on_click"
/> />
</template> </template>
@ -23,12 +23,15 @@ import LoginModal from "./LoginModal.vue";
}, },
props: { props: {
modelValue: Boolean, modelValue: Boolean,
button_class: String,
}, },
emits: ["update:modelValue"], emits: ["update:modelValue"],
}) })
export default class extends Vue { export default class extends Vue {
// true, iff Benutzer Admin ist // true, iff Benutzer Admin ist
public modelValue!: boolean; public modelValue!: boolean;
public button_class!: string;
public modal_visible = false; public modal_visible = false;
public is_busy = false; public is_busy = false;

6
ui/src/components/Calendar.vue
View file

@ -2,6 +2,9 @@
<MultiModal @handle="modal_handle" /> <MultiModal @handle="modal_handle" />
<figure> <figure>
<figcaption class="has-text-primary-dark">
{{ figure_caption }}
</figcaption>
<div class="image is-unselectable"> <div class="image is-unselectable">
<img :src="$advent22.api_url('user/background_image')" /> <img :src="$advent22.api_url('user/background_image')" />
<ThouCanvas> <ThouCanvas>
@ -19,9 +22,6 @@
/> />
</ThouCanvas> </ThouCanvas>
</div> </div>
<figcaption class="has-text-primary-dark">
{{ figure_caption }}
</figcaption>
</figure> </figure>
</template> </template>

6
ui/src/components/MultiModal.vue
View file

@ -8,12 +8,12 @@
</template> </template>
<template v-else> <template v-else>
<figure> <figure>
<div class="image is-square">
<img :src="image_src" alt="Kalender-Bild" />
</div>
<figcaption class="tag is-primary"> <figcaption class="tag is-primary">
{{ figure_caption }} {{ figure_caption }}
</figcaption> </figcaption>
<div class="image is-square">
<img :src="image_src" alt="Kalender-Bild" />
</div>
</figure> </figure>
</template> </template>
</div> </div>