src/components/VinlottisPage.vue

@@ -19,39 +19,19 @@
 
     </section>
     
-    <div class="container">
-      <!-- <span> Scroll for å annen gøy statistikk</span> -->
-      
+    <section class="container">
+      <p class="scroll-info"> | Scroll for å se annen gøy statistikk</p>
 
-      
-      <section class="header-and-notification">
-          <h1 @click="startCountdown">Vinlotteri</h1>
-          <img
-            src="/public/assets/images/notification.svg"
-            alt="Notification-bell"
-            @click="requestNotificationAccess"
-            class="notification-request-button"
-            role="button"
-            v-if="notificationAllowed"
-          />
-      </section>
-
-
-      <div class="to-lottery-container">
-        <a href="#/lottery" class="to-lottery">Vil du til lotteriet?<span class="vin-link">Trykk her</span></a>
-      </div>
+      <Highscore class="highscore"/>
+      <TotalBought class="total-bought" />
       
       <section class="chart-container">
         <PurchaseGraph class="purchase" />
         <WinGraph class="win" />
       </section>
       
-      
-      <TotalBought class="total-bought" />
-      <Vipps class="vipps-icon" />
-      <Highscore class="highscore"/>
       <Wines class="wines-container" />
-    </div>
+    </section>
     
     <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
   </div>
