bought ballots css fixes to resemble design

src/ui/Highscore.vue

@@ -73,9 +73,8 @@ ol {
   gap: 5%;
 
   .single-winner {
-    width: 12.5em;
+    width: 100%;
     background: $primary;
-    padding: 1em 0 0 1em;
     display: grid;
     grid-template: 1fr .3fr / 1fr 1fr 1fr;
     align-items: center;
@@ -88,11 +87,15 @@ ol {
       grid-row: 1;
       grid-column: 1 / 3;
       font-size: 3em;
+      margin-left: 5px;
+      padding: .2em 0 0 5px;
     }
 
     .winner-name {
       grid-row: 2;
       grid-column: 1 / -1;
+      margin-left: 5px;
+      padding-left: 5px;
     }
 
     .winner-icon {

src/ui/TotalBought.vue

@@ -21,16 +21,12 @@
         "
         :key="color.name"
       >
-        <p class="number-container">
+        <p class="winner-chance">
           {{translate(color.name)}} vinnersjanse
-          <!-- <span class="color-total bought-number-span">
-            {{ color.total }}
-          </span> -->
         </p>
-        <h3>{{ color.totalPercentage }}% vinn</h3>
-        <div class="inner-text-container">
-          <div>{{ color.win }} vinn</div>
-        </div>
+        <span class="win-percentage">{{ color.totalPercentage }}% </span>
+        <p class="total-bought-color">{{ color.total }} kjøpte</p>
+        <p class="amount-of-wins"> {{ color.win }} vinn </p>
       </div>
     </div>
   </section>
@@ -53,16 +49,18 @@ export default {
       redPercentage: 0,
       yellowPercentage: 0,
       greenPercentage: 0,
-      bluePercentage: 0
+      bluePercentage: 0,
     };
   },
   async mounted() {
     let response = await colorStatistics();
+
     this.red = response.red;
     this.blue = response.blue;
     this.green = response.green;
     this.yellow = response.yellow;
     this.total = response.total;
+
     this.totalWin =
       this.red.win + this.yellow.win + this.blue.win + this.green.win;
     this.stolen = response.stolen;
@@ -133,14 +131,17 @@ export default {
       return this.round(win == 0 ? 0 : (win / total) * 100);
     },
     round: function(number) {
-      return Math.round(number * 100) / 100;
+
+      //this can make the odds added together more than 100%, maybe rework?
+      let actualPercentage = Math.round(number * 100) / 100;
+      let rounded = actualPercentage.toFixed(0);
+      return rounded;
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-// @import "../styles/global.scss";
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
 
@@ -151,14 +152,38 @@ export default {
 .bought-container {
   margin-top: 2em;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  column-gap: 2em;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-gap: 50px;
 
   .ballot-element-local {
-    margin: 0;
+    height: 250px;
     width: 100%;
-    height: 100%;
-    padding: .5em;
+
+    .win-percentage {
+      margin-left: 30px;
+      font-size: 50px;
+    }
+    
+
+    p {
+      margin-left: 30px;
+      &.winner-chance {
+        margin-top: 40px;
+      }
+
+      &.total-bought-color{
+        font-weight: bold;
+        margin-top: 25px;
+      }
+
+      &.amount-of-wins {
+        font-weight: bold;
+      }
+    }
+
+    h3 {
+      margin-left: 15px;
+    }
 
     &.green-ballot {
       background-color: $light-green;
@@ -177,101 +202,4 @@ export default {
     }
   }
 }
-
-.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;
-
-  // TODO fix styling for displaying in columns
-  @include mobile {
-    // & div {
-    //   padding: 0 5px;
-    // }
-  }
-}
-
-.total-ballots {
-  // width: 150px;
-  // height: 150px;
-  // margin: 20px 0;
-}
-
-.total-container {
-  // align-items: flex-start;
-}
-
-@include mobile {
-  // .total-container {
-  //   > div:nth-of-type(2) {
-  //     margin-top: auto;
-  //     padding-bottom: 4px;
-  //     padding-left: 5px;
-  //   }
-  // }
-}
-
-.bought-number-span {
-  // display: inline-flex;
-}
-
-// .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;
-
-  @include mobile {
-    // padding-bottom: 0px;
-  }
-}
-
-.color-total,
-.total {
-  // font-size: 2rem;
-  // font-weight: bold;
-}
-
-.small {
-  // font-weight: bold;
-  // font-size: 1.25rem;
-  // display: inline-block;
-}
-
-@include mobile {
-  .bought-container {
-    // flex-wrap: wrap;
-  }
-}
 </style>