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>