Merge pull request #48 from KevinMidboe/refactor/wine-ui

Refactor/implement new design for Wine

api/retrieve.js

@@ -139,7 +139,9 @@ const allWinesSummary = async (req, res) => {
     }
   }
 
-  return res.json(Object.values(wines));
+  wines = Object.values(wines).reverse()
+
+  return res.json(wines);
 };
 
 module.exports = {

src/components/AllWinesPage.vue

@@ -1,26 +1,32 @@
 <template>
-  <div class="outer">
+  <div class="container">
-    <div class="container">
+    <h1 class="">Alle viner</h1>
-      <h1 class="title">Alle viner</h1>
+
-      <div class="wines-container">
+    <div id="wines-container">
-        <Wine :wine="wine" v-for="wine in wines" :key="wine" :fullscreen="true" :inlineSlot="true">
+      <Wine :wine="wine" v-for="(wine, _, index) in wines" :key="wine._id">
-          <div class="winners-container">
+        <div class="winners-container">
-            <div class="color-wins" :class="{ 'big': fullscreen }"
+
-              v-if="wine.blue || wine.red || wine.green || wine.yellow">
+          <span class="label">Vinnende lodd:</span>
-              <span class="label">Vinnende lodd:</span>
+          <div class="flex row">
-              <span class="color-win blue">{{wine.blue == undefined ? 0 : wine.blue}}</span>
+            <span class="raffle-element blue-raffle">{{ wine.blue == null ? 0 : wine.blue }}</span>
-              <span class="color-win red">{{wine.red == undefined ? 0 : wine.red}}</span>
+            <span class="raffle-element red-raffle">{{ wine.red == null ? 0 : wine.red }}</span>
-              <span class="color-win green">{{wine.green == undefined ? 0 : wine.green}}</span>
+            <span class="raffle-element green-raffle">{{ wine.green == null ? 0 : wine.green }}</span>
-              <span class="color-win yellow">{{wine.yellow == undefined ? 0 : wine.yellow}}</span>
+            <span class="raffle-element yellow-raffle">{{ wine.yellow == null ? 0 : wine.yellow }}</span>
-            </div>
-            <div class="name-wins" v-if="wine.winners">
-              <span class="label">Vunnet av:</span>
-              <span class="names" v-for="winner in wine.winners">- {{ winner }}</span>
-              </span>
-            </div>
           </div>
-        </Wine>
+
-      </div>
+          <div class="name-wins">
+            <span class="label">Vunnet av:</span>
+            <ul class="names">
+              <li v-for="(winner, index) in wine.winners">
+                <router-link class="vin-link" :to="`/highscore/` + winner">{{ winner }}</router-link>
+                 -&nbsp;
+                <router-link class="vin-link" :to="winDateUrl(wine.dates[index])">{{ dateString(wine.dates[index]) }}</router-link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </Wine>
+
     </div>
   </div>
 </template>
@@ -30,6 +36,7 @@ import { page, event } from "vue-analytics";
 import Banner from "@/ui/Banner";
 import Wine from "@/ui/Wine";
 import { overallWineStatistics } from "@/api";
+import { dateString } from "@/utils";
 
 export default {
   components: {
@@ -41,133 +48,97 @@ export default {
       wines: []
     };
   },
+  methods: {
+    winDateUrl(date) {
+      const timestamp = new Date(date).getTime();
+      return `/history/${timestamp}`
+    },
+    dateString: dateString
+  },
   async mounted() {
-    const wines = await overallWineStatistics();
+    this.wines = await overallWineStatistics();
-    this.wines = wines.sort((a, b) =>
-      a.rating > b.rating ? -1 : 1
-    );
   }
 };
 </script>
 
 <style lang="scss" scoped>
 @import "./src/styles/media-queries";
+@import "./src/styles/variables";
+
+.container {
+  width: 90vw;
+  margin: 3rem auto;
+  margin-bottom: 0;
+  padding-bottom: 4rem;
+}
 
 h1 {
+  font-size: 3rem;
+  font-family: "knowit";
+  font-weight: normal;
+
   font-family: knowit, Arial;
   margin-bottom: 25px;
 }
 
-.wines-container {
+.label {
+  font-weight: 600;
+}
+
+#wines-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
-  align-items: center;
+  align-items: flex-start;
-  width: 100%;
-  margin: 0 auto;
 
   @include desktop {
     margin: 0 2rem;
+  }
 
-    > div {
+  > div {
-      max-width: max-content;
+    justify-content: flex-start;
-    }
   }
 }
 
 .winners-container {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  margin-top: 2rem;
+  margin-top: 1rem;
 
-  @include mobile {
+  > div:not(:last-of-type) {
-    flex-direction: row;
+    margin-bottom: 1rem;
-    width: max-content;
-    margin: 0.75rem;
-
-    &:not(&:first-child) {
-      margin-top: 0.5rem;
-    }
   }
 }
 
-.label {
-  margin-bottom: 0.25rem;
-  font-weight: 600;
-  width: 100%;
-}
-
 .name-wins {
   display: flex;
   flex-direction: column;
-  width: max-content;
 
-  .names {
+  a {
-    margin-left: 0.5rem;
+    font-weight: normal;
+    &:not(:hover) {
+      border-color: transparent;
+    }
+  }
+
+  ul {
+    padding-left: 0;
+
+    li {
+      padding-left: 1.5rem;
+      list-style: none;
+
+      &:before {
+        content: "- ";
+        margin-left: -0.5rem;
+      }
+    }
   }
 }
 
-.color-wins {
+.raffle-element {
-  display: flex;
+  padding: 1rem;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-end;
-
-  margin-left: -3px;   // offset span.color-win margin
-
-  @include mobile {
-    width: 25vw;
-    margin-left: -2px; // offset span.color-win margin
-  }
-  @include desktop {
-    width: 30%;
-  }
-}
-
-.color-wins.big {
-  width: unset;
-}
-
-span.color-win {
-  border: 2px solid transparent;
-  color: #333;
-  display: block;
-  padding: 25px;
   font-size: 1.3rem;
-  display: inline-flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  /* max-height: calc(3rem + 18px); */
-  /* max-width: calc(3rem + 18px); */
-  width: 1rem;
   margin: 3px;
-  touch-action: manipulation;
-  height: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 900;
-
-  @include mobile {
-    margin: 2px;
-    padding: 10px;
-    font-size: 1rem;
-    flex-direction: row;
-    flex-wrap: wrap;
-    grow: 0.5;
-  }
-
-  &.green {
-    background: #c8f9df;
-  }
-  &.blue {
-    background: #d4f2fe;
-  }
-  &.red {
-    background: #fbd7de;
-  }
-  &.yellow {
-    background: #fff6d6;
-  }
 }
 </style>

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 {
+  > div {
-    margin-top: 1.5rem;
+    margin-bottom: 1rem;
   }
 
   @include mobile {

src/components/TodaysPage.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="outer">
+  <div class="container">
-    <div class="container">
+    <h1 class="title">Dagens viner</h1>
-      <h1 class="title">Dagens viner</h1>
+    <div class="wines-container">
-      <div class="wines-container">
+      <Wine :wine="wine" v-for="wine in wines" :key="wine" />
-        <Wine :wine="wine" v-for="wine in wines" :key="wine" :fullscreen="true" :inlineSlot="true" />
-      </div>
     </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
+      <p v-if="name">
-        v-if="name"
+        Her er valgene for dagens lotteri, du har 10 minutter å velge etter du fikk SMS-en.
-      >Her er valgene for dagens lotteri, du har 10 minutter å velge etter du fikk SMS-en.</p>
+      </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 />
+        <Wine :wine="wine" v-for="wine in wines" :key="wine">
-        <br />
+          <button
-        <Wine
+            @click="chooseWine(wine.name)"
-          :wine="wine"
+            class="vin-button select-wine"
-          v-for="wine in wines"
+          >Velg denne vinnen</button>
-          :key="wine"
+        </Wine>
-          :winner="true"
-          :fullscreen="true"
-          :inlineSlot="true"
-          v-on:chosen="chosenWine"
-        />
       </div>
     </div>
     <div v-else-if="posted" class="sent-container">
@@ -63,7 +58,7 @@ export default {
     this.wines = await prelottery();
   },
   methods: {
-    chosenWine: async function(name) {
+    chooseWine: async function(name) {
       let posted = await postWineChosen(this.id, name);
       console.log("response", posted);
       if (posted.success) {
@@ -92,9 +87,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>

src/ui/Wine.vue

@@ -1,39 +1,27 @@
 <template>
-  <div class="wine-container" :class="{ 'big': fullscreen }">
+  <div class="wine">
-    <div class="left">
+    <div class="wine-image">
       <img
-        v-if="wine.image"
+        v-if="wine.image && loadImage"
         :src="wine.image"
-        class="wine-image"
-        :class="{ 'fullscreen': fullscreen }"
       />
       <img v-else class="wine-placeholder" alt="Wine image" />
     </div>
-    <div class="right">
-      <div>
-        <h2 v-if="wine.name">{{ wine.name }}</h2>
-        <h2 v-else>(no name)</h2>
-        <span v-if="wine.rating">{{ wine.rating }} rating</span>
-        <span v-if="wine.price">{{ wine.price }} NOK</span>
-        <span v-if="wine.country">{{ wine.country }}</span>
 
-        <a
+    <div class="wine-details">
-          v-if="wine.vivinoLink"
+      <h2 v-if="wine.name">{{ wine.name }}</h2>
-          :href="wine.vivinoLink"
+      <span v-if="wine.rating"><b>Rating:</b> {{ wine.rating }} rating</span>
-          class="wine-link"
+      <span v-if="wine.price"><b>Pris:</b> {{ wine.price }} NOK</span>
-        >Les mer på {{ hostname(wine.vivinoLink) }}</a>
+      <span v-if="wine.country"><b>Land:</b> {{ wine.country }}</span>
-
-        <button
-          v-if="winner"
-          @click="choseWine(wine.name)"
-          class="vin-button"
-        >Velg dette som din vin</button>
-      </div>
-
-      <slot v-if="shouldUseInlineSlot()"></slot>
     </div>
 
-    <slot v-if="!shouldUseInlineSlot()"></slot>
+    <slot></slot>
+
+    <div class="bottom-section">
+      <a v-if="wine.vivinoLink" :href="wine.vivinoLink" class="link float-right">
+        Les mer
+      </a>
+    </div>
   </div>
 </template>
 
@@ -43,37 +31,30 @@ export default {
     wine: {
       type: Object,
       required: true
-    },
+    }
-    fullscreen: {
+  },
-      type: Boolean,
+  data() {
-      required: false
+    return {
-    },
+      loadImage: false
-    inlineSlot: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    winner: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
   methods: {
-    shouldUseInlineSlot() {
+    setImage(entries) {
-      return this.inlineSlot && window.innerWidth > 768;
+      const { target, isIntersecting } = entries[0];
-    },
+      if (!isIntersecting) return;
-    hostname(url) {
+
-      const urlHostname = new URL(url).hostname;
+      this.loadImage = true;
-      return urlHostname.split(".")[
+      this.observer.unobserve(target);
-        (urlHostname.match(/\./g) || []).length - 1
-      ];
-    },
-    choseWine(name) {
-      if (window.confirm(`Er du sikker på at du vil ha ${name}?`)) {
-        this.$emit("chosen", name);
-      }
     }
+  },
+  created() {
+    this.observer = new IntersectionObserver(this.setImage, {
+      root: this.$el,
+      threshold: 0
+    })
+  },
+  mounted() {
+    this.observer.observe(this.$el);
   }
 };
 </script>
@@ -83,100 +64,66 @@ export default {
 @import "./src/styles/global";
 @import "./src/styles/variables";
 
-.wine-image {
+.wine {
-  height: 250px;
+  padding: 2rem;
+  margin: 1rem 0rem;
+  position: relative;
+  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
 
-  @include mobile {
+  @include tablet {
-    max-width: 90px;
+    width: 250px;
-    object-fit: cover;
+    height: 100%;
-  }
+    margin: 1rem 2rem;
-
-  &.fullscreen {
-    @include desktop {
-      height: 100%;
-      max-height: 65vh;
-      max-width: 275px;
-      object-fit: cover;
-    }
   }
 }
-.wine-placeholder {
+
-  height: 250px;
+.wine-image {
-  width: 70px;
+  display: flex;
+  justify-content: center;
+
+  img {
+    height: 250px;
+    @include mobile {
+      object-fit: cover;
+      max-width: 90px;
+    }
+  }
+  .wine-placeholder {
+    height: 250px;
+    width: 70px;
+  }
+}
+
+.wine-details {
+  display: flex;
+  flex-direction: column;
 }
 
 h2 {
+  font-weight: normal;
+  font-size: 1.4rem;
+  margin: 2rem 0;
+  color: $matte-text-color;
+}
+
+.bottom-section {
   width: 100%;
-  max-width: 30vw;
-
-  @include mobile {
-    max-width: 50vw;
-  }
-}
-
-.wine-container {
-  margin-bottom: 30px;
-  font-family: Arial;
-  width: 100%;
-  max-width: max-content;
-
-  &.big {
-    align-items: center;
-  }
-
-  @include desktop {
-    max-width: 550px;
-  }
-}
-
-.left {
-  float: left;
-  margin-right: 3rem;
-
-  @include mobile {
-    margin-right: 2rem;
-  }
-}
-
-.right {
-  margin-bottom: 2rem;
-  display: flex;
-  flex-direction: column;
-  height: max-content;
-
-  > div:first-of-type {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-a,
-a:focus,
-a:hover,
-a:visited {
-  color: #333333;
-  font-family: Arial;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.wine-link {
-  color: #333333;
-  font-family: Arial;
-  text-decoration: none;
-  font-weight: bold;
-  border-bottom: 1px solid $link-color;
-  width: fit-content;
-}
-
-.button-container {
-  & button.red {
-    background-color: $light-red;
-    color: $red;
-  }
-}
-
-.vin-button {
   margin-top: 1rem;
+
+  .link {
+    color: $matte-text-color;
+    font-family: Arial;
+    font-size: 1.2rem;
+    cursor: pointer;
+    font-weight: normal;
+    border-bottom: 2px solid $matte-text-color;
+
+    &:hover {
+      font-weight: normal;
+      border-color: $link-color;
+    }
+  }
 }
 </style>

src/utils.js

@@ -1,5 +1,8 @@
  
 const dateString = (date) => {
+  if (typeof(date) == "string") {
+    date = new Date(date);
+  }
   const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date)
   const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date)
   const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date)