bulma/Drawer using "card"

ui/src/components/ConfigView.vue

@@ -1,16 +1,7 @@
 <template>
-  <div class="card">
+  <BulmaDrawer header="Konfiguration">
-    <header class="card-header has-background-grey-lighter">
-      <p class="card-header-title">Konfiguration</p>
-      <button class="card-header-icon">
-        <span class="icon">
-          <font-awesome-icon icon="fa-solid fa-angle-down" />
-        </span>
-      </button>
-    </header>
-
     <div class="card-content">
-      <div class="columns" style="width: 100%">
+      <div class="columns">
         <div class="column content">
           <h4>Rätsel</h4>
           <dl>
@@ -83,7 +74,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </BulmaDrawer>
 </template>
 
 <script lang="ts">

ui/src/components/DoorMapEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <BulmaDrawer header="Türchen bearbeiten">
-    <div class="panel-tabs is-justify-content-space-between">
+    <div class="is-flex is-align-items-center is-justify-content-space-between">
       <BulmaButton
         :disabled="current_step === 0"
         class="is-link"
@@ -18,39 +18,33 @@
 
     <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
     <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
-    <div v-if="current_step === 2" class="panel-block">
+    <div v-if="current_step === 2" class="card-content">
       <Calendar :doors="doors" />
     </div>
 
-    <div class="panel-block is-flex is-justify-content-space-around">
+    <footer class="card-footer is-flex is-justify-content-space-around">
       <BulmaButton
-        class="is-danger"
+        class="card-footer-item is-danger"
         @click="on_download"
         icon="fa-solid fa-cloud-arrow-down"
         text="Laden"
       />
       <BulmaButton
-        class="is-warning"
+        class="card-footer-item is-warning"
         @click="on_discard"
         icon="fa-solid fa-trash"
         text="Löschen"
       />
       <BulmaButton
-        class="is-success"
+        class="card-footer-item is-success"
         @click="on_upload"
         icon="fa-solid fa-cloud-arrow-up"
         text="Speichern"
       />
-    </div>
+    </footer>
   </BulmaDrawer>
 </template>
 
-<style scoped>
-div.panel-block.is-flex button {
-  min-width: 150px;
-}
-</style>
-
 <script lang="ts">
 import { Door, DoorsSaved } from "@/lib/door";
 import { Options, Vue } from "vue-class-component";

ui/src/components/bulma/Drawer.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="panel">
+  <div class="card">
-    <p class="panel-heading is-unselectable" @click="is_open = !is_open">
+    <header
-      <span class="icon-text">
+      class="card-header has-background-grey-lighter is-unselectable"
+      @click="is_open = !is_open"
+    >
+      <p class="card-header-title">{{ header }}</p>
+      <button class="card-header-icon">
         <span class="icon">
           <font-awesome-icon
             :icon="'fa-solid fa-angle-' + (is_open ? 'down' : 'right')"
           />
         </span>
-        <span v-if="header !== ''">{{ header }}</span>
+      </button>
-      </span>
+    </header>
-    </p>
+
     <slot v-if="is_open" name="default" />
   </div>
 </template>
@@ -33,7 +37,7 @@ export default class extends Vue {
 </script>
 
 <style scoped>
-div.panel > .panel-heading {
+div.card > .card-header {
   cursor: pointer;
 }
 </style>

ui/src/components/editor/DoorChooser.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="panel-block is-flex-direction-column">
+  <div class="card-content">
-    <div class="content" style="width: 100%">
+    <div class="content">
       <h3>Steuerung</h3>
       <ul>
         <li>Linksklick: Türchen bearbeiten</li>

ui/src/components/editor/DoorPlacer.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="panel-block is-flex-direction-column">
+  <div class="card-content">
-    <div class="content" style="width: 100%">
+    <div class="content">
       <h3>Steuerung</h3>
       <ul>
         <li>Linksklick + Ziehen: Neues Türchen erstellen</li>