From 46d83b9feb6e26f0b7a5b3d30a5ebf5d60776f27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Wed, 29 Jan 2020 16:29:47 +0100
Subject: [PATCH] Updates from designer

---
 src/components/GeneratePage.vue  | 30 ++++++++--
 src/components/VinlottisPage.vue | 41 +++++++++++---
 src/ui/Highscore.vue             | 29 ++++++++--
 src/ui/PurchaseGraph.vue         |  4 +-
 src/ui/TotalBought.vue           | 97 +++++++++++++++++---------------
 src/ui/Vipps.vue                 | 69 ++++++++++++++++++-----
 src/ui/Wines.vue                 | 53 +++++++++++------
 7 files changed, 227 insertions(+), 96 deletions(-)

diff --git a/src/components/GeneratePage.vue b/src/components/GeneratePage.vue
index 6aaf2d7..ed1ff58 100644
--- a/src/components/GeneratePage.vue
+++ b/src/components/GeneratePage.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="container">
     <h1 class="title" @click="startCountdown">Loddgenerator</h1>
-    <p class="subtext">
-      Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
-    </p>
+    <p class="subtext">Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
     <div class="input-line">
       <label for="redCheckbox">
         <input type="checkbox" id="redCheckbox" v-model="redCheckbox" />
@@ -53,6 +51,13 @@
       ></div>
     </div>
 
+    <div class="color-count-container" v-if="generated && !generating">
+      <span>Rød: {{red}}</span>
+      <span>Blå: {{blue}}</span>
+      <span>Gul: {{yellow}}</span>
+      <span>Grønn: {{green}}</span>
+    </div>
+
     <Vipps class="vipps" :amount="numberOfBallots" />
     <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
   </div>
