bulma-ify DoorMapEditor

ui/src/components/DoorMapEditor.vue

@@ -1,7 +1,28 @@
 <template>
-  <div ref="container">
-    <img ref="background" src="@/assets/adventskalender.jpg" />
-    <RectPad id="rectpad" />
+  <div class="box">
+    <p class="title is-4">Türchen bearbeiten</p>
+
+    <div class="tabs is-centered">
+      <ul>
+        <li class="is-active"><a>Platzieren</a></li>
+        <li><a>Ordnen</a></li>
+        <li><a>Überprüfen</a></li>
+      </ul>
+    </div>
+
+    <section v-if="step === 0">
+      <div class="content">
+        <ul>
+          <li>Linksklick + Ziehen: Neues Türchen erstellen</li>
+          <li>Rechtsklick + Ziehen: Türchen verschieben</li>
+          <li>Doppel- oder Mittelklick: Türchen löschen</li>
+        </ul>
+      </div>
+      <figure class="image">
+        <img src="@/assets/adventskalender.jpg" />
+        <RectPad />
+      </figure>
+    </section>
   </div>
 </template>
 
@@ -15,46 +36,19 @@ import RectPad from "./rects/RectPad.vue";
   },
 })
 export default class CalendarImage extends Vue {
-  private resize_observer?: ResizeObserver;
-
-  declare $refs: {
-    container: HTMLDivElement;
-    background: HTMLImageElement;
-  };
-
-  private on_resize() {
-    this.$refs.container.style.height =
-      this.$refs.background.offsetHeight + "px";
-  }
-
-  public mounted() {
-    this.resize_observer = new ResizeObserver(this.on_resize);
-    this.resize_observer.observe(this.$refs.background);
-  }
-
-  public unmounted() {
-    if (this.resize_observer instanceof ResizeObserver) {
-      this.resize_observer.disconnect();
-      delete this.resize_observer;
-    }
-  }
+  private step = 0;
 }
 </script>
 
 <style lang="scss" scoped>
-div {
-  position: relative;
+figure {
   user-select: none;
 
-  img {
+  img + * {
     position: absolute;
-    z-index: 1;
-    width: 100%;
-  }
-
-  #rectpad {
-    position: absolute;
-    z-index: 2;
+    left: 0;
+    top: 0;
+    z-index: 99;
   }
 }
 </style>