Colorscheme and Layout optimizations

ui/src/App.vue

@@ -5,12 +5,9 @@
       <h2 class="subtitle has-text-centered">Der Gelöt</h2>
     </section>
 
-    <section v-if="is_admin" class="section">
-      <AdminView />
-    </section>
-
-    <section v-else class="section">
-      <UserView />
+    <section class="section">
+      <AdminView v-if="is_admin" />
+      <UserView v-else />
     </section>
 
     <section class="section">

ui/src/components/admin/CalendarAssistant.vue

@@ -31,7 +31,7 @@
           <BulmaButton
             v-for="(day_part, index) in day_parts"
             :key="`btn-${index}`"
-            class="tag button is-primary"
+            class="tag button is-info"
             icon="fa-solid fa-door-open"
             :text="`${day_part.day}`"
             @click.left="door_click(day_part.day)"

ui/src/components/admin/DoorMapEditor.vue

@@ -1,20 +1,28 @@
 <template>
   <BulmaDrawer header="Türchen bearbeiten" @open="on_open">
-    <div class="is-flex is-align-items-center is-justify-content-space-between">
-      <BulmaButton
-        :disabled="current_step === 0"
-        class="is-link"
-        @click="current_step--"
-        icon="fa-solid fa-backward"
-      />
-      <BulmaBreadcrumbs :steps="steps" v-model="current_step" class="mb-0" />
-      <BulmaButton
-        :disabled="current_step === 2"
-        class="is-link"
-        @click="current_step++"
-        icon="fa-solid fa-forward"
-      />
-    </div>
+    <nav class="level mb-0">
+      <div class="level-item">
+        <BulmaButton
+          :disabled="current_step === 0"
+          class="is-link"
+          @click="current_step--"
+          icon="fa-solid fa-backward"
+        />
+      </div>
+
+      <div class="level-item">
+        <BulmaBreadcrumbs :steps="steps" v-model="current_step" class="mb-0" />
+      </div>
+
+      <div class="level-item">
+        <BulmaButton
+          :disabled="current_step === 2"
+          class="is-link"
+          @click="current_step++"
+          icon="fa-solid fa-forward"
+        />
+      </div>
+    </nav>
 
     <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
     <DoorChooser v-if="current_step === 1" v-model:doors="doors" />

ui/src/components/bulma/Button.vue

@@ -1,9 +1,16 @@
 <template>
   <button class="button">
-    <span v-if="icon !== undefined" class="icon">
+    <slot v-if="text === undefined" name="default">
       <font-awesome-icon :icon="icon" :beat-fade="busy" />
-    </span>
-    <span v-if="text !== ''">{{ text }}</span>
+    </slot>
+    <template v-else>
+      <span v-if="icon !== undefined" class="icon">
+        <slot name="default">
+          <font-awesome-icon :icon="icon" :beat-fade="busy" />
+        </slot>
+      </span>
+      <span>{{ text }}</span>
+    </template>
   </button>
 </template>
 
@@ -18,7 +25,7 @@ import { Options, Vue } from "vue-class-component";
     },
     text: {
       type: String,
-      default: "",
+      required: false,
     },
     busy: {
       type: Boolean,
@@ -28,7 +35,7 @@ import { Options, Vue } from "vue-class-component";
 })
 export default class extends Vue {
   public icon?: string;
-  public text!: string;
+  public text?: string;
   public busy!: boolean;
 }
 </script>

ui/src/components/bulma/Drawer.vue

@@ -4,12 +4,12 @@
       <p class="card-header-title" @click="toggle">{{ header }}</p>
 
       <p v-if="refreshable" class="card-header-icon px-0">
-        <button class="tag button icon is-info" @click="refresh">
+        <BulmaButton class="tag icon is-primary" @click="refresh">
           <font-awesome-icon
             icon="fa-solid fa-arrows-rotate"
             :spin="is_open && loading"
           />
-        </button>
+        </BulmaButton>
       </p>
 
       <button class="card-header-icon" @click="toggle">
@@ -23,7 +23,7 @@
 
     <template v-if="is_open">
       <div v-if="loading" class="card-content">
-        <progress class="progress is-info" max="100" />
+        <progress class="progress is-primary" max="100" />
       </div>
       <div
         v-else-if="failed"
@@ -41,13 +41,18 @@
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
 
-export enum DrawerState {
+import BulmaButton from "./Button.vue";
+
+enum DrawerState {
   Loading,
   Ready,
   Failed,
 }
 
 @Options({
+  components: {
+    BulmaButton,
+  },
   props: {
     header: String,
     refreshable: {

ui/src/components/bulma/Secret.vue

@@ -1,14 +1,19 @@
 <template>
   <slot v-if="show" name="default" />
   <span v-else>***</span>
-  <button :class="`tag button icon is-${button_class} ml-2`" @click="on_click">
-    <font-awesome-icon :icon="`fa-solid fa-${button_icon}`" />
-  </button>
+  <BulmaButton
+    :class="`tag icon is-${button_class} ml-2`"
+    :icon="`fa-solid fa-${button_icon}`"
+    :busy="busy"
+    @click="on_click"
+  />
 </template>
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
 
+import BulmaButton from "./Button.vue";
+
 enum ClickState {
   Green = 0,
   Yellow = 1,
@@ -16,6 +21,9 @@ enum ClickState {
 }
 
 @Options({
+  components: {
+    BulmaButton,
+  },
   emits: ["load"],
 })
 export default class extends Vue {
@@ -34,6 +42,10 @@ export default class extends Vue {
     return this.state === ClickState.Red;
   }
 
+  public get busy(): boolean {
+    return this.state === ClickState.Yellow;
+  }
+
   public get button_class(): string {
     switch (this.state) {
       case ClickState.Red: