countdown more places

src/Vinlottis.vue

@@ -2,16 +2,14 @@
   <div class="container">
     <banner />
     <router-view />
-    <Countdown />
   </div>
 </template>
 
 <script>
 import banner from "@/ui/Banner";
-import Countdown from "@/ui/Countdown";
 export default {
   name: "vinlottis",
-  components: { banner, Countdown },
+  components: { banner },
   props: {},
   data() {
     return {};

src/components/GeneratePage.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="container">
-    <h1 class="title">Loddgenerator</h1>
-    <p class="subtext">Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
+    <h1 class="title" @click="startCountdown">Loddgenerator</h1>
+    <p class="subtext">
+      Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
+    </p>
     <div class="input-line">
       <label for="redCheckbox">
         <input type="checkbox" id="redCheckbox" v-model="redCheckbox" />
@@ -52,6 +54,7 @@
     </div>
 
     <Vipps class="vipps" />
+    <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
   </div>
 </template>
 
@@ -59,11 +62,13 @@
 import { page, event } from "vue-analytics";
 import Vipps from "@/ui/Vipps";
 import Banner from "@/ui/Banner";
+import Countdown from "@/ui/Countdown";
 
 export default {
   components: {
     Banner,
-    Vipps
+    Vipps,
+    Countdown
   },
   data() {
     return {
@@ -77,7 +82,8 @@ export default {
       redCheckbox: true,
       greenCheckbox: true,
       yellowCheckbox: true,
-      blueCheckbox: true
+      blueCheckbox: true,
+      hardStart: false
     };
   },
   watch: {
@@ -92,10 +98,16 @@ export default {
     this.track();
   },
   methods: {
+    changeEnabled: function(way) {
+      this.hardStart = way;
+    },
+    startCountdown: function() {
+      this.hardStart = true;
+    },
     generateColors: function(event, time) {
       if (time == 5) {
         if (this.numberOfBallots > 1 && new Set(this.colors).size == 1) {
-          alert('BINGO')
+          alert("BINGO");
         }
 
         if (window.location.hostname == "localhost") {
@@ -187,7 +199,9 @@ export default {
 @import "../styles/variables.scss";
 @import "../styles/global.scss";
 @import "../styles/media-queries.scss";
-
+h1 {
+  cursor: pointer;
+}
 .vipps {
   margin: 20px auto auto auto;
 }

src/components/VinlottisPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="outer">
     <div class="container">
-      <h1 class="title">Vinlotteri</h1>
+      <h1 class="title" @click="startCountdown">Vinlotteri</h1>
       <router-link to="generate" class="generate-link">
         Klarer du ikke velge lodd-farger?
         <span class="subtext generator-link">Prøv loddgeneratoren</span>
@@ -24,6 +24,7 @@
         </div>
       </div>
     </div>
+    <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
   </div>
 </template>
 
@@ -36,6 +37,7 @@ import WinGraph from "@/ui/WinGraph";
 import Banner from "@/ui/Banner";
 import Wines from "@/ui/Wines";
 import Vipps from "@/ui/Vipps";
+import Countdown from "@/ui/Countdown";
 
 export default {
   components: {
@@ -45,7 +47,13 @@ export default {
     WinGraph,
     Banner,
     Wines,
-    Vipps
+    Vipps,
+    Countdown
+  },
+  data() {
+    return {
+      hardStart: false
+    };
   },
   mounted() {
     if (window.location.hostname == "localhost") {
@@ -54,8 +62,14 @@ export default {
     this.track();
   },
   methods: {
+    changeEnabled(way) {
+      this.hardStart = way;
+    },
     track() {
       this.$ga.page("/");
+    },
+    startCountdown() {
+      this.hardStart = true;
     }
   }
 };
@@ -75,6 +89,10 @@ export default {
   padding: 0 25px;
 }
 
+.title {
+  cursor: pointer;
+}
+
 .left-bottom {
   width: 75%;
 

src/ui/Countdown.vue

@@ -16,6 +16,12 @@
 
 <script>
 export default {
+  props: {
+    hardEnable: {
+      type: Boolean,
+      required: false
+    }
+  },
   data() {
     return {
       nextLottery: null,
@@ -30,6 +36,15 @@ export default {
       interval: null
     };
   },
+  watch: {
+    hardEnable: function(hardEnable) {
+      if (hardEnable) {
+        this.enabled = true;
+        this.initialize();
+        this.countdown();
+      }
+    }
+  },
   mounted() {
     window.addEventListener("keydown", this.listenerFunction);
   },
@@ -74,6 +89,7 @@ export default {
       this.enabled = false;
       document.querySelector("body").style.overflow = "auto";
       document.querySelector("body").style.height = "initial";
+      this.$emit("countdown", false);
     },
     countdown: function() {
       // Get today's date and time
@@ -103,6 +119,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/media-queries.scss";
 .clock {
   width: 100vw;
   height: 100vh;
@@ -110,6 +127,11 @@ export default {
   background: white;
   top: 0;
   left: 0;
+
+  @include mobile {
+    width: 105vw;
+    height: 110vh;
+  }
 }
 .cross {
   top: 15px;
@@ -117,6 +139,10 @@ export default {
   font-size: 2rem;
   position: absolute;
   cursor: pointer;
+
+  @include mobile {
+    right: 45px;
+  }
 }
 
 h2 {