Updates from designer

src/components/GeneratePage.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="container">
     <h1 class="title" @click="startCountdown">Loddgenerator</h1>
-    <p class="subtext">
-      Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
-    </p>
+    <p class="subtext">Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
     <div class="input-line">
       <label for="redCheckbox">
         <input type="checkbox" id="redCheckbox" v-model="redCheckbox" />
@@ -53,6 +51,13 @@
       ></div>
     </div>
 
+    <div class="color-count-container" v-if="generated && !generating">
+      <span>Rød: {{red}}</span>
+      <span>Blå: {{blue}}</span>
+      <span>Gul: {{yellow}}</span>
+      <span>Grønn: {{green}}</span>
+    </div>
+
     <Vipps class="vipps" :amount="numberOfBallots" />
     <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
   </div>
@@ -83,7 +88,9 @@ export default {
       greenCheckbox: true,
       yellowCheckbox: true,
       blueCheckbox: true,
-      hardStart: false
+      hardStart: false,
+      generated: false,
+      generating: false
     };
   },
   watch: {
@@ -105,7 +112,10 @@ export default {
       this.hardStart = true;
     },
     generateColors: function(event, time) {
+      this.generating = true;
       if (time == 5) {
+        this.generating = false;
+        this.generated = true;
         if (this.numberOfBallots > 1 && new Set(this.colors).size == 1) {
           alert("BINGO");
         }
@@ -212,6 +222,16 @@ p {
   margin: 0;
 }
 
+.color-count-container {
+  margin: auto;
+  width: 20vw;
+  justify-content: space-around;
+  align-items: center;
+  display: flex;
+  font-family: Arial;
+  margin-top: 35px;
+}
+
 .input-line {
   margin: auto;
   display: flex;
@@ -243,7 +263,7 @@ p {
 }
 
 .vipps {
-  margin: 8rem auto 2.5rem auto;
+  margin: 5rem auto 2.5rem auto;
 
   @include mobile {
     margin-top: 2rem;

src/components/VinlottisPage.vue

@@ -15,12 +15,12 @@
           <TotalBought />
           <hr class="bought-and-highscore-separator" />
           <div class="highscore-and-wines">
-            <Highscore />
+            <Highscore class="highscore-container" />
             <Wines class="wines-container" />
           </div>
         </div>
         <div class="vipps-outer-container">
-          <Vipps class="vipps-container" />
+          <Vipps class="vipps-inner-container" />
         </div>
       </div>
     </div>
@@ -86,7 +86,11 @@ export default {
   margin: auto;
   justify-content: space-evenly;
   align-items: center;
-  padding: 0 25px;
+  padding: 0 30px;
+
+  @include mobile {
+    padding: 0 20px;
+  }
 }
 
 .title {
@@ -113,10 +117,27 @@ export default {
   display: flex;
   flex-direction: row;
   padding-top: 1.5rem;
-}
+  justify-content: space-between;
 
-.wines-container {
-  margin-left: 30px;
+  @include mobile {
+    padding: 0 20px;
+  }
+
+  .highscore-container {
+    width: 35%;
+
+    @include mobile {
+      width: 100%;
+    }
+  }
+
+  .wines-container {
+    width: 65%;
+
+    @include mobile {
+      width: 100%;
+    }
+  }
 }
 
 .vipps-outer-container {
@@ -177,10 +198,14 @@ h1 {
   display: inline-block;
 }
 
-.vipps-container {
+.vipps-inner-container {
   margin-top: 15px;
   margin-bottom: 15px;
   margin-left: 30px;
+
+  @include mobile {
+    margin: auto;
+  }
 }
 
 .chart-container {
@@ -188,7 +213,7 @@ h1 {
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: 100vw;
+  width: 99vw;
   max-width: 1400px;
   margin: auto;
   padding: 50px 0;