Moved some files around, improved how notifications are being requested, and improved activation and installation-flow of serviceworker

src/ui/UpdateToast.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="update-toast" :class="showClass">
+    <span>{{text}}</span>
+    <div class="button-container">
+      <button v-if="refreshButton" @click="refresh">Refresh</button>
+      <button @click="closeToast">Lukk</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: { type: String, required: true },
+    refreshButton: { type: Boolean, required: false }
+  },
+  data() {
+    return { showClass: null };
+  },
+  created() {
+    this.showClass = "show";
+  },
+  mounted() {
+    if (this.refreshButton) {
+      return;
+    }
+    setTimeout(() => {
+      this.$emit("closeToast");
+    }, 5000);
+  },
+  methods: {
+    refresh: function() {
+      location.reload();
+    },
+    closeToast: function() {
+      this.$emit("closeToast");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+
+.update-toast {
+  position: fixed;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background: #2d2d2d;
+  border-radius: 5px;
+  padding: 15px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 50vw;
+  opacity: 0;
+  pointer-events: none;
+
+  &.show {
+    pointer-events: all;
+    opacity: 1;
+  }
+
+  -webkit-transition: opacity 0.5s ease-in-out;
+  -moz-transition: opacity 0.5s ease-in-out;
+  -ms-transition: opacity 0.5s ease-in-out;
+  -o-transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+
+  @include mobile {
+    width: 85vw;
+    bottom: 0px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
+  & span {
+    color: white;
+  }
+
+  & .button-container {
+    & button {
+      color: #2d2d2d;
+      background-color: white;
+      border-radius: 5px;
+      padding: 10px;
+      margin: 0 3px;
+      font-size: 0.8rem;
+
+      &:active {
+        background: #2d2d2d;
+        color: white;
+      }
+    }
+  }
+}
+</style>

src/ui/Wine.vue

@@ -1,7 +1,12 @@
 <template>
-  <div class="inner-wine-container">
+  <div class="inner-wine-container" :class="{ 'big': fullscreen }">
     <div class="left">
-      <img :src="wine.image" class="wine-image" :class="{ 'fullscreen': fullscreen }"/>
+      <!-- <img :src="wine.image" class="wine-image" :class="{ 'fullscreen': fullscreen }"/> -->
+      <img
+        src="https://images.vivino.com/thumbs/QRhTyEmKR8Wi_C1N2uqBWg_pb_x960.png"
+        class="wine-image"
+        :class="{ 'fullscreen': fullscreen }"
+      />
     </div>
     <div class="right">
       <h2>{{ wine.name }}</h2>
@@ -12,7 +17,7 @@
         Vunnet av:
         {{wine.winners.join(", ")}}
       </span>
-      <div class="color-wins">
+      <div class="color-wins" :class="{ 'big': fullscreen }">
         <span class="color-win blue">{{wine.blue == undefined ? 0 : wine.blue}}</span>
         <span class="color-win red">{{wine.red == undefined ? 0 : wine.red}}</span>
         <span class="color-win green">{{wine.green == undefined ? 0 : wine.green}}</span>
@@ -45,6 +50,7 @@ export default {
   &.fullscreen {
     @include desktop {
       height: unset;
+      max-height: 65vh;
     }
   }
 }
@@ -56,6 +62,10 @@ export default {
   flex-wrap: wrap;
 }
 
+.color-wins.big {
+  width: unset;
+}
+
 span.color-win {
   border: 2px solid transparent;
   color: #333;
@@ -111,6 +121,10 @@ h3 {
   font-family: Arial;
   margin-bottom: 30px;
 
+  &.big {
+    align-items: center;
+  }
+
   @include desktop {
     justify-content: center;
   }