Updates from designer

2020-01-29 16:29:47 +01:00
parent ed31e922c0
commit 46d83b9feb
7 changed files with 227 additions and 96 deletions
--- 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>
--- 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;
  }
 }
--- 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>
--- 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>
--- 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 {