Prettier timer and todays wines

src/components/TodaysPage.vue

@@ -3,18 +3,7 @@
     <div class="container">
       <h1 class="title">Dagens viner</h1>
       <div class="wines-container">
-        <a :href="wine.vivinoLink" v-for="wine in wines" :key="wine">
-          <div class="inner-wine-container">
-            <div class="left">
-              <img :src="wine.image" class="wine-image" />
-            </div>
-            <div class="right">
-              <h3>{{ wine.name }}</h3>
-              <span v-if="wine.rating">{{ wine.rating }} rating</span>
-              <span class="wine-link">Les mer</span>
-            </div>
-          </div>
-        </a>
+        <Wine :wine="wine" v-for="wine in wines" :key="wine" :fullscreen="true" :inlineSlot="true" />
       </div>
     </div>
   </div>
@@ -23,10 +12,12 @@
 <script>
 import { page, event } from "vue-analytics";
 import Banner from "@/ui/Banner";
+import Wine from "@/ui/Wine";
 
 export default {
   components: {
-    Banner
+    Banner,
+    Wine
   },
   data() {
     return {
@@ -55,7 +46,7 @@ h1 {
 .wines-container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-evenly;
+  justify-content: space-between;
   margin: 0 2rem;
 
   @media (min-width: 1500px) {

src/ui/Banner.vue

@@ -3,14 +3,13 @@
     <div class="top-banner">
       <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
       <div class="clock">
-        <h2 cv-if="distance > 0">
+        <h2 v-if="!fiveMinutesLeft && !tenMinutesOver">
           <span v-if="days > 0">{{ pad(days) }}:</span>
-          <span>{{ pad(hours) }}</span
-          >: <span>{{ pad(minutes) }}</span
-          >:
+          <span>{{ pad(hours) }}</span>:
+          <span>{{ pad(minutes) }}</span>:
           <span>{{ pad(seconds) }}</span>
         </h2>
-        <h2 v-if="distance <= 0">Lotteriet har begynt!</h2>
+        <h2 v-if="twoMinutesLeft || tenMinutesOver">Lotteriet er i gang!</h2>
       </div>
     </div>
   </router-link>
@@ -35,6 +34,20 @@ export default {
   mounted() {
     this.initialize(), this.countdown();
   },
+  computed: {
+    fiveMinutesLeft: function() {
+      if (this.days == 0 && this.hours == 0 && this.minutes <= 2) {
+        return true;
+      }
+      return false;
+    },
+    tenMinutesOver: function() {
+      if (this.days == 6 && this.hours >= 23 && this.minutes >= 50) {
+        return true;
+      }
+      return false;
+    }
+  },
   methods: {
     pad: function(num) {
       if (num < 10) {
@@ -90,8 +103,7 @@ export default {
         this.days = 0;
       }
       if (this.distance < 0) {
-        clearTimeout(this.interval);
-        return;
+        this.initialize();
       }
       this.interval = setTimeout(this.countdown, 500);
     }