Merge branch 'master' of github.com:KevinMidboe/vinlottis

src/components/VinlottisPage.vue

@@ -77,6 +77,11 @@ export default {
 
 .left-bottom {
   width: 75%;
+
+  @include mobile {
+    padding: 0 1.25rem;
+    width: 100%;
+  }
 }
 
 .bought-and-highscore-separator {
@@ -192,7 +197,7 @@ h1 {
     justify-content: center;
     align-items: center;
 
-    padding-top: 0;
+    padding: 0;
     margin-top: 30px;
   }
 

src/ui/PurchaseGraph.vue

@@ -24,24 +24,28 @@ export default {
       label: "Blå",
       borderColor: "#57d2fb",
       backgroundColor: "#d4f2fe",
+      borderWidth: 2,
       data: []
     };
     let yellow = {
       label: "Gul",
       borderColor: "#ffde5d",
       backgroundColor: "#fff6d6",
+      borderWidth: 2,
       data: []
     };
     let red = {
       label: "Rød",
       borderColor: "#ef5878",
       backgroundColor: "#fbd7de",
+      borderWidth: 2,
       data: []
     };
     let green = {
       label: "Grønn",
       borderColor: "#10e783",
       backgroundColor: "#c8f9df",
+      borderWidth: 2,
       data: []
     };
 

src/ui/TotalBought.vue

@@ -106,6 +106,12 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
+
+  @include mobile {
+    flex-direction: row;
+    justify-content: unset;
+    align-items: center;
+  }
 }
 
 .number-container {
@@ -120,6 +126,22 @@ export default {
 
 .inner-text-container {
   padding-left: 5px;
+
+  // TODO fix styling for displaying in columns
+  @include mobile {
+    margin-top: auto;
+    padding-bottom: 5px;
+  }
+}
+
+@include mobile {
+  .total-container {
+    > div:nth-of-type(2) {
+      margin-top: auto;
+      padding-bottom: 4px;
+      padding-left: 5px;
+    }
+  }
 }
 
 .bought-number-span {

src/ui/WinGraph.vue

@@ -23,24 +23,28 @@ export default {
       label: "Blå",
       borderColor: "#57d2fb",
       backgroundColor: "#d4f2fe",
+      borderWidth: 2,
       data: []
     };
     let yellow = {
       label: "Gul",
       borderColor: "#ffde5d",
       backgroundColor: "#fff6d6",
+      borderWidth: 2,
       data: []
     };
     let red = {
       label: "Rød",
       borderColor: "#ef5878",
       backgroundColor: "#fbd7de",
+      borderWidth: 2,
       data: []
     };
     let green = {
       label: "Grønn",
       borderColor: "#10e783",
       backgroundColor: "#c8f9df",
+      borderWidth: 2,
       data: []
     };