Vippspppspsps

src/ui/Highscore.vue

@@ -28,6 +28,7 @@ export default {
 
 <style lang="scss" scoped>
 div {
+  margin: auto 0;
   font-family: "knowit";
   display: inline-flex;
   flex-direction: column;

src/ui/PurchaseGraph.vue

@@ -79,6 +79,10 @@ export default {
           text: "Antall kjøp"
         },
         legend: {
+          display: true,
+          boxWidth: 3,
+          usePointStyle: true,
+          borderRadius: 10,
           labels: {
             // This more specific font property overrides the global property
             defaultFontFamily: (Chart.defaults.global.defaultFontFamily =
@@ -88,6 +92,7 @@ export default {
         scales: {
           yAxes: [
             {
+              stacked: true,
               ticks: {
                 beginAtZero: true,
                 suggestedMax: highestNumber + 5

src/ui/Vipps.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="vipps-container">
+    <img src="/public/assets/images/vipps-logo.svg" class="vipps-logo" />
+    <span>
+      kr.
+      <span class="big-money">10,-</span> pr. lodd
+    </span>
+    <img src="/public/assets/images/vipps-qr.png" class="qr-logo" />
+    <span class="phone-number">977 40 427</span>
+    <span class="name">Kasper Rynning-Tønnesen</span>
+    <span class="mark-with">Merk med: Vinlodd/🍾</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vipps-container {
+  font-family: sans-serif;
+}
+
+.vipps-container {
+  border-radius: 10px;
+  background-color: #ff5b23;
+  display: flex;
+  flex-direction: column;
+  color: white;
+  text-align: center;
+  padding: 25px 30px 25px 25px;
+  width: 250px;
+  margin: auto 0;
+}
+
+.big-money {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.vipps-logo {
+  padding-bottom: 10px;
+}
+
+.phone-number {
+  font-size: 1.75rem;
+  font-weight: bold;
+  padding-top: 20px;
+  padding-bottom: 10px;
+}
+
+.qr-logo {
+  margin-top: 15px;
+  border-radius: 10px;
+  width: 220px;
+  margin: 15px auto auto auto;
+}
+
+.name,
+.mark-with {
+  font-weight: 600;
+  font-size: 1rem;
+}
+</style>

src/ui/Wines.vue

@@ -3,8 +3,14 @@
     <h3>Viner</h3>
     <ol>
       <li v-for="wine in wines">
-          <span v-if="wine.vivinoLink == '' || wine.vivinoLink == null">{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</span>
-          <a :href="wine.vivinoLink" v-if="wine.vivinoLink != '' && wine.vivinoLink != null">{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</a></li>
+        <span
+          v-if="wine.vivinoLink == '' || wine.vivinoLink == null"
+        >{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</span>
+        <a
+          :href="wine.vivinoLink"
+          v-if="wine.vivinoLink != '' && wine.vivinoLink != null"
+        >{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</a>
+      </li>
     </ol>
   </div>
 </template>
@@ -19,11 +25,9 @@ export default {
     let response = await _response.json();
 
     response.sort();
-    response = response.filter(
-      wine => wine.name != null && wine.name != ""
-    ).sort((a, b) => 
-      a.occurences > b.occurences ? -1 : 1
-    );
+    response = response
+      .filter(wine => wine.name != null && wine.name != "")
+      .sort((a, b) => (a.occurences > b.occurences ? -1 : 1));
     this.wines = response;
   }
 };
@@ -31,16 +35,17 @@ export default {
 
 <style lang="scss" scoped>
 h3 {
-    text-align:center;
+  text-align: center;
 }
 div {
+  margin: auto 0;
   font-family: "knowit";
   display: inline-flex;
   flex-direction: column;
 }
 
 a {
-    text-decoration: none;
-    color: orange;
+  text-decoration: none;
+  color: orange;
 }
 </style>