From ad4493380a934a1e4ea1bdb3a524234d03d39311 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <Joern-Michael.Miehe@Lenaisten.de>
Date: Sun, 6 Sep 2020 19:09:02 +0200
Subject: [PATCH] responsivity

---
 ui/src/components/BDay.vue | 62 ++++++++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 20 deletions(-)

diff --git a/ui/src/components/BDay.vue b/ui/src/components/BDay.vue
index e4eeb75..4413ed6 100644
--- a/ui/src/components/BDay.vue
+++ b/ui/src/components/BDay.vue
@@ -1,20 +1,29 @@
 <template>
-  <div id="bday">
+  <div class="bday">
     <h1>Alles Gute zu Deinem Geburtstag!</h1>
-    <img id="play" src="../assets/play.png" usemap="#play" v-if="playVisible" />
-    <map name="#play">
-      <area shape="circle" coords="50, 50, 50" @click="playClicked" />
-    </map>
-    <vue-plyr
-      ref="plyr"
-      :options="plyrOptions"
-      :emit="['timeupdate', 'ready']"
-      @timeupdate="videoTimeUpdated"
-      @ready="videoLoaded"
-    >
-      <!-- inserted dynamically -->
-      <video poster="../assets/poster.png" />
-    </vue-plyr>
+    <div ref="plyrContainer" class="plyrContainer">
+      <img
+        ref="play"
+        class="play"
+        src="../assets/play.png"
+        usemap="#play"
+        v-show="playVisible"
+        @click="playClicked"
+      />
+      <map name="#play">
+        <area shape="circle" coords="50, 50, 50" @click="playClicked" />
+      </map>
+      <vue-plyr
+        ref="plyr"
+        :options="plyrOptions"
+        :emit="['timeupdate', 'ready']"
+        @timeupdate="videoTimeUpdated"
+        @ready="videoLoaded"
+      >
+        <!-- inserted dynamically -->
+        <video poster="../assets/poster.png" />
+      </vue-plyr>
+    </div>
   </div>
 </template>
 
@@ -69,6 +78,7 @@ export default {
     },
 
     videoLoaded: function () {
+      this.placePlay();
       if (this.currentVideo >= 0) {
         this.player.play();
       }
@@ -80,22 +90,36 @@ export default {
       this.currentVideo += 1;
       this.player.source = this.getVideoSource(this.currentVideo);
     },
+
+    placePlay: function () {
+      let top = (this.$refs.plyrContainer.offsetHeight - 100) / 2;
+      let left = (this.$refs.plyrContainer.offsetWidth - 100) / 2;
+
+      console.log(left, top);
+
+      this.$refs.play.style.top = top + "px";
+      this.$refs.play.style.left = left + "px";
+    },
   },
 
   mounted() {
     document.title = "Herzlichen Glückwunsch!";
+    window.addEventListener("resize", this.placePlay);
   },
 };
 </script>
 
 <style scoped>
-div#bday {
+div.bday {
   margin: auto;
-  width: 854px;
+  max-width: 854px;
+}
+
+div.plyrContainer {
   position: relative;
 }
 
-img#play {
+img.play {
   outline: none;
 
   -webkit-user-select: none; /* Safari */
@@ -104,8 +128,6 @@ img#play {
   user-select: none; /* Standard */
 
   position: absolute;
-  bottom: 190px;
-  left: 377px;
   z-index: 1001;
 }