From a645dc84cc700ba2e84f7a34689f2afe8be5f1de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 10 Sep 2023 03:25:12 +0000
Subject: [PATCH] ConfigView using bulma "card"

---
 ui/src/components/ConfigView.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/ConfigView.vue b/ui/src/components/ConfigView.vue
index cd5f266..c64fb32 100644
--- a/ui/src/components/ConfigView.vue
+++ b/ui/src/components/ConfigView.vue
@@ -1,6 +1,15 @@
 <template>
-  <BulmaDrawer header="Konfiguration">
-    <div class="panel-block">
+  <div class="card">
+    <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="column content">
           <h4>Rätsel</h4>
@@ -74,7 +83,7 @@
         </div>
       </div>
     </div>
-  </BulmaDrawer>
+  </div>
 </template>
 
 <script lang="ts">
@@ -90,4 +99,8 @@ import BulmaDrawer from "./bulma/Drawer.vue";
 export default class extends Vue {}
 </script>
 
-<style scoped></style>
+<style scoped>
+div.card:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+</style>