More design-updates

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">
+      <!-- <img src="/public/assets/images/vipps.png" class="vipps-image" /> -->
-        <Vipps class="vipps-container" />
+      <div class="bottom-container">
+        <div class="left-bottom">
+          <TotalBought />
+          <hr class="bought-and-highscore-separator" />
+          <div class="highscore-and-wines">
             <Highscore />
-        <Wines />
+            <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;
+  flex-direction: column;
-  justify-content: space-evenly;
+  align-items: flex-start;
-  align-items: baseline;
   padding-bottom: 25px;
-  max-width: 1400px;
+  border-right: 1px solid #333;
-  margin: auto;
 }
 
 @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>

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>

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>

src/ui/TotalBought.vue

@@ -1,52 +1,51 @@
 <template>
+  <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>
-        <div class="inner-text-container">
           <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 class="blue-container inner-bought-container">
         <div class="number-container">
           <span class="blue bought-number-span">{{ blue.total }}</span>
-        <div class="inner-text-container">
           <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 class="yellow-container inner-bought-container">
         <div class="number-container">
           <span class="yellow bought-number-span">{{ yellow.total }}</span>
-        <div class="inner-text-container">
           <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 class="green-container inner-bought-container">
         <div class="number-container">
           <span class="green bought-number-span">{{ green.total }}</span>
-        <div class="inner-text-container">
           <span> kjøpte</span>
-          <div>{{ green.win }} vinn</div>
+        </div>
-          <div>{{ greenPercentage }}% vinn</div>
+        <div class="inner-text-container">
+          <div>{{ green.win }} vinn - {{ greenPercentage }}% vinn</div>
         </div>
       </div>
-    </div>
+      <div class="total-container inner-bought-container">
-    <!--<div class="total-container inner-bought-container">
         <div>
-        totalt&nbsp;
+          Totalt&nbsp;
           <span class="total">{{ total }}</span> kjøpt
         </div>
         <div>{{ totalWin }} vinn</div>
-    </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;
+  justify-content: space-between;
-  font-family: "knowit";
+  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>

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>

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>