From c177f1cda8c5a654878444a200a94f3f39fc6719 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Wed, 22 Jan 2020 17:16:02 +0100
Subject: [PATCH] More design-updates

---
 src/components/VinlottisPage.vue | 77 ++++++++++++++++++++++-----
 src/ui/Banner.vue                |  8 +--
 src/ui/Highscore.vue             | 11 +++-
 src/ui/PurchaseGraph.vue         |  6 +++
 src/ui/TotalBought.vue           | 91 ++++++++++++++++++--------------
 src/ui/WinGraph.vue              |  8 +++
 src/ui/Wines.vue                 |  9 +++-
 7 files changed, 149 insertions(+), 61 deletions(-)

diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue
index 699dea4..e961936 100644
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -10,13 +10,20 @@
         <PurchaseGraph class="purchase" />
         <WinGraph class="win" />
       </div>
-      <TotalBought />
-      <!-- <img src="/public/assets/images/vipps.png" class="vipps-image" /> -->
 
-      <div class="wine-and-highscore-container">
-        <Vipps class="vipps-container" />
-        <Highscore />
-        <Wines />
+      <!-- <img src="/public/assets/images/vipps.png" class="vipps-image" /> -->
+      <div class="bottom-container">
+        <div class="left-bottom">
+          <TotalBought />
+          <hr class="bought-and-highscore-separator" />
+          <div class="highscore-and-wines">
+            <Highscore />
+            <Wines class="wines-container" />
+          </div>
+        </div>
+        <div class="vipps-outer-container">
+          <Vipps class="vipps-container" />
+        </div>
       </div>
     </div>
   </div>
@@ -52,6 +59,41 @@ body {
 }
 </style>
 <style lang="scss" scoped>