@@ -83,7 +88,9 @@ export default {
       greenCheckbox: true,
       yellowCheckbox: true,
       blueCheckbox: true,
-      hardStart: false
+      hardStart: false,
+      generated: false,
+      generating: false
     };
   },
   watch: {
@@ -105,7 +112,10 @@ export default {
       this.hardStart = true;
     },
     generateColors: function(event, time) {
+      this.generating = true;
       if (time == 5) {
+        this.generating = false;
+        this.generated = true;
         if (this.numberOfBallots > 1 && new Set(this.colors).size == 1) {
           alert("BINGO");
         }
@@ -212,6 +222,16 @@ p {
   margin: 0;
 }
 
+.color-count-container {
+  margin: auto;
+  width: 20vw;
+  justify-content: space-around;
+  align-items: center;
+  display: flex;
+  font-family: Arial;
+  margin-top: 35px;
+}
+
 .input-line {
   margin: auto;
   display: flex;
@@ -243,7 +263,7 @@ p {
 }
 
 .vipps {
-  margin: 8rem auto 2.5rem auto;
+  margin: 5rem auto 2.5rem auto;
 
   @include mobile {
     margin-top: 2rem;
diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue
index 4ec1dd5..110c773 100644
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -15,12 +15,12 @@
           <TotalBought />
           <hr class="bought-and-highscore-separator" />
           <div class="highscore-and-wines">
-            <Highscore />
+            <Highscore class="highscore-container" />
             <Wines class="wines-container" />
           </div>
         </div>
         <div class="vipps-outer-container">
-          <Vipps class="vipps-container" />
+          <Vipps class="vipps-inner-container" />
         </div>
       </div>
     </div>
@@ -86,7 +86,11 @@ export default {
   margin: auto;
   justify-content: space-evenly;
   align-items: center;
-  padding: 0 25px;
+  padding: 0 30px;
+
+  @include mobile {
+    padding: 0 20px;
+  }
 }
 
 .title {
@@ -113,10 +117,27 @@ export default {
   display: flex;
   flex-direction: row;
   padding-top: 1.5rem;
-}
+  justify-content: space-between;
 
-.wines-container {
-  margin-left: 30px;
+  @include mobile {
+    padding: 0 20px;
+  }
+
+  .highscore-container {
+    width: 35%;
+
+    @include mobile {
+      width: 100%;
+    }
+  }
+
+  .wines-container {
+    width: 65%;
+
+    @include mobile {
+      width: 100%;
+    }
+  }
 }
 
 .vipps-outer-container {
@@ -177,10 +198,14 @@ h1 {
   display: inline-block;
 }
 
-.vipps-container {
+.vipps-inner-container {
   margin-top: 15px;
   margin-bottom: 15px;
   margin-left: 30px;
+
+  @include mobile {
+    margin: auto;
+  }
 }
 
 .chart-container {
@@ -188,7 +213,7 @@ h1 {
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: 100vw;
+  width: 99vw;
   max-width: 1400px;
   margin: auto;
   padding: 50px 0;
diff --git a/src/ui/Highscore.vue b/src/ui/Highscore.vue
index fb24bd4..6596cb2 100644
--- a/src/ui/Highscore.vue
+++ b/src/ui/Highscore.vue
@@ -27,22 +27,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.highscores {
-  padding-right: 50px;
-}
+@import "../styles/media-queries.scss";
 div {
-  margin: 15px 0 0 0;
+  margin: 0;
   font-family: Arial;
   display: inline-flex;
   flex-direction: column;
 }
+
 ol {
   padding-left: 1.375rem !important;
   margin-left: 0;
-
-  li {
+  margin: 0 0 1.5em;
+  padding: 0;
+  counter-reset: item;
+  & > li {
     padding: 2.5px 0;
     width: max-content;
+    margin: 0 0 0 -1.25rem;
+    padding: 0;
+    list-style-type: none;
+    counter-increment: item;
+    &:before {
+      display: inline-block;
+      width: 1em;
+      padding-right: 0.5rem;
+      font-weight: bold;
+      text-align: right;
+      content: counter(item) ".";
+    }
+
+    @include mobile {
+      padding: 5px 0;
+    }
   }
 }
 </style>
diff --git a/src/ui/PurchaseGraph.vue b/src/ui/PurchaseGraph.vue
index 1d186a3..b90fa3e 100644
--- a/src/ui/PurchaseGraph.vue
+++ b/src/ui/PurchaseGraph.vue
@@ -134,13 +134,13 @@ export default {
 
 .chart {
   height: 40vh;
-  max-height: 364px;
+  max-height: 500px;
 
   @include mobile {
     position: relative;
     width: 90vw !important;
     max-height: unset;
-    height: 50vh;
+    height: 30vh;
     margin-bottom: 2rem;
   }
 }
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index 4d3f005..398c788 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -4,11 +4,11 @@
     <div class="bought-container">
       <div
         v-for="color in colors"
-        :class="color.name + '-container inner-bought-container'"
+        :class="color.name + '-container ' + color.name + '-ballot inner-bought-container ballot-element'"
         :key="color.name"
       >
         <div class="number-container">
-          <span :class="color.name + ' bought-number-span'">
+          <span class="color-total bought-number-span">
             {{
             color.total
             }}
@@ -16,22 +16,19 @@
           <span>kjøpte</span>
         </div>
         <div class="inner-text-container">
-          <div>
-            {{ color.win }} vinn -
-            <span class="small">{{ color.totalPercentage }}</span>%
-          </div>
-          <div>
-            <span :class="color.name + ' small'">{{ color.percentage }}</span>% vinn
-          </div>
+          <div>{{ color.win }} vinn</div>
+          <div>{{ color.totalPercentage }}% vinn</div>
         </div>
       </div>
 
-      <div class="total-container inner-bought-container">
-        <div>
+      <div class="inner-bought-container total-ballots">
+        <div class="total-container">
           Totalt&nbsp;
-          <span class="total">{{ total }}</span> kjøpt
+          <div>
+            <span class="total">{{ total }}</span> kjøpte
+          </div>
+          <div>{{ totalWin }} vinn</div>
         </div>
-        <div>{{ totalWin }} vinn</div>
       </div>
     </div>
   </div>
@@ -128,12 +125,34 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
+}
 
-  @include mobile {
-    flex-direction: row;
-    justify-content: unset;
-    align-items: center;
+.ballot-element {
+  width: 140px;
+  height: 150px;
+  margin: 20px 0;
+  -webkit-mask-image: url(/../../public/assets/images/lodd.svg);
+  background-repeat: no-repeat;
+  mask-image: url(/../../public/assets/images/lodd.svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  color: #333333;
+
+  &.green-ballot {
+    background-color: $light-green;
+  }
+
+  &.blue-ballot {
+    background-color: $light-blue;
+  }
+
+  &.yellow-ballot {
+    background-color: $light-yellow;
+  }
+
+  &.red-ballot {
+    background-color: $light-red;
   }
 }
 
@@ -148,20 +167,29 @@ export default {
 }
 
 .inner-text-container {
-  padding-left: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
   // TODO fix styling for displaying in columns
   @include mobile {
-    margin-top: auto;
-    padding-bottom: 5px;
-    display: flex;
-
     & div {
       padding: 0 5px;
     }
   }
 }
 
+.total-ballots {
+  width: 150px;
+  height: 150px;
+  margin: 20px 0;
+}
+
+.total-container {
+  align-items: flex-start;
+}
+
 @include mobile {
   .total-container {
     > div:nth-of-type(2) {
@@ -179,6 +207,7 @@ export default {
 .bought-container {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   width: 100%;
   padding-bottom: 3rem;
   max-width: 1400px;
@@ -191,10 +220,7 @@ export default {
   }
 }
 
-.green,
-.blue,
-.yellow,
-.red,
+.color-total,
 .total {
   font-size: 2rem;
   font-weight: bold;
@@ -206,26 +232,9 @@ export default {
   display: inline-block;
 }
 
-.green {
-  color: $green;
-}
-
-.red {
-  color: $red;
-}
-
-.yellow {
-  color: $yellow;
-}
-
-.blue {
-  color: $blue;
-}
-
 @include mobile {
   .bought-container {
     flex-wrap: wrap;
-    flex-direction: column;
   }
 }
 </style>
diff --git a/src/ui/Vipps.vue b/src/ui/Vipps.vue
index 0a1d151..29d056a 100644
--- a/src/ui/Vipps.vue
+++ b/src/ui/Vipps.vue
@@ -1,15 +1,26 @@
 <template>
-  <div class="vipps-container" @click="openVipps">
-    <img src="/public/assets/images/vipps-logo.svg" class="vipps-logo" alt="vipps logo" />
-    <span>
-      kr.
-      <span class="big-money">{{ amount * 10 }},- (10,- pr. lodd)</span>
-    </span>
-    <ing src="/public/assets/images/vipps-qr.png" class="qr-logo" v-if="qrFailed" />
-    <canvas v-if="!qrFailed" ref="canvas" class="qr-logo"></canvas>
-    <span class="phone-number">977 40 427</span>
-    <span class="name">Kasper Rynning-Tønnesen</span>
-    <span class="mark-with">Merk med: Vinlodd/🍾</span>
+  <div>
+    <div class="vipps-container" :class="isMobile ? 'clickable': null" @click="openVipps">
+      <img src="/public/assets/images/vipps-logo.svg" class="vipps-logo" alt="vipps logo" />
+      <span v-if="amount * 10 > 10">
+        kr.
+        <span class="big-money">{{ amount * 10 }},-</span>
+        (10,- pr. lodd)
+      </span>
+      <span v-if="amount * 10 == 10">
+        kr.
+        <span class="big-money">{{ amount * 10 }},-</span>
+        pr. lodd
+      </span>
+      <ing src="/public/assets/images/vipps-qr.png" class="qr-logo" v-if="qrFailed" />
+      <canvas v-if="!qrFailed" ref="canvas" class="qr-logo"></canvas>
+      <span class="phone-number">977 40 427</span>
+      <span class="name">Kasper Rynning-Tønnesen</span>
+      <span class="mark-with">Merk med: Vinlodd/🍾</span>
+    </div>
+    <p class="click-to-open-text" v-if="isMobile">
+      <i>Du kan også klikke på QR-koden for å åpne i Vipps</i>
+    </p>
   </div>
 </template>
 
@@ -31,7 +42,6 @@ export default {
   },
   watch: {
     amount: function(price) {
-      console.log("price is updated", price);
       this.calculateQr();
     }
   },
@@ -39,6 +49,9 @@ export default {
     this.calculateQr();
   },
   computed: {
+    isMobile: function() {
+      return this.isMobileFunction();
+    },
     price: function() {
       return this.amount * 1000;
     },
@@ -85,7 +98,25 @@ export default {
       context.fillText("🍾", centerX, centerY);
     },
     openVipps: function() {
+      if (!this.isMobileFunction()) {
+        return;
+      }
       window.location.assign(this.vippsUrlBasedOnUserAgent);
+    },
+    isMobileFunction: function() {
+      if (
+        navigator.userAgent.match(/Android/i) ||
+        navigator.userAgent.match(/webOS/i) ||
+        navigator.userAgent.match(/iPhone/i) ||
+        navigator.userAgent.match(/iPad/i) ||
+        navigator.userAgent.match(/iPod/i) ||
+        navigator.userAgent.match(/BlackBerry/i) ||
+        navigator.userAgent.match(/Windows Phone/i)
+      ) {
+        return true;
+      } else {
+        return false;
+      }
     }
   }
 };
@@ -96,9 +127,6 @@ export default {
 @import "../styles/media-queries.scss";
 .vipps-container {
   font-family: Arial;
-}
-
-.vipps-container {
   border-radius: 10px;
   background-color: #ff5b23;
   display: flex;
@@ -108,6 +136,9 @@ export default {
   padding: 25px;
   width: 250px;
   margin: auto 0;
+}
+
+.clickable {
   cursor: pointer;
 }
 
@@ -143,6 +174,14 @@ export default {
 @include mobile {
   .vipps-container {
     margin-left: 0px;
+    margin: auto;
+  }
+
+  .click-to-open-text {
+    width: 65%;
+    padding-top: 10px;
+    margin: auto;
+    text-align: center;
   }
 }
 </style>
diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue
index ad5bb06..c3001df 100644
--- a/src/ui/Wines.vue
+++ b/src/ui/Wines.vue
@@ -7,16 +7,16 @@
           {{ wine.name }} - sett {{ wine.occurences }} ganger,
           {{ wine.rating }} i rating
         </span>
+        <div class="inline-wine-name">
+          <span class="truncate">{{ wine.name }}</span>
+        </div>
+        - {{ wine.occurences }} gang(er)
         <a
           class="wine-link"
           :href="wine.vivinoLink"
           v-if="wine.vivinoLink != '' && wine.vivinoLink != null"
           @click="wineClick(wine)"
-        >
-          <span class="truncate">{{ wine.name }}</span>
-          - {{ wine.rating }} i
-          rating - {{ wine.occurences }} gang(er)
-        </a>
+        >Les mer</a>
       </li>
     </ol>
   </div>
@@ -54,31 +54,52 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/media-queries.scss";
 h3 {
   text-align: left;
 }
 div {
-  margin: 15px 0 0 0;
+  margin: 0;
   font-family: arial;
   display: inline-flex;
   flex-direction: column;
 }
 
-a {
-  text-decoration: none;
-  color: #ff5b23;
-  padding: 2.5px 0;
+ol {
+  padding-left: 1.375rem !important;
+  margin-left: 0;
+  margin: 0 0 1.5em;
+  padding: 0;
+  counter-reset: item;
+  & > li {
+    margin: 0 0 0 -1.25rem;
+    padding: 0;
+    list-style-type: none;
+    counter-increment: item;
+    &:before {
+      display: inline-block;
+      width: 1em;
+      font-weight: bold;
+      text-align: right;
+      content: counter(item) ".";
+    }
+
+    @include mobile {
+      padding: 5px 0;
+    }
+  }
 }
 
-ol {
-  padding-left: 0;
-  margin-left: 0;
+.inline-wine-name {
+  display: inline-flex;
+  padding: 0;
 }
 
 .wine-link {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+  color: #333333;
+  text-decoration: none;
+  font-weight: bold;
+  border-bottom: 1px solid #ff5fff;
 }
 
 .truncate {