From 3c0b8d4c066b7b4bc1e40fb73feb01c1c4d96f3e Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:13:41 +0100
Subject: [PATCH 01/17] Generate and lottery has distinct routes.

No longer use tab view for these pages.
---
 frontend/router.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/router.js b/frontend/router.js
index e625e41..beaa308 100644
--- a/frontend/router.js
+++ b/frontend/router.js
@@ -1,9 +1,9 @@
 const VinlottisPage = () => import(
   /* webpackChunkName: "landing-page" */
   "@/components/VinlottisPage");
-const LotteryPage = () => import(
+const VirtualLotteryPage = () => import(
   /* webpackChunkName: "landing-page" */
-  "@/components/LotteryPage");
+  "@/components/VirtualLotteryPage");
 const GeneratePage = () => import(
   /* webpackChunkName: "landing-page" */
   "@/components/GeneratePage");
@@ -54,7 +54,7 @@ const routes = [
   {
     path: "/lottery",
     name: "Lotteri",
-    component: LotteryPage
+    component: VirtualLotteryPage
   },
   {
     path: "/dagens",
@@ -82,8 +82,8 @@ const routes = [
     component: AdminPage
   },
   {
-    path: "/lottery/:tab",
-    component: LotteryPage
+    path: "/generate/",
+    component: GeneratePage
   },
   {
     path: "/winner/:id",
-- 
2.34.1


From 59328de4968ee59c735e0085b1d6ede54dae3225 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:14:57 +0100
Subject: [PATCH 02/17] Updated generate and lottery routes for frontpage.

---
 frontend/components/VinlottisPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/VinlottisPage.vue b/frontend/components/VinlottisPage.vue
index df44ad0..bbc0719 100644
--- a/frontend/components/VinlottisPage.vue
+++ b/frontend/components/VinlottisPage.vue
@@ -17,12 +17,12 @@
         />
       </div>
 
-      <router-link to="/lottery/game" class="participate-button">
+      <router-link to="/lottery" class="participate-button">
           <i class="icon icon--arrow-right"></i>
           <p>Trykk her for å delta</p>
       </router-link>
 
-      <router-link to="/lottery/generate" class="see-details-link">
+      <router-link to="/generate" class="see-details-link">
         Se vipps detaljer og QR-kode
       </router-link>
 
-- 
2.34.1


From 50ea05cad3e100f1a4c435dbed6d7857d9449bd7 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:19:56 +0100
Subject: [PATCH 03/17] Winner draw writes out winner number.

The websocket message now includes the number of winners and this is
used to spell out the current drawn winner's position.
---
 api/virtualLottery.js      | 10 ++++-
 frontend/ui/WinnerDraw.vue | 80 ++++++++++++++++++++------------------
 2 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/api/virtualLottery.js b/api/virtualLottery.js
index cad4924..706016b 100644
--- a/api/virtualLottery.js
+++ b/api/virtualLottery.js
@@ -166,8 +166,16 @@ const drawWinner = async (req, res) => {
       Math.floor(Math.random() * attendeeListDemocratic.length)
     ];
 
+  let winners = await VirtualWinner.find({ timestamp_sent: undefined }).sort({
+    timestamp_drawn: 1
+  });
+
   var io = req.app.get('socketio');
-  io.emit("winner", { color: colorToChooseFrom, name: winner.name });
+  io.emit("winner", {
+    color: colorToChooseFrom,
+    name: winner.name,
+    winner_count: winners.length + 1
+  });
 
   let newWinnerElement = new VirtualWinner({
     name: winner.name,
diff --git a/frontend/ui/WinnerDraw.vue b/frontend/ui/WinnerDraw.vue
index 81c04ec..118d123 100644
--- a/frontend/ui/WinnerDraw.vue
+++ b/frontend/ui/WinnerDraw.vue
@@ -1,36 +1,18 @@
 <template>
-  <div class="current-drawn-container">
-    <div class="current-draw" v-if="drawing">
-      <h2>TREKKER</h2>
-      <div
-        :class="currentColor + '-raffle'"
-        class="raffle-element center-new-winner"
-        :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
-      >
-        <span v-if="currentName && colorDone">{{ currentName }}</span>
-      </div>
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-    </div>
-    
-    <div class="current-draw" v-if="drawingDone">
-      <h2>VINNER</h2>
-      <div
-        :class="currentColor + '-raffle'"
-        class="raffle-element center-new-winner"
-        :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
-      >
-        <span v-if="currentName && colorDone">{{ currentName }}</span>
-      </div>
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
+  <div class="current-drawn-container" v-if="drawing">
+    <h2 v-if="vinnersNameDrawn !== true">TREKKER {{ ordinalNumber() }} VINNER</h2>
+    <h2 v-else>VINNER</h2>
+
+    <div
+      :class="currentColor + '-raffle'"
+      class="raffle-element"
+      :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
+    >
+      <span v-if="currentName && colorDone">{{ currentName }}</span>
     </div>
+
+    <br />
+    <br />
   </div>
 </template>
 
@@ -184,6 +166,23 @@ export default {
         confetti(Object.assign({}, confettiDefaultValues, {origin: originPoint }, launchAngle))
       }
     },
+    ordinalNumber(number=this.currentWinnerLocal.winnerCount) {
+      const dictonary = {
+        1: "første",
+        2: "andre",
+        3: "tredje",
+        4: "fjerde",
+        5: "femte",
+        6: "sjette",
+        7: "syvende",
+        8: "åttende",
+        9: "niende",
+        10: "tiende",
+        11: "ellevte",
+        12: "tolvte"
+      };
+      return number in dictonary ? dictonary[number] : number;
+    }
   }
 };
 
@@ -196,22 +195,27 @@ export default {
 
 h2 {
   text-align: center;
+  text-transform: uppercase;
 }
 
 .current-drawn-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  grid-column: 1 / 5;
+  display: grid;
+  place-items: center;
+  position: relative;
 }
 
 .raffle-element {
-  width: 140px;
-  height: 140px;
-  font-size: 1.2rem;
+  width: 280px;
+  height: 300px;
+  font-size: 2rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 0.75rem;
   text-align: center;
+
+  -webkit-mask-size: cover;
+  -moz-mask-size: cover;
+  mask-size: cover;
 }
 </style>
-- 
2.34.1


From d0cf99e8f888da8a950c671d35258145ab868c59 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:21:32 +0100
Subject: [PATCH 04/17] Slowed down animation and renamed variables.

- Unified html elements for smaller footprint.
- winnersNameDrawn is used to have separte messages for before and after
the winners name is decided.
---
 frontend/ui/WinnerDraw.vue | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/frontend/ui/WinnerDraw.vue b/frontend/ui/WinnerDraw.vue
index 118d123..abd34d1 100644
--- a/frontend/ui/WinnerDraw.vue
+++ b/frontend/ui/WinnerDraw.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="current-drawn-container" v-if="drawing">
-    <h2 v-if="vinnersNameDrawn !== true">TREKKER {{ ordinalNumber() }} VINNER</h2>
+    <h2 v-if="winnersNameDrawn !== true">TREKKER {{ ordinalNumber() }} VINNER</h2>
     <h2 v-else>VINNER</h2>
 
     <div
@@ -43,14 +43,13 @@ export default {
       nameTimeout: null,
       colorDone: false,
       drawing: false,
-      drawingDone: false,
+      winnersNameDrawn: false,
       winnerQueue: []
     };
   },
   watch: {
     currentWinner: function(currentWinner) {
       if (currentWinner == null) {
-        this.drawingDone = false;
         return;
       }
       if (this.drawing) {
@@ -58,6 +57,7 @@ export default {
         return;
       }
       this.drawing = true;
+      this.winnersNameDrawn = false;
       this.currentName = null;
       this.currentColor = null;
       this.nameRounds = 0;
@@ -81,8 +81,7 @@ export default {
           this.drawColor(this.currentWinnerLocal.color);
           return;
         }
-        this.drawing = false;
-        this.drawingDone = true;
+        this.winnersNameDrawn = true;
         this.startConfetti(this.currentName);
         return;
       }
@@ -96,7 +95,7 @@ export default {
       }, 50);
     },
     drawColor: function(winnerColor) {
-      this.drawingDone = false;
+      this.winnersNameDrawn = false;
       if (this.colorRounds == 100) {
         this.currentColor = winnerColor;
         this.colorDone = true;
@@ -111,7 +110,7 @@ export default {
       clearTimeout(this.colorTimeout);
       this.colorTimeout = setTimeout(() => {
         this.drawColor(winnerColor);
-      }, 50);
+      }, 70);
     },
     getRotation: function() {
       if (this.colorDone) {
@@ -133,8 +132,8 @@ export default {
           return "yellow";
       }
     },
-    startConfetti(currentName){
-      //duration is computed as x * 1000 miliseconds, in this case 7*1000 = 7000 miliseconds ==> 7 seconds. 
+    startConfetti(currentName) {
+      //duration is computed as x * 1000 miliseconds, in this case 7*1000 = 7000 miliseconds ==> 7 seconds.
       var duration = 7 * 1000;
       var animationEnd = Date.now() + duration;
       var defaults = { startVelocity: 50, spread: 160, ticks: 50, zIndex: 0, particleCount: 20};
@@ -143,22 +142,25 @@ export default {
       function randomInRange(min, max) {
         return Math.random() * (max - min) + min;
       }
+
+      const self = this;
       var interval = setInterval(function() {
         var timeLeft = animationEnd - Date.now();
         if (timeLeft <= 0) {
+          self.drawing = false;
+          console.time("drawing finished")
           return clearInterval(interval);
-        } 
-        if(currentName == "Amund Brandsrud"){
+        }
+        if (currentName == "Amund Brandsrud") {
           runCannon(uberDefaults, {x: 1, y: 1 }, {angle: 135});
-          runCannon(uberDefaults, {x: 0, y: 1 }, {angle: 45}); 
+          runCannon(uberDefaults, {x: 0, y: 1 }, {angle: 45});
           runCannon(uberDefaults, {y: 1 }, {angle: 90});
           runCannon(uberDefaults, {x: 0 }, {angle: 45});
-          runCannon(uberDefaults, {x: 1 }, {angle: 135});     
-        }else{
+          runCannon(uberDefaults, {x: 1 }, {angle: 135});
+        } else {
           runCannon(defaults, {x: 0 }, {angle: 45});
           runCannon(defaults, {x: 1 }, {angle: 135});
           runCannon(defaults, {y: 1 }, {angle: 90});
-   
         }
       }, 250);
 
-- 
2.34.1


From e61a6c043282ab3b108877f5cf9c43f52d8a7a15 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:23:25 +0100
Subject: [PATCH 05/17] Attendees list has hr seperators and max-height.

---
 frontend/ui/Attendees.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/ui/Attendees.vue b/frontend/ui/Attendees.vue
index 92f4a64..adcb75d 100644
--- a/frontend/ui/Attendees.vue
+++ b/frontend/ui/Attendees.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="attendees" v-if="attendees.length > 0">
-    <h2>Deltakere ({{ attendees.length }})</h2>
     <div class="attendees-container" ref="attendees">
       <div class="attendee" v-for="(attendee, index) in flipList(attendees)" :key="index">
         <span class="attendee-name">{{ attendee.name }}</span>
@@ -42,10 +41,16 @@ export default {
 @import "../styles/global.scss";
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
+
 .attendee-name {
   width: 60%;
 }
 
+hr {
+  border: 2px solid black;
+  width: 100%;
+}
+
 .raffle-element {
   font-size: 0.75rem;
   width: 45px;
@@ -56,20 +61,24 @@ export default {
   font-weight: bold;
   font-size: 0.75rem;
   text-align: center;
+
+  &:not(:last-of-type) {
+    margin-right: 1rem;
+  }
 }
 
 .attendees {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 65%;
-  height: 100%;
+  height: auto;
 }
 
 .attendees-container {
   width: 100%;
   height: 100%;
   overflow-y: scroll;
+  max-height: 550px;
 }
 
 .attendee {
@@ -78,5 +87,9 @@ export default {
   align-items: center;
   width: 100%;
   margin: 0 auto;
+
+  &:not(:last-of-type) {
+    border-bottom: 2px solid #d7d8d7;
+  }
 }
 </style>
-- 
2.34.1


From 8275292526295324ec79eca0b246f01f3865f20a Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:24:37 +0100
Subject: [PATCH 06/17] Doesn't keep its own header and set max-height.

---
 frontend/ui/Chat.vue | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/frontend/ui/Chat.vue b/frontend/ui/Chat.vue
index 073197f..a14bc99 100644
--- a/frontend/ui/Chat.vue
+++ b/frontend/ui/Chat.vue
@@ -1,7 +1,5 @@
 <template>
   <div class="chat-container">
-    <hr />
-    <h2>Chat</h2>
     <div class="history" ref="history" v-if="chatHistory.length > 0">
       <div class="opaque-skirt"></div>
       <div v-if="hasMorePages" class="fetch-older-history">
@@ -206,26 +204,9 @@ export default {
 <style lang="scss" scoped>
 @import "@/styles/media-queries.scss";
 @import "@/styles/variables.scss";
-h2 {
-  text-align: center;
-}
 
-hr {
-  display: none;
-
-  @include mobile {
-    display: block;
-    width: 80%;
-  }
-}
 .chat-container {
-  height: 100%;
-  width: 50%;
   position: relative;
-
-  @include mobile {
-    width: 100%;
-  }
 }
 
 input {
@@ -241,6 +222,7 @@ input {
   height: 75%;
   overflow-y: scroll;
   position: relative;
+  max-height: 550px;
 
   &-message {
     display: flex;
-- 
2.34.1


From 18079ae312e5ec44ef8feeec3e32006a90b371c6 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:25:15 +0100
Subject: [PATCH 07/17] Increased page-size from 10 to 100.

---
 frontend/ui/Chat.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ui/Chat.vue b/frontend/ui/Chat.vue
index a14bc99..7769ea5 100644
--- a/frontend/ui/Chat.vue
+++ b/frontend/ui/Chat.vue
@@ -51,7 +51,7 @@ export default {
       hasMorePages: true,
       message: "",
       page: 1,
-      pageSize: 10,
+      pageSize: 100,
       temporaryUsername: null,
       username: null,
       validationError: undefined
-- 
2.34.1


From 814ee4fa7d7f6c5539dd1e00bd7bacdc6135fd81 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:26:08 +0100
Subject: [PATCH 08/17] Drawing bool for diff text before & during draw.

- Updated style of winners container.
- Moved out header.
- Extra info-text in container before and during the drawing of first
winner.
---
 frontend/ui/TotalBought.vue |  2 +-
 frontend/ui/Winners.vue     | 54 +++++++++++++++++++++++++++++++++----
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/frontend/ui/TotalBought.vue b/frontend/ui/TotalBought.vue
index d7998bd..e85b9a3 100644
--- a/frontend/ui/TotalBought.vue
+++ b/frontend/ui/TotalBought.vue
@@ -170,7 +170,7 @@ export default {
     flex-direction: column;
     position: relative;
     @include raffle;
-    
+
     .win-percentage {
       margin-left: 30px;
       font-size: 50px;
diff --git a/frontend/ui/Winners.vue b/frontend/ui/Winners.vue
index cfd45d6..5b2bfa0 100644
--- a/frontend/ui/Winners.vue
+++ b/frontend/ui/Winners.vue
@@ -1,14 +1,22 @@
 <template>
-  <div>
-    <h2 v-if="winners.length > 0"> {{ title ? title : 'Vinnere' }}</h2>
-    <div class="winners" v-if="winners.length > 0">
+  <section>
+    <h2>{{ title ? title : 'Vinnere' }}</h2>
+    <div class="winning-raffles" v-if="winners.length > 0">
       <div v-for="(winner, index) in winners" :key="index">
         <router-link :to="`/highscore/${ encodeURIComponent(winner.name) }`">
           <div :class="winner.color + '-raffle'" class="raffle-element">{{ winner.name }}</div>
         </router-link>
       </div>
     </div>
-  </div>
+
+    <div v-else-if="drawing" class="container">
+      <h3>Trekningen er igang!</h3>
+    </div>
+
+    <div v-else class="container">
+      <h3>Trekningen har ikke startet enda <button>⏰</button></h3>
+    </div>
+  </section>
 </template>
 
 <script>
@@ -17,6 +25,9 @@ export default {
     winners: {
       type: Array
     },
+    drawing: {
+      type: Boolean,
+    },
     title: {
       type: String,
       required: false
@@ -30,11 +41,27 @@ export default {
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
 
+section {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
 h2 {
+  font-size: 1.1rem;
+  margin-bottom: 0.6rem;
+  width: 100%;
   text-align: center;
 }
 
-.winners {
+h3 {
+  margin: auto;
+  color: $matte-text-color;
+  font-size: 1.6rem;
+}
+
+.winning-raffles {
   display: flex;
   flex-flow: wrap;
   justify-content: space-around;
@@ -52,4 +79,21 @@ h2 {
   font-weight: bold;
   text-align: center;
 }
+
+.container {
+  display: flex;
+  height: 100%;
+
+  button {
+    -webkit-appearance: unset;
+    background-color: unset;
+    padding: 0;
+    margin: 0;
+    font-size: inherit;
+    border: unset;
+    height: auto;
+    width: auto;
+    cursor: pointer;
+  }
+}
 </style>
-- 
2.34.1


From d59d6fbd6c72cd398a9e21234e5f47be7de6db9a Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:27:54 +0100
Subject: [PATCH 09/17] vin-link font-size should be inherited.

---
 frontend/styles/global.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/styles/global.scss b/frontend/styles/global.scss
index c6b8f4f..bbdc27c 100644
--- a/frontend/styles/global.scss
+++ b/frontend/styles/global.scss
@@ -188,7 +188,7 @@ textarea {
 .vin-link {
   font-weight: bold;
   border-bottom: 1px solid $link-color;
-  font-size: 1rem;
+  font-size: inherit;
   cursor: pointer;
 
   text-decoration: none;
-- 
2.34.1


From 30b63a8e614ae9d5265a31047c32302ca0037941 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:28:55 +0100
Subject: [PATCH 10/17] Page styles re-written and updated!

---
 frontend/components/VirtualLotteryPage.vue | 410 +++++++++------------
 1 file changed, 172 insertions(+), 238 deletions(-)

diff --git a/frontend/components/VirtualLotteryPage.vue b/frontend/components/VirtualLotteryPage.vue
index e6d1065..8bb8cd3 100644
--- a/frontend/components/VirtualLotteryPage.vue
+++ b/frontend/components/VirtualLotteryPage.vue
@@ -1,48 +1,60 @@
 <template>
   <div>
-    <h1 class="title">Virtuelt lotteri</h1>
-    <h2
-      v-if="
-        attendees.length <= 0 &&
-          winners.length <= 0 &&
-          attendeesFetched &&
-          winnersFetched
-      "
-    >Her var det lite.. Sikker på at det er en virtuell trekning nå?</h2>
-    <div class="title-info">
-      <h2>Send vipps med melding "Vinlotteri" for å bli registrert til virtuelt lotteri</h2>
-      <p>Send gjerne melding om fargeønsker også</p>
-    </div>
+    <header ref="header">
+      <div class="container">
+        <div class="left">
+          <h1 class="title">Virtuelt lotteri</h1>
+          <ol>
+            <li>Vurder om du ønsker å bruke vår <router-link to="/generate" class="vin-link">loddgenerator</router-link>, eller se <router-link to="/dagens" class="vin-link">dagens fangst.</router-link></li>
+            <li>Send vipps med melding "Vinlotteri" for å bli registrert til virtuelt lotteri.</li>
+            <li>Send gjerne melding om fargeønske også.</li>
+          </ol>
 
-    <router-link to="/dagens" class="generate-link" v-if="todayExists">
-      Lurer du på dagens fangst?
-      <span class="subtext generator-link">Se her</span>
-    </router-link>
-
-    <hr />
-
-    <h2>Live oversikt av lodd kjøp i dag</h2>
-    <div class="colors">
-      <div v-for="color in Object.keys(ticketsBought)" :class="color + ' colors-box'" :key="color">
-        <div class="colors-overlay">
-          <p>{{ ticketsBought[color] }} kjøpt</p>
+          <p>
+            <span class="vin-link">Følg med på utviklingen</span> og <span class="vin-link">chat om trekningen</span>
+            <i class="icon icon--arrow-left" @click="scrollToContent"></i></p>
         </div>
+
+        <div class="right">
+          <Vipps :amount="1" />
+        </div>
+      </div>
+    </header>
+
+    <div class="container" ref="content">
+      <WinnerDraw
+        :currentWinnerDrawn="currentWinnerDrawn"
+        :currentWinner="currentWinner"
+        :attendees="attendees"
+      />
+
+      <div class="todays-raffles">
+        <h2>Liste av lodd kjøpt i dag</h2>
+
+        <div class="raffle-container">
+          <div v-for="color in Object.keys(ticketsBought)" :class="color + '-raffle raffle-element'" :key="color">
+            <span>{{ ticketsBought[color] }}</span>
+          </div>
+        </div>
+      </div>
+
+      <Winners :winners="winners" class="winners" :drawing="currentWinner" />
+
+      <div class="container-attendees">
+        <h2>Deltakere ({{ attendees.length }})</h2>
+        <Attendees :attendees="attendees" class="attendees" />
+      </div>
+
+      <div class="container-chat">
+        <h2>Chat</h2>
+        <Chat class="chat" />
       </div>
     </div>
 
-    <WinnerDraw
-      :currentWinnerDrawn="currentWinnerDrawn"
-      :currentWinner="currentWinner"
-      :attendees="attendees"
-    />
-
-    <Winners :winners="winners" />
-    <hr />
-    <div class="middle-elements">
-      <Attendees :attendees="attendees" class="outer-attendees" />
-      <Chat class="outer-chat" />
+    <div class="container wines-container">
+      <h2>Dagens fangst</h2>
+      <Wine :wine="wine" v-for="wine in wines" :key="wine" />
     </div>
-    <Vipps class="vipps" :amount="1" />
   </div>
 </template>
 
@@ -139,6 +151,20 @@ export default {
       }
       this.attendeesFetched = true;
     },
+    scrollToContent() {
+      console.log(window.scrollY)
+      const intersectingHeaderHeight = this.$refs.header.getBoundingClientRect().bottom - 50;
+      const { scrollY } = window;
+      let scrollHeight = intersectingHeaderHeight;
+      if (scrollY > 0) {
+        scrollHeight = intersectingHeaderHeight + scrollY;
+      }
+
+      window.scrollTo({
+        top: scrollHeight,
+        behavior: "smooth"
+      });
+    },
     track() {
       window.ga('send', 'pageview', '/lottery/game');
     }
@@ -146,241 +172,149 @@ export default {
 };
 </script>
 
-<!-- TODO move link styling to global with more generic name -->
 <style lang="scss" scoped>
 @import "../styles/global.scss";
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
-.generate-link {
-  color: #333333;
-  text-decoration: none;
-  display: block;
-  width: 100vw;
-  text-align: center;
-  margin-bottom: 0px;
 
-  @include mobile {
-    width: 60vw;
-    margin: auto;
-  }
+.container {
+  width: 80vw;
+  padding: 0 10vw;
+
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
 }
 
-.vipps-image {
-  width: 250px;
-  margin: auto;
-  display: block;
-  margin-top: 30px;
+h2 {
+  font-size: 1.1rem;
+  margin-bottom: 1.75rem;
 }
 
-.generator-link {
-  font-weight: bold;
-  border-bottom: 1px solid $link-color;
-}
-</style>
+header {
+  background-color: $primary;
+  padding-bottom: 3rem;
+  margin-bottom: 3rem;
 
-<style lang="scss" scoped>
-@import "../styles/global.scss";
-@import "../styles/variables.scss";
-@import "../styles/media-queries.scss";
-.color-selector {
-  margin-bottom: 0.65rem;
-  margin-right: 1rem;
-
-  @include desktop {
-    min-width: 175px;
-  }
-
-  @include mobile {
-    max-width: 25vw;
-  }
-
-  .active {
-    border: 2px solid unset;
-
-    &.green {
-      border-color: $green;
-    }
-    &.blue {
-      border-color: $dark-blue;
-    }
-    &.red {
-      border-color: $red;
-    }
-    &.yellow {
-      border-color: $dark-yellow;
-    }
-  }
-
-  button {
-    border: 2px solid transparent;
-    display: inline-flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    height: 2.5rem;
-    width: 2.5rem;
-
-    // disable-dbl-tap-zoom
-    touch-action: manipulation;
+  .left {
+    grid-column: 1 / 4;
+    margin-right: 1rem;
 
     @include mobile {
-      margin: 2px;
+      grid-column: 1 / 5;
+      margin-right: 0;
+    }
+  }
+
+  .right {
+    grid-column: 4;
+
+    @include mobile {
+      display: none;
+    }
+  }
+
+  h1 {
+    text-align: left !important;
+    font-weight: 500 !important;
+    font-size: 3rem;
+    margin: 4rem 0 2rem !important;
+  }
+
+  ol {
+    font-size: 1.4rem;
+    line-height: 3rem;
+    color: $matte-text-color;
+  }
+
+  p {
+    font-size: 1.4rem;
+    line-height: 2rem;
+    margin-top: 0;
+    position: relative;
+
+    .vin-link {
+      cursor: default !important;
     }
 
-    &.green {
-      background: #c8f9df;
-    }
-    &.blue {
-      background: #d4f2fe;
-    }
-    &.red {
-      background: #fbd7de;
-    }
-    &.yellow {
-      background: #fff6d6;
+    .icon {
+      position: absolute;
+      bottom: 3px;
+      color: $link-color;
+      margin-left: 0.5rem;
+      display: inline-block;
+      transform: rotate(-90deg);
+      cursor: pointer;
     }
   }
+
+  .vin-link {
+    font-weight: 400 !important;
+    border-width: 2px;
+  }
 }
 
-.colors {
+.todays-raffles {
+  grid-column: 1;
+}
+
+.raffle-container {
+  width: 165px;
+  height: 175px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: center;
-  max-width: 1400px;
-  margin: 0 auto;
+  justify-content: space-between;
 
-  @include mobile {
-    margin: 1.8rem auto 0;
-  }
+  .raffle-element {
+    font-size: 1.6rem;
+    color: $matte-text-color;
+    height: 75px;
+    width: 75px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  .label-div {
-    margin-top: 0.5rem;
-    width: 100%;
-  }
-}
-
-.colors-box {
-  width: 150px;
-  height: 150px;
-  margin: 20px;
-  -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;
-
-  @include mobile {
-    width: 120px;
-    height: 120px;
-    margin: 10px;
-  }
-}
-
-.colors-overlay {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  padding: 0 0.25rem;
-  position: relative;
-
-  p {
-    width: 70%;
-    border: 0;
-    padding: 0;
-    font-size: 1.5rem;
-    height: unset;
-    max-height: unset;
-
-    @include mobile {
-      font-size: 1.3rem;
-    }
-  }
-}
-
-.green,
-.green .colors-overlay > input {
-  background-color: $light-green;
-  color: $green;
-}
-
-.blue,
-.blue .colors-overlay > input {
-  background-color: $light-blue;
-  color: $blue;
-}
-
-.yellow,
-.yellow .colors-overlay > input {
-  background-color: $light-yellow;
-  color: $yellow;
-}
-
-.red,
-.red .colors-overlay > input {
-  background-color: $light-red;
-  color: $red;
-}
-</style>
-
-<style lang="scss" scoped>
-@import "../styles/global.scss";
-@import "../styles/variables.scss";
-@import "../styles/media-queries.scss";
-hr {
-  width: 80%;
-}
-h1,
-h2 {
-  text-align: center;
-}
-.current-draw {
-  margin: auto;
-}
-
-.title-info {
-  width: 100%;
-  text-align: center;
-}
-
-.outer-chat {
-  margin: 0 60px 0 10px;
-  @include mobile {
     margin: 0;
   }
 }
 
-.outer-attendees {
-  margin: 0 10px 0 45px;
-  @include mobile {
-    margin: 0;
-  }
+.winners {
+  grid-column: 2 / 5;
 }
 
-.center-new-winner {
-  margin: auto !important;
+.container-attendees {
+  grid-column: 1 / 3;
+  margin-right: 1rem;
+  margin-top: 2rem;
 }
 
-.middle-elements {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  height: 400px;
+.attendees {
+  padding: 2rem;
 
-  @include mobile {
-    height: auto;
-    flex-direction: column;
-  }
+  -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);
 }
 
-.vipps {
-  margin-top: 70px;
-  display: flex;
-  padding-bottom: 50px;
-  justify-content: center;
-  @include mobile {
-    flex-direction: column;
+.container-chat {
+  grid-column: 3 / 5;
+  margin-left: 1rem;
+  margin-top: 2rem;
+}
+
+.chat {
+  padding: 2rem;
+
+  -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);
+}
+
+.wines-container {
+  margin-bottom: 4rem;
+
+  h2 {
+    grid-column: 1 / 5;
   }
 }
 </style>
-- 
2.34.1


From 7a2b5600c4bbefcff0fe6268603178a8b498695a Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 31 Dec 2020 17:29:53 +0100
Subject: [PATCH 11/17] Fetch and display todays wines.

---
 frontend/components/VirtualLotteryPage.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/components/VirtualLotteryPage.vue b/frontend/components/VirtualLotteryPage.vue
index 8bb8cd3..10e4388 100644
--- a/frontend/components/VirtualLotteryPage.vue
+++ b/frontend/components/VirtualLotteryPage.vue
@@ -63,16 +63,18 @@ import { attendees, winners, prelottery } from "@/api";
 import Chat from "@/ui/Chat";
 import Vipps from "@/ui/Vipps";
 import Attendees from "@/ui/Attendees";
+import Wine from "@/ui/Wine";
 import Winners from "@/ui/Winners";
 import WinnerDraw from "@/ui/WinnerDraw";
 import io from "socket.io-client";
 
 export default {
-  components: { Chat, Attendees, Winners, WinnerDraw, Vipps },
+  components: { Chat, Attendees, Winners, WinnerDraw, Vipps, Wine },
   data() {
     return {
       attendees: [],
       winners: [],
+      wines: [],
       currentWinnerDrawn: false,
       currentWinner: {},
       socket: null,
@@ -85,6 +87,7 @@ export default {
   mounted() {
     this.track();
     this.getAttendees();
+    this.getTodaysWines();
     this.getWinners();
     this.socket = io(window.location.origin);
     this.socket.on("color_winner", msg => {});
@@ -116,13 +119,6 @@ export default {
     this.socket.disconnect();
     this.socket = null;
   },
-  computed: {
-    todayExists: () => {
-      return prelottery()
-        .then(wines => wines.length > 0)
-        .catch(() => false);
-    }
-  },
   methods: {
     getWinners: async function() {
       let response = await winners();
@@ -131,6 +127,14 @@ export default {
       }
       this.winnersFetched = true;
     },
+    getTodaysWines() {
+      prelottery()
+        .then(wines => {
+          this.wines = wines;
+          this.todayExists = wines.length > 0;
+        })
+        .catch(_ => this.todayExists = false)
+    },
     getAttendees: async function() {
       let response = await attendees();
       if (response) {
-- 
2.34.1


From 9ab3c8c83d120cb2882e04c8a29d257eb0231d25 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 2 Jan 2021 13:17:30 +0100
Subject: [PATCH 12/17] Displays logged-in username and moved logout btn.

---
 frontend/ui/Chat.vue | 43 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/frontend/ui/Chat.vue b/frontend/ui/Chat.vue
index 7769ea5..55a36e8 100644
--- a/frontend/ui/Chat.vue
+++ b/frontend/ui/Chat.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="chat-container">
+    <span class="logged-in-username" v-if="username">Logget inn som: <span class="username">{{ username }}</span> <button @click="removeUsername">Logg ut</button></span>
+
     <div class="history" ref="history" v-if="chatHistory.length > 0">
       <div class="opaque-skirt"></div>
       <div v-if="hasMorePages" class="fetch-older-history">
@@ -17,11 +19,12 @@
         <span class="message">{{ history.message }}</span>
       </div>
     </div>
-    <div v-if="username" class="input">
+
+    <div v-if="username" class="user-actions">
       <input @keyup.enter="sendMessage" type="text" v-model="message" placeholder="Melding.." />
       <button @click="sendMessage">Send</button>
-      <button @click="removeUsername">Logg ut</button>
     </div>
+
     <div v-else class="username-dialog">
       <input
         type="text"
@@ -207,13 +210,34 @@ export default {
 
 .chat-container {
   position: relative;
+  transform: translate3d(0,0,0);
 }
 
 input {
-  width: 80%;
+  width: 100%;
+  height: 3.25rem;
 }
 
-.input {
+.logged-in-username {
+  position: absolute;
+  top: 0.75rem;
+  left: 1rem;
+  color: $matte-text-color;
+  width: calc(100% - 2rem);
+
+  button {
+    width: unset;
+    padding: 5px 10px;
+    position: absolute;
+    right: 0rem;
+  }
+
+  .username {
+    border-bottom: 2px solid $link-color;
+  }
+}
+
+.user-actions {
   display: flex;
 }
 
@@ -223,6 +247,7 @@ input {
   overflow-y: scroll;
   position: relative;
   max-height: 550px;
+  margin-top: 2rem;
 
   &-message {
     display: flex;
@@ -247,9 +272,9 @@ input {
   }
 
   & .opaque-skirt {
-    width: 100%;
-    position: absolute;
-    height: 1rem;
+    width: calc(100% - 2rem);
+    position: fixed;
+    height: 2rem;
     z-index: 1;
     background: linear-gradient(
       to bottom,
@@ -314,5 +339,9 @@ button {
   transition: transform 0.5s ease;
   -webkit-font-smoothing: antialiased;
   touch-action: manipulation;
+
+  @include mobile {
+    padding: 10px 10px;
+  }
 }
 </style>
-- 
2.34.1


From dfe89160b1dac843cf1591361879e97fb47dc0a7 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 2 Jan 2021 13:18:35 +0100
Subject: [PATCH 13/17] Aling text center.

---
 frontend/ui/Winners.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/ui/Winners.vue b/frontend/ui/Winners.vue
index 5b2bfa0..976bdf2 100644
--- a/frontend/ui/Winners.vue
+++ b/frontend/ui/Winners.vue
@@ -59,6 +59,7 @@ h3 {
   margin: auto;
   color: $matte-text-color;
   font-size: 1.6rem;
+  text-align: center;
 }
 
 .winning-raffles {
-- 
2.34.1


From fea81dcd634c9e3104f08669252fa1f06eb14439 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 2 Jan 2021 13:19:16 +0100
Subject: [PATCH 14/17] Desktop-/mobile-only css classes.

---
 frontend/styles/global.scss        |  3 +--
 frontend/styles/media-queries.scss | 12 ++++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/styles/global.scss b/frontend/styles/global.scss
index bbdc27c..5f64ca6 100644
--- a/frontend/styles/global.scss
+++ b/frontend/styles/global.scss
@@ -112,10 +112,9 @@ textarea {
 
 .vin-button {
   font-family: Arial;
-  $color: #b7debd;
   position: relative;
   display: inline-block;
-  background: $color;
+  background: $primary;
   color: #333;
   padding: 10px 30px;
   margin: 0;
diff --git a/frontend/styles/media-queries.scss b/frontend/styles/media-queries.scss
index 8108453..1cf3261 100644
--- a/frontend/styles/media-queries.scss
+++ b/frontend/styles/media-queries.scss
@@ -25,4 +25,16 @@ $desktop-max: 2004px;
   @media (min-width: #{$desktop-max + 1px}){
     @content;
   }
+}
+
+.desktop-only {
+  @include mobile {
+    display: none;
+  }
+}
+
+.mobile-only {
+  @include tablet {
+    display: none;
+  }
 }
\ No newline at end of file
-- 
2.34.1


From 326101f7d2784fb5e823b56e7d0680288ae90a89 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 2 Jan 2021 13:26:10 +0100
Subject: [PATCH 15/17] New vipps-pill component opens vipps when clicked.

---
 frontend/ui/VippsPill.vue                     |  81 ++++++++++++++++++
 .../images/vipps-pay_with_vipps_pill.png      | Bin 0 -> 2628 bytes
 2 files changed, 81 insertions(+)
 create mode 100644 frontend/ui/VippsPill.vue
 create mode 100644 public/assets/images/vipps-pay_with_vipps_pill.png

diff --git a/frontend/ui/VippsPill.vue b/frontend/ui/VippsPill.vue
new file mode 100644
index 0000000..5d5d136
--- /dev/null
+++ b/frontend/ui/VippsPill.vue
@@ -0,0 +1,81 @@
+<template>
+  <div aria-label="button" role="button" @click="openVipps" tabindex="0">
+    <img src="public/assets/images/vipps-pay_with_vipps_pill.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    amount: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      phone: __PHONE__,
+      name: __NAME__,
+      price: __PRICE__,
+      message: __MESSAGE__
+    };
+  },
+  computed: {
+    isMobile: function() {
+      return this.isMobileFunction();
+    },
+    priceToPay: function() {
+      return this.amount * (this.price * 100);
+    },
+    vippsUrlBasedOnUserAgent: function() {
+      if (navigator.userAgent.includes("iPhone")) {
+        return (
+          "https://qr.vipps.no/28/2/01/031/47" +
+          this.phone.replace(/ /g, "") +
+          "?v=1&m=" +
+          this.message +
+          "&a=" +
+          this.priceToPay
+        );
+      }
+
+      return (
+        "https://qr.vipps.no/28/2/01/031/47" +
+        this.phone.replace(/ /g, "") +
+        "?v=1&m=" +
+        this.message
+      );
+    }
+  },
+  methods: {
+    openVipps() {
+      if (!this.isMobileFunction()) {
+        return;
+      }
+      window.location.assign(this.vippsUrlBasedOnUserAgent);
+    },
+    isMobileFunction() {
+      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;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+img {
+  cursor: pointer;
+  width: 100%;
+}
+</style>
diff --git a/public/assets/images/vipps-pay_with_vipps_pill.png b/public/assets/images/vipps-pay_with_vipps_pill.png
new file mode 100644
index 0000000000000000000000000000000000000000..eed1ceeec6704c1bb82452e386dcf3ee1c16cb41
GIT binary patch
literal 2628
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
S5vPL>4`gm?X;O{wxc5K)?i$<x

literal 0
HcmV?d00001

-- 
2.34.1


From f115ee79e60f159888a8dec5c3df40617f5474af Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 2 Jan 2021 13:28:57 +0100
Subject: [PATCH 16/17] Added element grid order for mobile styling.

- Added styling for positioning and styling on mobile.
- New vippsPill component for smaller vipps button when on mobile.
---
 frontend/components/VirtualLotteryPage.vue | 141 ++++++++++++++-------
 1 file changed, 96 insertions(+), 45 deletions(-)

diff --git a/frontend/components/VirtualLotteryPage.vue b/frontend/components/VirtualLotteryPage.vue
index 10e4388..cf7d67e 100644
--- a/frontend/components/VirtualLotteryPage.vue
+++ b/frontend/components/VirtualLotteryPage.vue
@@ -2,22 +2,22 @@
   <div>
     <header ref="header">
       <div class="container">
-        <div class="left">
+        <div class="instructions">
           <h1 class="title">Virtuelt lotteri</h1>
           <ol>
-            <li>Vurder om du ønsker å bruke vår <router-link to="/generate" class="vin-link">loddgenerator</router-link>, eller se <router-link to="/dagens" class="vin-link">dagens fangst.</router-link></li>
-            <li>Send vipps med melding "Vinlotteri" for å bli registrert til virtuelt lotteri.</li>
+            <li>Vurder om du ønsker å bruke <router-link to="/generate" class="vin-link">loddgeneratoren</router-link>, eller sjekke ut <router-link to="/dagens" class="vin-link">dagens fangst.</router-link></li>
+            <li>Send vipps med melding "Vinlotteri" for å bli registrert til lotteriet.</li>
             <li>Send gjerne melding om fargeønske også.</li>
           </ol>
+        </div>
 
-          <p>
+        <Vipps :amount="1" class="vipps-qr desktop-only" />
+
+        <VippsPill class="vipps-pill mobile-only" />
+
+         <p class="call-to-action">
             <span class="vin-link">Følg med på utviklingen</span> og <span class="vin-link">chat om trekningen</span>
             <i class="icon icon--arrow-left" @click="scrollToContent"></i></p>
-        </div>
-
-        <div class="right">
-          <Vipps :amount="1" />
-        </div>
       </div>
     </header>
 
@@ -62,6 +62,7 @@
 import { attendees, winners, prelottery } from "@/api";
 import Chat from "@/ui/Chat";
 import Vipps from "@/ui/Vipps";
+import VippsPill from "@/ui/VippsPill";
 import Attendees from "@/ui/Attendees";
 import Wine from "@/ui/Wine";
 import Winners from "@/ui/Winners";
@@ -69,17 +70,16 @@ import WinnerDraw from "@/ui/WinnerDraw";
 import io from "socket.io-client";
 
 export default {
-  components: { Chat, Attendees, Winners, WinnerDraw, Vipps, Wine },
+  components: { Chat, Attendees, Winners, WinnerDraw, Vipps, VippsPill, Wine },
   data() {
     return {
       attendees: [],
       winners: [],
       wines: [],
       currentWinnerDrawn: false,
-      currentWinner: {},
+      currentWinner: null,
       socket: null,
       attendeesFetched: false,
-      winnersFetched: false,
       wasDisconnected: false,
       ticketsBought: {}
     };
@@ -98,14 +98,18 @@ export default {
 
     this.socket.on("winner", async msg => {
       this.currentWinnerDrawn = true;
-      this.currentWinner = { name: msg.name, color: msg.color };
+      this.currentWinner = {
+        name: msg.name,
+        color: msg.color,
+        winnerCount: msg.winner_count
+      };
 
       setTimeout(() => {
         this.getWinners();
         this.getAttendees();
         this.currentWinner = null;
         this.currentWinnerDrawn = false;
-      }, 12000);
+      }, 19250);
     });
     this.socket.on("refresh_data", async msg => {
       this.getAttendees();
@@ -125,7 +129,6 @@ export default {
       if (response) {
         this.winners = response;
       }
-      this.winnersFetched = true;
     },
     getTodaysWines() {
       prelottery()
@@ -177,7 +180,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/global.scss";
+
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
 
@@ -185,8 +188,19 @@ export default {
   width: 80vw;
   padding: 0 10vw;
 
+  @include mobile {
+    width: 90vw;
+    padding: 0 5vw;
+  }
+
   display: grid;
   grid-template-columns: repeat(4, 1fr);
+
+  > div, > section {
+    @include mobile {
+      grid-column: span 5;
+    }
+  }
 }
 
 h2 {
@@ -195,39 +209,52 @@ h2 {
 }
 
 header {
+  h1 {
+    text-align: left;
+    font-weight: 500;
+    font-size: 3rem;
+    margin: 4rem 0 2rem;
+
+    @include mobile {
+      margin-top: 1rem;
+      font-size: 2.75rem;
+    }
+  }
+
   background-color: $primary;
   padding-bottom: 3rem;
   margin-bottom: 3rem;
 
-  .left {
+  .instructions {
     grid-column: 1 / 4;
-    margin-right: 1rem;
 
     @include mobile {
-      grid-column: 1 / 5;
-      margin-right: 0;
+      grid-column: span 5;
     }
   }
 
-  .right {
+  .vipps-qr {
     grid-column: 4;
-
-    @include mobile {
-      display: none;
-    }
+    margin-left: 1rem;
   }
 
-  h1 {
-    text-align: left !important;
-    font-weight: 500 !important;
-    font-size: 3rem;
-    margin: 4rem 0 2rem !important;
+  .vipps-pill {
+    margin: 0 auto 2rem;
+    max-width: 80vw;
+  }
+
+  .call-to-action {
+    grid-column: span 5;
   }
 
   ol {
     font-size: 1.4rem;
     line-height: 3rem;
     color: $matte-text-color;
+
+    @include mobile {
+      line-height: 2rem;
+    }
   }
 
   p {
@@ -237,7 +264,7 @@ header {
     position: relative;
 
     .vin-link {
-      cursor: default !important;
+      cursor: default;
     }
 
     .icon {
@@ -252,13 +279,17 @@ header {
   }
 
   .vin-link {
-    font-weight: 400 !important;
+    font-weight: 400;
     border-width: 2px;
   }
 }
 
 .todays-raffles {
   grid-column: 1;
+
+  @include mobile {
+    order: 2;
+  }
 }
 
 .raffle-container {
@@ -269,6 +300,11 @@ header {
   flex-wrap: wrap;
   justify-content: space-between;
 
+  @include mobile {
+    width: 100%;
+    height: 100%;
+  }
+
   .raffle-element {
     font-size: 1.6rem;
     color: $matte-text-color;
@@ -284,35 +320,50 @@ header {
 
 .winners {
   grid-column: 2 / 5;
+
+  @include mobile {
+    order: 1;
+  }
 }
 
 .container-attendees {
   grid-column: 1 / 3;
   margin-right: 1rem;
   margin-top: 2rem;
-}
 
-.attendees {
-  padding: 2rem;
+  @include mobile {
+    margin-right: 0;
+    order: 4;
+  }
 
-  -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);
+  > div {
+    padding: 1rem;
+
+    -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);
+  }
 }
 
 .container-chat {
   grid-column: 3 / 5;
   margin-left: 1rem;
   margin-top: 2rem;
+
+  @include mobile {
+    margin-left: 0;
+    order: 3;
+  }
+
+  > div {
+    padding: 1rem;
+
+    -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);
+  }
 }
 
-.chat {
-  padding: 2rem;
-
-  -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);
-}
 
 .wines-container {
   margin-bottom: 4rem;
-- 
2.34.1


From 342651a90c91d48d9558a9c6990ec49e2a4c0f30 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 2 Jan 2021 13:37:07 +0100
Subject: [PATCH 17/17] Footer gets link to github repo & mailto address.

---
 frontend/ui/Footer.vue               |  71 +++++++++++++++++++++++++--
 public/assets/images/logo-github.png | Bin 0 -> 2625 bytes
 2 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 public/assets/images/logo-github.png

diff --git a/frontend/ui/Footer.vue b/frontend/ui/Footer.vue
index 5790e65..53e1c51 100644
--- a/frontend/ui/Footer.vue
+++ b/frontend/ui/Footer.vue
@@ -1,5 +1,20 @@
 <template>
   <footer>
+    <ul>
+      <li>
+        <a href="https://github.com/KevinMidboe/vinlottis" class="github">
+          <span>Open-sourced at github</span>
+          <img src="/public/assets/images/logo-github.png" alt="github logo">
+        </a>
+      </li>
+
+      <li>
+        <a href="mailto:questions@vinlottis.no" class="mail">
+          <span class="vin-link">questions@vinlottis.no</span>
+        </a>
+      </li>
+    </ul>
+
     <router-link to="/" class="company-logo">
       <img src="/public/assets/images/knowit.svg" alt="knowit logo">
     </router-link>
@@ -13,20 +28,70 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/variables.scss";
+@import "../styles/media-queries.scss";
 
 footer {
   width: 100%;
   height: 100px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
   background: #f4f4f4;
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin-left: 5rem;
+
+    li:not(:first-of-type) {
+      margin-top: 0.75rem;
+    }
+  }
+
+  a {
+    color: $matte-text-color;
+  }
+
+  .github {
+    display: flex;
+    align-items: center;
+
+
+    img {
+      margin-left: 0.5rem;
+      height: 30px;
+    }
+  }
+
+  .mail {
+    display: flex;
+    align-items: center;
+
+    img {
+      margin-left: 0.5rem;
+      height: 23px;
+    }
+  }
+
   .company-logo{
-    padding: 0 5em 0 0;
-    img{
+    margin-right: 5em;
+
+    img {
       width: 100px;
     }
   }
+
+  @include mobile {
+    $margin: 1rem;
+    ul {
+      margin-left: $margin;
+    }
+
+    .company-logo {
+      margin-right: $margin;
+    }
+  }
 }
 
 </style>
\ No newline at end of file
diff --git a/public/assets/images/logo-github.png b/public/assets/images/logo-github.png
new file mode 100644
index 0000000000000000000000000000000000000000..182a1a3f734fc1b7d712c68b04c29bad9460d6cd
GIT binary patch
literal 2625
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
W4I>>0bz>}E>ge79v<vGaGyei9dr3zC

literal 0
HcmV?d00001

-- 
2.34.1