Merge branch 'master' of github.com:KevinMidboe/vinlottis

api/update.js

@@ -69,12 +69,16 @@ router.route("/log").post(async (req, res) => {
         name: currentWinner.wine.name,
         vivinoLink: currentWinner.wine.vivinoLink,
         rating: currentWinner.wine.rating,
-        occurences: 1
+        occurences: 1,
+        image: currentWinner.wine.image,
+        id: currentWinner.wine.id
       });
       await newWonWine.save();
       wonWine = newWonWine;
     } else {
       wonWine.occurences += 1;
+      wonWine.image = currentWinner.wine.image;
+      wonWine.id = currentWinner.wine.id;
       await wonWine.save();
     }
 

src/components/RegisterPage.vue

@@ -33,16 +33,29 @@
         <hr />
         <div class="winnner-container-inner">
           <div class="input-container">
-            <div class="label-div">
-              <input type="text" v-model="winner.name" placeholder="Navn" />
+            <div class="wine-image">
+              <img :src="winner.wine.image" />
             </div>
             <div class="label-div">
-              <select v-model="winner.color">
-                <option value="blue">Blå</option>
-                <option value="red">Rød</option>
-                <option value="green">Grønn</option>
-                <option value="yellow">Gul</option>
-              </select>
+              <input type="text" v-model="winner.name" placeholder="Navn vinner" />
+            </div>
+            <div class="label-div">
+              <div class="color-selector">
+                <button class="blue"
+                        :class="{'active': winner.color == 'blue' }"
+                        @click="updateColorForWinner(winner, 'blue')"></button>
+                <button class="red"
+                        :class="{'active': winner.color == 'red' }"
+                        @click="updateColorForWinner(winner, 'red')"></button>
+                <button class="green"
+                        :class="{'active': winner.color == 'green' }"
+                        @click="updateColorForWinner(winner, 'green')"></button>
+                <button class="yellow"
+                        :class="{'active': winner.color == 'yellow' }"
+                        @click="updateColorForWinner(winner, 'yellow')"></button>
+              </div>
+
+              <span class="color-selected">Selected color: {{ winner.color ? winner.color : '(none)' }}</span>
             </div>
             <div class="label-div">
               <input type="text" v-model="winner.wine.name" placeholder="Vin-navn" />
@@ -54,12 +67,8 @@
               <input type="text" v-model="winner.wine.rating" placeholder="Rating" />
             </div>
           </div>
-          <div class="wine-image">
-            <img :src="winner.wine.image" />
         </div>
       </div>
-        <hr />
-      </div>
     </div>
     <div class="button-container">
       <button @click="addWine">Legg til en vin</button>
@@ -131,6 +140,9 @@ export default {
         image: ""
       });
     },
+    updateColorForWinner(winner, color) {
+      winner.color = winner.color == color ? null : color
+    },
     sendWines: async function() {
       let _response = await fetch("/api/log/wines", {
         headers: {
@@ -267,6 +279,10 @@ hr {
   justify-content: center;
   align-items: center;
   margin: auto;
+
+  @include mobile {
+    width: 80%;
+  }
 }
 
 .winner-element,
@@ -278,6 +294,10 @@ hr {
   align-items: center;
   flex-direction: column;
   justify-content: center;
+
+  button {
+    cursor: pointer;
+  }
 }
 
 .color-container {
@@ -291,8 +311,8 @@ hr {
 
 .label-div {
   display: flex;
-  flex-direction: column;
   width: 50%;
+  flex-direction: column;
   padding-bottom: 20px;
   margin: auto;
   display: flex;
@@ -304,6 +324,53 @@ hr {
   }
 }
 
+.color-selector {
+  .active {
+    border: 2px solid black;
+    margin-bottom: 1rem;
+  }
+
+  button {
+    border: 2px solid transparent;
+    color: #333;
+    padding: 10px 30px;
+    margin: 0;
+    font-size: 1.3rem;
+    display: inline-flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    max-height: calc(3rem + 18px);
+    max-width: calc(3rem + 18px);
+    margin: 10px;
+    // disable-dbl-tap-zoom
+    touch-action: manipulation;
+
+    @include mobile {
+      margin: 2px;
+    }
+
+    &.green {
+      background: #c8f9df;
+    }&.blue {
+      background: #d4f2fe;
+    }&.red {
+      background: #fbd7de;
+    }&.yellow {
+      background: #fff6d6;
+    }
+  }
+}
+
+.color-selected {
+  margin-bottom: 2rem;
+
+  @include mobile {
+    display: block;
+    width: 100%;
+    font-size: 1.5rem !important;
+  }
+}
+
 .label-div label {
   padding: 0 6px;
   display: flex;
@@ -315,6 +382,10 @@ hr {
 }
 
 .input-container {
+  @include mobile {
+    width: 100%;
+  }
+
   & .label-div {
     width: 100%;
   }
@@ -322,6 +393,10 @@ hr {
 
 .winnner-container-inner {
   display: flex;
+
+  @include mobile {
+    flex-direction: column;
+  }
 }
 
 .wine-image {

src/components/TodaysPage.vue

@@ -10,8 +10,8 @@
             </div>
             <div class="right">
               <h3>{{ wine.name }}</h3>
-              <spam>{{ wine.rating }} rating</spam>
-              <spam class="wine-link">Les mer</spam>
+              <span v-if="wine.rating">{{ wine.rating }} rating</span>
+              <span class="wine-link">Les mer</span>
             </div>
           </div>
         </a>
@@ -41,6 +41,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './src/styles/media-queries';
+
 .wine-image {
   height: 250px;
 }
@@ -50,22 +52,52 @@ h1 {
   margin-bottom: 25px;
 }
 
+.wines-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  margin: 0 2rem;
+
+  @media (min-width: 1500px) {
+    max-width: 1500px;
+    margin: 0 auto;
+  }
+
+  @include mobile {
+    flex-direction: column;
+  }
+}
+
+h3 {
+  max-width: 30vw;
+
+  @include mobile {
+    max-width: 50vw;
+  }
+}
+
 .inner-wine-container {
   display: flex;
   flex-direction: row;
-  justify-content: center;
   margin: auto;
   width: 500px;
   font-family: Arial;
   margin-bottom: 30px;
+
+  @include desktop {
+    justify-content: center;
+  }
 }
 
 .right {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   margin-bottom: 150px;
   margin-left: 50px;
+
+  @include mobile {
+    margin-left: 2rem;
+  }
 }
 
 a,

src/components/VinlottisPage.vue

@@ -155,7 +155,7 @@ export default {
 
 .vipps-outer-container {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 
   @include desktop {
     margin-left: 20px;