From dd4875698c028d6b023de539adfb35c29c97cf91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Tue, 10 Mar 2020 10:15:53 +0100
Subject: [PATCH 1/3] All v-for gets a key

---
 src/components/AllWinesPage.vue | 2 +-
 src/components/RegisterPage.vue | 8 ++++----
 src/components/TodaysPage.vue   | 2 +-
 src/ui/Highscore.vue            | 2 +-
 src/ui/Wines.vue                | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/AllWinesPage.vue b/src/components/AllWinesPage.vue
index ca50da4..174fc99 100644
--- a/src/components/AllWinesPage.vue
+++ b/src/components/AllWinesPage.vue
@@ -3,7 +3,7 @@
     <div class="container">
       <h1 class="title">Alle viner</h1>
       <div class="wines-container">
-        <Wine :wine="wine" v-for="wine in wines" />
+        <Wine :wine="wine" v-for="wine in wines" :key="wine" />
       </div>
     </div>
   </div>
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index fd85501..53bb766 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -26,7 +26,7 @@
     </div>
 
     <div v-if="wines.length > 0">
-      <wine v-for="wine in wines" :wine="wine">
+      <wine v-for="wine in wines" :key="key" :wine="wine">
         <div class="button-container row">
           <button class="vin-button" @click="editWine = amIBeingEdited(wine) ? false : wine">
             {{ amIBeingEdited(wine) ? "Lukk" : "Rediger" }}
@@ -35,7 +35,7 @@
         </div>
 
         <div v-if="amIBeingEdited(wine)" class="wine-edit">
-          <div class="label-div" v-for="key in Object.keys(wine)">
+          <div class="label-div" v-for="key in Object.keys(wine)" :key="key">
             <label>{{ key }}</label>
             <input type="text" v-model="wine[key]" :placeholder="key" />
           </div>
@@ -52,7 +52,7 @@
 
     <h3>Legg til lodd kjøpt</h3>
     <div class="colors">
-      <div v-for="color in lotteryColorBoxes" :class="color.css + ' colors-box'">
+      <div v-for="color in lotteryColorBoxes" :class="color.css + ' colors-box'" :key="color">
        <div class="colors-overlay">
           <p>{{ color.name }} kjøpt</p>
           <input v-model="color.value"
@@ -70,7 +70,7 @@
 
     <h3>Vinnere</h3>
     <div class="winner-container" v-if="winners.length > 0">
-      <wine v-for="winner in winners" :wine="winner.wine">
+      <wine v-for="winner in winners" :key="winner" :wine="winner.wine">
         <div class="winner-element">
           <div class="color-selector">
             <div class="label-div">
diff --git a/src/components/TodaysPage.vue b/src/components/TodaysPage.vue
index ca58861..e24dac5 100644
--- a/src/components/TodaysPage.vue
+++ b/src/components/TodaysPage.vue
@@ -3,7 +3,7 @@
     <div class="container">
       <h1 class="title">Dagens viner</h1>
       <div class="wines-container">
-        <a :href="wine.vivinoLink" v-for="wine in wines">
+        <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" />
diff --git a/src/ui/Highscore.vue b/src/ui/Highscore.vue
index 25a45e6..3201460 100644
--- a/src/ui/Highscore.vue
+++ b/src/ui/Highscore.vue
@@ -2,7 +2,7 @@
   <div class="highscores" v-if="highscore.length > 0">
     <h3>Topp 10 vinnere</h3>
     <ol>
-      <li v-for="person in highscore">
+      <li v-for="person in highscore" :key="person">
         {{ person.name }} - {{ person.wins.length }}
       </li>
     </ol>
diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue
index 78bb5d7..27e1687 100644
--- a/src/ui/Wines.vue
+++ b/src/ui/Wines.vue
@@ -6,7 +6,7 @@
       >
     </h3>
     <ol>
-      <li v-for="wine in wines">
+      <li v-for="wine in wines" :key="wine">
         <span v-if="wine.vivinoLink == '' || wine.vivinoLink == null">
           {{ wine.name }} - sett {{ wine.occurences }} ganger,
           {{ wine.rating }} i rating

From 0fc7e656122b0f51a1b432e509974a305b55d147 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Tue, 10 Mar 2020 10:16:32 +0100
Subject: [PATCH 2/3] When setting colors from localstorage we set to null if
 value is 0.

---
 src/components/RegisterPage.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index 53bb766..cc1c8d3 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -305,10 +305,6 @@
         }
       },
       getWinnerdataFromStorage() {
-        if (this.winners.length == 0) {
-          return
-        }
-        
         let localWinners = localStorage.getItem("winners");
         if (localWinners) {
           localWinners = JSON.parse(localWinners);
@@ -329,14 +325,15 @@
         if (localColors) {
           localColors = localColors.split(",")
           this.lotteryColorBoxes.forEach((color, i) => {
-            color.value = Number(localColors[i]) || null
+            const localColorValue = Number(localColors[i])
+            color.value = localColorValue == 0 ? null : localColorValue
           })
         }
       },
       setWinnerdataToStorage() {
         console.log("saving localstorage")
         localStorage.setItem("winners", JSON.stringify(this.winners))
-        localStorage.setItem("colorValues", this.lotteryColorBoxes.map(color => color.value || null))
+        localStorage.setItem("colorValues", this.lotteryColorBoxes.map(color => Number(color.value)))
         window.removeEventListener("unload", this.setWinnerdataToStorage)
       },
       resetWinnerDataInStorage() {

From 78fb6f30de932c3ff4ae29d3bef17677382e210e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Tue, 10 Mar 2020 10:16:48 +0100
Subject: [PATCH 3/3] Desktop friendly styling for login and create pages.

---
 src/styles/loginAndRegister.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/styles/loginAndRegister.scss b/src/styles/loginAndRegister.scss
index 91a3c89..40d7068 100644
--- a/src/styles/loginAndRegister.scss
+++ b/src/styles/loginAndRegister.scss
@@ -27,14 +27,14 @@ form {
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
-  margin: 0 auto;
-  width: 60vw;
+  margin: 2rem auto 0;
+  width: 80vw;
+  max-width: 1100px;
 
   @include mobile {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    margin: 0 auto;
     width: 90vw;
   }
 
@@ -44,8 +44,10 @@ form {
     line-height: 2rem;
     border: none;
     border-bottom: 1px solid black;
+    max-width: 30vw;
 
     @include mobile {
+      max-width: unset;
       font-size: 2rem;
       min-height: 2rem;
       line-height: 2rem;
@@ -66,4 +68,4 @@ form {
   width: calc(100% - 5rem);
   background-color: $light-red;
   color: $red;
-}
\ No newline at end of file
+}