From 5f2b29324dfd8dde1cd1a3993219e9bbe1a77177 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 11 Oct 2020 16:31:40 +0200
Subject: [PATCH] Reflecting changes no longer use props in Wine.vue

Reflecting changes now that wine should not have custom logic. No longer
send prop values other than wine down.
WinnerPage function called from the slot passed down, not using custom
:winner prop and @chosenWine event.
---
 src/components/RegisterPage.vue | 12 ++++++++----
 src/components/TodaysPage.vue   | 12 +++++-------
 src/components/WinnerPage.vue   | 34 ++++++++++++++++-----------------
 3 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index 0cebbe9..52345d4 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -85,7 +85,7 @@
     <h3>Vinnere</h3>
     <a class="wine-link" @click="fetchColorsAndWinners()">Refresh data fra virtuelt lotteri</a>
     <div class="winner-container" v-if="winners.length > 0">
-      <wine v-for="winner in winners" :key="winner" :wine="winner.wine" :inlineSlot="true">
+      <wine v-for="winner in winners" :key="winner" :wine="winner.wine">
         <div class="winner-element">
           <div class="color-selector">
             <div class="label-div">
@@ -500,6 +500,10 @@ hr {
   color: grey;
 }
 
+.button-container {
+  margin-top: 1rem;
+}
+
 .page-container {
   padding: 0 1.5rem 3rem;
 
@@ -537,10 +541,10 @@ hr {
 }
 .winner-element {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 
-  @include desktop {
-    margin-top: 1.5rem;
+  > div {
+    margin-bottom: 1rem;
   }
 
   @include mobile {
diff --git a/src/components/TodaysPage.vue b/src/components/TodaysPage.vue
index 0dfdf12..0ec99f3 100644
--- a/src/components/TodaysPage.vue
+++ b/src/components/TodaysPage.vue
@@ -1,10 +1,8 @@
 <template>
-  <div class="outer">
-    <div class="container">
-      <h1 class="title">Dagens viner</h1>
-      <div class="wines-container">
-        <Wine :wine="wine" v-for="wine in wines" :key="wine" :fullscreen="true" :inlineSlot="true" />
-      </div>
+  <div class="container">
+    <h1 class="title">Dagens viner</h1>
+    <div class="wines-container">
+      <Wine :wine="wine" v-for="wine in wines" :key="wine" />
     </div>
   </div>
 </template>
@@ -47,7 +45,7 @@ h1 {
 .wines-container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  justify-content: space-evenly;
   margin: 0 2rem;
 
   @media (min-width: 1500px) {
diff --git a/src/components/WinnerPage.vue b/src/components/WinnerPage.vue
index 434f9d7..adf9489 100644
--- a/src/components/WinnerPage.vue
+++ b/src/components/WinnerPage.vue
@@ -2,23 +2,18 @@
   <div class="container">
     <div v-if="!posted">
       <h1 v-if="name">Gratulerer {{name}}!</h1>
-      <p
-        v-if="name"
-      >Her er valgene for dagens lotteri, du har 10 minutter å velge etter du fikk SMS-en.</p>
+      <p v-if="name">
+        Her er valgene for dagens lotteri, du har 10 minutter å velge etter du fikk SMS-en.
+      </p>
       <h1 v-else-if="!turn && !existing" class="sent-container">Finner ikke noen vinner her..</h1>
       <h1 v-else-if="!turn" class="sent-container">Du må vente på tur..</h1>
       <div class="wines-container" v-if="name">
-        <br />
-        <br />
-        <Wine
-          :wine="wine"
-          v-for="wine in wines"
-          :key="wine"
-          :winner="true"
-          :fullscreen="true"
-          :inlineSlot="true"
-          v-on:chosen="chosenWine"
-        />
+        <Wine :wine="wine" v-for="wine in wines" :key="wine">
+          <button
+            @click="chooseWine(wine.name)"
+            class="vin-button select-wine"
+          >Velg denne vinnen</button>
+        </Wine>
       </div>
     </div>
     <div v-else-if="posted" class="sent-container">
@@ -64,7 +59,7 @@ export default {
     this.wines = await _wines.json();
   },
   methods: {
-    chosenWine: async function(name) {
+    chooseWine: async function(name) {
       let posted = await postWineChosen(this.id, name);
       console.log("response", posted);
       if (posted.success) {
@@ -93,9 +88,14 @@ export default {
   flex-direction: column;
 }
 
+.select-wine {
+  margin-top: 1rem;
+}
+
 .wines-container {
-  justify-content: center;
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: flex-start;
 }
 </style>
\ No newline at end of file