+.bottom-container {
+  display: flex;
+  flex-direction: row;
+  max-width: 1350px;
+  margin: auto;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.left-bottom {
+  width: 75%;
+}
+
+.bought-and-highscore-separator {
+  border: none;
+  border-bottom: 1px solid rgb(237, 237, 237);
+}
+
+.highscore-and-wines {
+  display: flex;
+  flex-direction: row;
+  padding-top: 1.5rem;
+}
+
+.wines-container {
+  margin-left: 30px;
+}
+
+.vipps-outer-container {
+  border-left: 1px solid rgb(237, 237, 237);
+  margin-left: 20px;
+  display: flex;
+  align-items: center;
+}
+
 @font-face {
   font-family: "knowit";
   font-weight: 600;
@@ -104,7 +146,9 @@ h1 {
 }
 
 .vipps-container {
-  margin-top: 25px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  margin-left: 30px;
 }
 
 .chart-container {
@@ -120,12 +164,10 @@ h1 {
 
 .wine-and-highscore-container {
   display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  align-items: baseline;
+  flex-direction: column;
+  align-items: flex-start;
   padding-bottom: 25px;
-  max-width: 1400px;
-  margin: auto;
+  border-right: 1px solid #333;
 }
 
 @media only screen and (max-width: 768px) {
@@ -149,8 +191,17 @@ h1 {
     justify-content: flex-start;
   }
 
-  .wine-and-highscore-container {
+  .bottom-container,
+  .highscore-and-wines {
     flex-direction: column;
   }
+
+  .vipps-container {
+    margin-left: 0px;
+  }
+
+  .wines-container {
+    margin-left: 0px;
+  }
 }
 </style>
diff --git a/src/ui/Banner.vue b/src/ui/Banner.vue
index 1b0ebe7..dbe89c0 100644
--- a/src/ui/Banner.vue
+++ b/src/ui/Banner.vue
@@ -13,8 +13,8 @@
   margin-top: 0px;
   padding: 33px 0;
   background-color: #dbeede;
-  -webkit-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.65);
-  -moz-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.65);
-  box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.65);
+  -webkit-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
+  -moz-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
+  box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/ui/Highscore.vue b/src/ui/Highscore.vue
index 2e6761e..e52069b 100644
--- a/src/ui/Highscore.vue
+++ b/src/ui/Highscore.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="highscore.length > 0">
+  <div class="highscores" v-if="highscore.length > 0">
     <h3>Highscore</h3>
     <ol>
       <li v-for="person in highscore">
@@ -29,10 +29,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.highscores {
+  padding-right: 50px;
+}
 div {
   margin: 15px 0 0 0;
-  font-family: "knowit";
+  font-family: Arial;
   display: inline-flex;
   flex-direction: column;
 }
+ol {
+  padding-left: 1rem;
+  margin-left: 0;
+}
 </style>
diff --git a/src/ui/PurchaseGraph.vue b/src/ui/PurchaseGraph.vue
index b83eff2..d8747bc 100644
--- a/src/ui/PurchaseGraph.vue
+++ b/src/ui/PurchaseGraph.vue
@@ -118,4 +118,10 @@ export default {
   margin-right: 5px;
   border-radius: 25px;
 }
+
+@media only screen and (max-width: 768px) {
+  canvas {
+    height: 50vh;
+  }
+}
 </style>
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index 64f0aa3..be5a474 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -1,52 +1,51 @@
 <template>
-  <div class="bought-container">
-    <div class="red-container inner-bought-container">
-      <div class="number-container">
-        <span class="red bought-number-span">{{ red.total }}</span>
-        <div class="inner-text-container">
+  <div class="outer-bought">
+    <h3>Loddstatistikk</h3>
+    <div class="bought-container">
+      <div class="red-container inner-bought-container">
+        <div class="number-container">
+          <span class="red bought-number-span">{{ red.total }}</span>
           <span> kjøpte</span>
-          <div>{{ red.win }} vinn</div>
-          <div>{{ redPercentage }}% vinn</div>
+        </div>
+        <div class="inner-text-container">
+          <div>{{ red.win }} vinn - {{ redPercentage }}% vinn</div>
         </div>
       </div>
-    </div>
-    <div class="blue-container inner-bought-container">
-      <div class="number-container">
-        <span class="blue bought-number-span">{{ blue.total }}</span>
-        <div class="inner-text-container">
+      <div class="blue-container inner-bought-container">
+        <div class="number-container">
+          <span class="blue bought-number-span">{{ blue.total }}</span>
           <span> kjøpte</span>
-          <div>{{ blue.win }} vinn</div>
-          <div>{{ bluePercentage }}% vinn</div>
+        </div>
+        <div class="inner-text-container">
+          <div>{{ blue.win }} vinn - {{ bluePercentage }}% vinn</div>
         </div>
       </div>
-    </div>
-    <div class="yellow-container inner-bought-container">
-      <div class="number-container">
-        <span class="yellow bought-number-span">{{ yellow.total }}</span>
-        <div class="inner-text-container">
+      <div class="yellow-container inner-bought-container">
+        <div class="number-container">
+          <span class="yellow bought-number-span">{{ yellow.total }}</span>
           <span> kjøpte</span>
-          <div>{{ yellow.win }} vinn</div>
-          <div>{{ yellowPercentage }}% vinn</div>
+        </div>
+        <div class="inner-text-container">
+          <div>{{ yellow.win }} vinn - {{ yellowPercentage }}% vinn</div>
         </div>
       </div>
-    </div>
-    <div class="green-container inner-bought-container">
-      <div class="number-container">
-        <span class="green bought-number-span">{{ green.total }}</span>
-        <div class="inner-text-container">
+      <div class="green-container inner-bought-container">
+        <div class="number-container">
+          <span class="green bought-number-span">{{ green.total }}</span>
           <span> kjøpte</span>
-          <div>{{ green.win }} vinn</div>
-          <div>{{ greenPercentage }}% vinn</div>
+        </div>
+        <div class="inner-text-container">
+          <div>{{ green.win }} vinn - {{ greenPercentage }}% vinn</div>
         </div>
       </div>
-    </div>
-    <!--<div class="total-container inner-bought-container">
-      <div>
-        totalt&nbsp;
-        <span class="total">{{ total }}</span> kjøpt
+      <div class="total-container inner-bought-container">
+        <div>
+          Totalt&nbsp;
+          <span class="total">{{ total }}</span> kjøpt
+        </div>
+        <div>{{ totalWin }} vinn</div>
       </div>
-      <div>{{ totalWin }} vinn</div>
-    </div>-->
+    </div>
   </div>
 </template>
 <script>
@@ -103,15 +102,20 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .number-container {
   display: flex;
+  align-items: flex-end;
+
+  & span:last-child {
+    padding-bottom: 5px;
+    padding-left: 5px;
+  }
 }
 
 .inner-text-container {
-  margin-top: 0.8rem;
   padding-left: 5px;
 }
 
@@ -122,11 +126,12 @@ export default {
 .bought-container {
   display: flex;
   flex-direction: row;
-  width: 100vw;
+  width: 100%;
+  padding-bottom: 3rem;
   max-width: 1400px;
   margin: auto;
-  justify-content: space-around;
-  font-family: "knowit";
+  justify-content: space-between;
+  font-family: Arial;
 }
 
 .green,
@@ -153,4 +158,10 @@ export default {
 .blue {
   color: #57d2fb;
 }
+@media only screen and (max-width: 768px) {
+  .bought-container {
+    flex-wrap: wrap;
+    flex-direction: column;
+  }
+}
 </style>
diff --git a/src/ui/WinGraph.vue b/src/ui/WinGraph.vue
index 8dcd767..21c2fce 100644
--- a/src/ui/WinGraph.vue
+++ b/src/ui/WinGraph.vue
@@ -90,3 +90,11 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+@media only screen and (max-width: 768px) {
+  canvas {
+    height: 50vh;
+  }
+}
+</style>
diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue
index 3ac353c..2f06997 100644
--- a/src/ui/Wines.vue
+++ b/src/ui/Wines.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="wines.length > 0">
-    <h3>Viner</h3>
+    <h3>Topp viner</h3>
     <ol>
       <li v-for="wine in wines">
         <span v-if="wine.vivinoLink == '' || wine.vivinoLink == null"
@@ -38,7 +38,7 @@ export default {
 
 <style lang="scss" scoped>
 h3 {
-  text-align: center;
+  text-align: left;
 }
 div {
   margin: 15px 0 0 0;
@@ -51,4 +51,9 @@ a {
   text-decoration: none;
   color: orange;
 }
+
+ol {
+  padding-left: 1rem;
+  margin-left: 0;
+}
 </style>