From 6ba3947cb876a5af43b798b53c96aeb458ad4998 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Wed, 20 Sep 2023 22:03:32 +0000
Subject: [PATCH] some layout tweaks

---
 ui/src/App.vue                    | 37 +++++++++++++++++++------------
 ui/src/components/AdminButton.vue |  9 +++++---
 ui/src/components/Calendar.vue    |  6 ++---
 ui/src/components/MultiModal.vue  |  6 ++---
 4 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index efb0cfc..c4e7c3b 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,18 +1,8 @@
 <template>
-  <section class="hero is-primary">
-    <div class="level is-mobile">
-      <div class="level-left">
-        <div class="hero-body">
-          <h1 class="title is-uppercase">Adventskalender</h1>
-          <h2 class="subtitle">Der Gelöt</h2>
-        </div>
-      </div>
-
-      <div class="level-right">
-        <div class="level-item pr-4">
-          <AdminButton v-model="is_admin" />
-        </div>
-      </div>
+  <section class="hero is-small is-primary">
+    <div class="hero-body">
+      <h1 class="title is-uppercase">Adventskalender</h1>
+      <h2 class="subtitle">Der Gelöt</h2>
     </div>
   </section>
 
@@ -22,6 +12,25 @@
       <UserView v-else />
     </div>
   </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>
 
 <script lang="ts">
diff --git a/ui/src/components/AdminButton.vue b/ui/src/components/AdminButton.vue
index 88a4f41..dde95b9 100644
--- a/ui/src/components/AdminButton.vue
+++ b/ui/src/components/AdminButton.vue
@@ -2,11 +2,11 @@
   <LoginModal v-if="modal_visible" @submit="on_submit" @cancel="on_cancel" />
 
   <BulmaButton
-    class="button is-primary is-outlined is-inverted"
-    @click.left="on_click"
+    :class="button_class"
     :icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
     :busy="is_busy"
-    :text="modelValue ? 'Logout' : 'Login'"
+    text="Admin"
+    @click.left="on_click"
   />
 </template>
 
@@ -23,12 +23,15 @@ import LoginModal from "./LoginModal.vue";
   },
   props: {
     modelValue: Boolean,
+    button_class: String,
   },
   emits: ["update:modelValue"],
 })
 export default class extends Vue {
   // true, iff Benutzer Admin ist
   public modelValue!: boolean;
+  public button_class!: string;
+
   public modal_visible = false;
   public is_busy = false;
 
diff --git a/ui/src/components/Calendar.vue b/ui/src/components/Calendar.vue
index 2cfd669..d10b671 100644
--- a/ui/src/components/Calendar.vue
+++ b/ui/src/components/Calendar.vue
@@ -2,6 +2,9 @@
   <MultiModal @handle="modal_handle" />
 
   <figure>
+    <figcaption class="has-text-primary-dark">
+      {{ figure_caption }}
+    </figcaption>
     <div class="image is-unselectable">
       <img :src="$advent22.api_url('user/background_image')" />
       <ThouCanvas>
@@ -19,9 +22,6 @@
         />
       </ThouCanvas>
     </div>
-    <figcaption class="has-text-primary-dark">
-      {{ figure_caption }}
-    </figcaption>
   </figure>
 </template>
 
diff --git a/ui/src/components/MultiModal.vue b/ui/src/components/MultiModal.vue
index ed68e49..1fc011d 100644
--- a/ui/src/components/MultiModal.vue
+++ b/ui/src/components/MultiModal.vue
@@ -8,12 +8,12 @@
       </template>
       <template v-else>
         <figure>
-          <div class="image is-square">
-            <img :src="image_src" alt="Kalender-Bild" />
-          </div>
           <figcaption class="tag is-primary">
             {{ figure_caption }}
           </figcaption>
+          <div class="image is-square">
+            <img :src="image_src" alt="Kalender-Bild" />
+          </div>
         </figure>
       </template>
     </div>