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

@@ -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 {

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) {

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>