From c5680f37f60028626e6f1be5cad67476dbce6cbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sat, 9 Sep 2023 23:08:43 +0000
Subject: [PATCH] DoorPlacer/DoorChooser with panel-block

---
 ui/src/components/Calendar.vue                | 28 +++++++++----------
 ui/src/components/DoorMapEditor.vue           |  8 +++---
 .../calendar/editor/DoorChooser.vue           |  8 +++---
 .../components/calendar/editor/DoorPlacer.vue |  8 +++---
 4 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/ui/src/components/Calendar.vue b/ui/src/components/Calendar.vue
index a6e86e0..fb23999 100644
--- a/ui/src/components/Calendar.vue
+++ b/ui/src/components/Calendar.vue
@@ -1,21 +1,19 @@
 <template>
   <MultiModal ref="multi_modal" />
 
-  <section>
-    <figure class="image is-unselectable">
-      <img :src="$advent22.api_url('general/background')" />
-      <ThouCanvas>
-        <CalendarDoor
-          v-for="(_, index) in doors"
-          :key="`door-${index}`"
-          :door="doors[index]"
-          @doorClick="door_click"
-          @doorSuccess="door_success"
-          @doorFailure="door_failure"
-        />
-      </ThouCanvas>
-    </figure>
-  </section>
+  <figure class="image is-unselectable">
+    <img :src="$advent22.api_url('general/background')" />
+    <ThouCanvas>
+      <CalendarDoor
+        v-for="(_, index) in doors"
+        :key="`door-${index}`"
+        :door="doors[index]"
+        @doorClick="door_click"
+        @doorSuccess="door_success"
+        @doorFailure="door_failure"
+      />
+    </ThouCanvas>
+  </figure>
 </template>
 
 <script lang="ts">
diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index dd21415..a28807a 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -19,10 +19,10 @@
         />
       </div>
 
-      <div class="panel-block">
-        <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
-        <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
-        <Calendar v-if="current_step === 2" :doors="doors" />
+      <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">
+        <Calendar :doors="doors" />
       </div>
 
       <div class="panel-block is-flex is-justify-content-space-between">
diff --git a/ui/src/components/calendar/editor/DoorChooser.vue b/ui/src/components/calendar/editor/DoorChooser.vue
index eac9bae..3ac5028 100644
--- a/ui/src/components/calendar/editor/DoorChooser.vue
+++ b/ui/src/components/calendar/editor/DoorChooser.vue
@@ -1,7 +1,7 @@
 <template>
-  <section>
-    <div class="content">
-      <p class="title is-5">Steuerung</p>
+  <div class="panel-block is-flex-direction-column">
+    <div class="content" style="width: 100%">
+      <h3>Steuerung</h3>
       <ul>
         <li>Linksklick: Türchen bearbeiten</li>
         <li>Tastatur: Tag eingeben</li>
@@ -20,7 +20,7 @@
         />
       </ThouCanvas>
     </figure>
-  </section>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/ui/src/components/calendar/editor/DoorPlacer.vue b/ui/src/components/calendar/editor/DoorPlacer.vue
index fc7f650..4dc10c6 100644
--- a/ui/src/components/calendar/editor/DoorPlacer.vue
+++ b/ui/src/components/calendar/editor/DoorPlacer.vue
@@ -1,7 +1,7 @@
 <template>
-  <section>
-    <div class="content">
-      <p class="title is-5">Steuerung</p>
+  <div class="panel-block is-flex-direction-column">
+    <div class="content" style="width: 100%">
+      <h3>Steuerung</h3>
       <ul>
         <li>Linksklick + Ziehen: Neues Türchen erstellen</li>
         <li>Rechtsklick + Ziehen: Türchen verschieben</li>
@@ -17,7 +17,7 @@
         @remove="on_remove"
       />
     </figure>
-  </section>
+  </div>
 </template>
 
 <script lang="ts">