@@ -199,126 +179,46 @@ h1 {
 .container{
   display: flex;
   flex-direction: column;
-  
-  .header-and-notification{
-    display: flex;
-    flex-direction: row;
-    margin: auto;
-  }
-
-  .vipps-icon{
-    margin: 1em;
-  }
 
   @include tablet {
-    margin: .5em;
     .chart-container {
       display: flex;
       width: 100%;
     }
 
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: auto-flow min-content;
-    grid-template-areas: "top-top top-top top-top"
-                         "top-bot top-bot top-bot"
-                         "middle-top middle-top middle-top"
-                         "middle-bot-left middle-bot-left middle-bot-right"
-                         "bot-left bot-right bot-right";
+    grid-template-columns: repeat(12, 1fr);
 
-    .header-and-notification {
-      grid-area: top-top;
-    }
-
-    .to-lottery-container{
-      grid-area: top-bot;
+    .scroll-info {
+      grid-column: 3 / -3;
     }
 
     .chart-container {
-      grid-area: middle-top;
+      grid-column: 3 / -3;
     }
 
     .total-bought {
-      grid-area: middle-bot-left;
+      grid-column: 3 / -3;
     }
 
     .highscore {
-      border-top: 1px solid rgb(237, 237, 237);
-      grid-area: bot-left;
+      grid-column: 3 / -3;
       align-self: baseline;
     }
 
     .wines-container {
-      border-top: 1px solid rgb(237, 237, 237);
-      padding-left: 1em;
-      border-left: 1px solid rgb(237, 237, 237);
-      grid-area: bot-right;
-    }
-
-    .vipps-icon {
-      padding-left: 1em;
-      align-self: center;
-      grid-area: middle-bot-right;
-      border-left: 1px solid rgb(237, 237, 237);
+      grid-column: 3 / -3;
     }
   }
 
-  @include desktop {
+  // @include desktop {
 
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: auto-flow min-content;
-    grid-template-areas: "top-top top-top top-top top-top"
-                         "top-bot top-bot top-bot top-bot"
-                         "middle-top middle-top middle-top middle-top"
-                         "middle-bot middle-bot middle-bot aside"
-                         "bot-left bot-right bot-right aside";
-    grid-gap: 1em;
-    align-items: center;
-
-    .header-and-notification {
-      grid-area: top-top;
-    }
-
-    .to-lottery-container {
-      grid-area: top-bot;
-    }
-
-    .chart-container {
-      grid-area: middle-top;
-    }
-
-    .total-bought {
-      grid-area: middle-bot;
-      border-bottom: 1px solid rgb(237, 237, 237);
-    }
-
-    .highscore {
-      border: none;
-      grid-area: bot-left;
-    }
-
-    .wines-container {
-      border: none;
-      grid-area: bot-right;
-    }
-
-    .vipps-icon {
-      grid-area: aside;
-      padding-left: 3em;
-      border-left: 1px solid rgb(237, 237, 237);
-    }
-  }
   
-  @include widescreen {
-    width: 70%;
-    max-width: 1800px;
-    margin: auto;
-
-    .vipps-icon {
-      padding-left: 6em;
-    }
-  }
+  // }
+  
+  // @include widescreen {
+  
+  // }
 }
 
 

src/ui/Highscore.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="highscores" v-if="highscore.length > 0">
-    <h3>
-      <router-link to="highscore">
-        Topp 10 vinnere <span class="vin-link">Se alle &gt;</span>
+
+    <section class="heading">
+      <h3>
+        Topp 5 vinnere
+      </h3>
+      <router-link to="highscore" class="">
+        <span class="vin-link">Se alle vinnere</span>
       </router-link>
-    </h3>
-    <ol>
-      <li v-for="person in highscore" :key="person">
-        {{ person.name }} - {{ person.wins.length }}
+    </section>
+    <ol class="winner-list-container">
+      <li v-for="(person, index) in highscore" :key="person" class="single-winner">
+        <span class="placement">{{index + 1}}</span>
+        <span class="winner-icon"> ic </span>
+        <p class="winner-name">{{ person.name }}</p>
       </li>
     </ol>
   </div>
@@ -29,60 +35,69 @@ export default {
     response = response.filter(
       person => person.name != null && person.name != ""
     );
-    this.highscore = response.slice(0, 10);
+    this.highscore = response.slice(0, 5);
   }
 };
 </script>
 
 <style lang="scss" scoped>
 @import "../styles/media-queries.scss";
-div {
-  margin: 0;
-  font-family: Arial;
-  display: inline-flex;
-  flex-direction: column;
+@import "../styles/variables.scss";
+.heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-h3 {
-  text-align: left;
+a {
+  text-decoration: none;
+  color: #333333;
 
-  & a {
+  &:focus,
+  &:active,
+  &:visited {
     text-decoration: none;
     color: #333333;
-
-    &:focus,
-    &:active,
-    &:visited {
-      text-decoration: none;
-      color: #333333;
-    }
   }
 }
 
 ol {
-  padding-left: 1.375rem !important;
+  list-style-type: none;
   margin-left: 0;
-  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) ".";
+}
+
+.winner-list-container {
+  width: 100%;
+  display: grid;
+  grid-template: 1fr / repeat(5, 1fr);
+  column-gap: 2em;
+  margin: 0;
+
+  .single-winner {
+    width: 10em;
+    background: $primary;
+    padding: 1em;
+    display: grid;
+    grid-template: 1fr .3fr / 1fr 1fr 1fr;
+    justify-content: center;
+    align-items: center;
+    justify-items: center;
+
+    .placement {
+      grid-row: 1;
+      grid-column: 1 / 3;
+      font-size: 3em;
     }
 
-    @include mobile {
-      padding: 5px 0;
+    .winner-name {
+      grid-row: 2;
+      grid-column: 1 / -1;
+    }
+
+    .winner-icon {
+      grid-row: 1;
+      grid-column: 3;
     }
   }
 }

src/ui/TotalBought.vue

@@ -1,6 +1,15 @@
 <template>
-  <div class="outer-bought">
+  <section class="outer-bought">
     <h3>Loddstatistikk</h3>
+
+    <div class="inner-bought-container total-ballots">
+        Totalt&nbsp;
+        <span class="total">{{ total }}</span>
+        &nbsp;kjøpte og&nbsp;
+        <span>{{ totalWin }}&nbsp;vinn</span>
+    </div>
+
+
     <div class="bought-container">
       <div
         v-for="color in colors"
@@ -8,34 +17,23 @@
           color.name +
             '-container ' +
             color.name +
-            '-ballot inner-bought-container ballot-element'
+            '-ballot ballot-element-local'
         "
         :key="color.name"
       >
-        <div class="number-container">
-          <span class="color-total bought-number-span">
+        <p class="number-container">
+          {{translate(color.name)}} vinnersjanse
+          <!-- <span class="color-total bought-number-span">
             {{ color.total }}
-          </span>
-          <span>kjøpte</span>
-        </div>
+          </span> -->
+        </p>
+        <h3>{{ color.totalPercentage }}% vinn</h3>
         <div class="inner-text-container">
           <div>{{ color.win }} vinn</div>
-          <div>{{ color.totalPercentage }}% vinn</div>
-        </div>
-      </div>
-
-      <div class="inner-bought-container total-ballots">
-        <div class="total-container">
-          Totalt&nbsp;
-          <div>
-            <span class="total">{{ total }}</span> kjøpte
-          </div>
-          <div>{{ totalWin }} vinn</div>
-          <div>{{ stolen }} stjålet</div>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 <script>
 import { colorStatistics } from "@/api";
@@ -114,6 +112,23 @@ export default {
     this.colors = this.colors.sort((a, b) => (a.win > b.win ? -1 : 1));
   },
   methods: {
+    translate(color){
+      switch(color) {
+        case "blue":
+          return "Blå"
+          break;
+        case "red":
+          return "Rød"
+          break;
+        case "green":
+          return "Grønn"
+          break;
+        case "yellow":
+          return "Gul"
+          break;
+        break;
+      }
+    },
     getPercentage: function(win, total) {
       return this.round(win == 0 ? 0 : (win / total) * 100);
     },
@@ -125,108 +140,138 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/global.scss";
+// @import "../styles/global.scss";
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
 
-.inner-bought-container {
+.total-ballots {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }
 
-.ballot-element {
-  width: 140px;
-  height: 150px;
-  margin: 20px 0;
-}
+.bought-container {
+  margin-top: 2em;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  column-gap: 2em;
 
-.number-container {
-  display: flex;
-  align-items: flex-end;
+  .ballot-element-local {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    padding: .5em;
 
-  & span:last-child {
-    padding-bottom: 5px;
-    padding-left: 5px;
+    &.green-ballot {
+      background-color: $light-green;
+    }
+
+    &.blue-ballot {
+      background-color: $light-blue;
+    }
+
+    &.yellow-ballot {
+      background-color: $light-yellow;
+    }
+
+    &.red-ballot {
+      background-color: $light-red;
+    }
   }
 }
 
+.inner-bought-container {
+}
+
+.ballot-element {
+  // width: 140px;
+  // height: 150px;
+  // margin: 20px 0;
+}
+
+.number-container {
+  // display: flex;
+  // align-items: flex-end;
+
+  // & span:last-child {
+  //   padding-bottom: 5px;
+  //   padding-left: 5px;
+  // }
+}
+
 .inner-text-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  // display: flex;
+  // flex-direction: column;
+  // justify-content: center;
+  // align-items: center;
 
   // TODO fix styling for displaying in columns
   @include mobile {
-    & div {
-      padding: 0 5px;
-    }
+    // & div {
+    //   padding: 0 5px;
+    // }
   }
 }
 
 .total-ballots {
-  width: 150px;
-  height: 150px;
-  margin: 20px 0;
+  // width: 150px;
+  // height: 150px;
+  // margin: 20px 0;
 }
 
 .total-container {
-  align-items: flex-start;
+  // align-items: flex-start;
 }
 
 @include mobile {
-  .total-container {
-    > div:nth-of-type(2) {
-      margin-top: auto;
-      padding-bottom: 4px;
-      padding-left: 5px;
-    }
-  }
+  // .total-container {
+  //   > div:nth-of-type(2) {
+  //     margin-top: auto;
+  //     padding-bottom: 4px;
+  //     padding-left: 5px;
+  //   }
+  // }
 }
 
 .bought-number-span {
-  display: inline-flex;
+  // display: inline-flex;
 }
 
-.outer-bought {
-  @include mobile {
-    padding: 0 20px;
-  }
-}
+// .outer-bought {
+//   @include mobile {
+//     padding: 0 20px;
+//   }
+// }
 
 .bought-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 100%;
-  padding-bottom: 3rem;
-  max-width: 1400px;
-  margin: auto;
-  justify-content: space-between;
-  font-family: Arial;
+  // display: flex;
+  // flex-direction: row;
+  // flex-wrap: wrap;
+  // width: 100%;
+  // padding-bottom: 3rem;
+  // max-width: 1400px;
+  // margin: auto;
+  // justify-content: space-between;
+  // font-family: Arial;
 
   @include mobile {
-    padding-bottom: 0px;
+    // padding-bottom: 0px;
   }
 }
 
 .color-total,
 .total {
-  font-size: 2rem;
-  font-weight: bold;
+  // font-size: 2rem;
+  // font-weight: bold;
 }
 
 .small {
-  font-weight: bold;
-  font-size: 1.25rem;
-  display: inline-block;
+  // font-weight: bold;
+  // font-size: 1.25rem;
+  // display: inline-block;
 }
 
 @include mobile {
   .bought-container {
-    flex-wrap: wrap;
+    // flex-wrap: wrap;
   }
 }
 </style>