diff --git a/public/index.html b/public/index.html index 403f39d..069baab 100644 --- a/public/index.html +++ b/public/index.html @@ -3,8 +3,8 @@ Vinlottis - +
- + diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue index 1504fce..5ff8a95 100644 --- a/src/components/VinlottisPage.vue +++ b/src/components/VinlottisPage.vue @@ -8,7 +8,10 @@ - +
+ + +
@@ -18,13 +21,15 @@ import PurchaseGraph from "@/ui/PurchaseGraph"; import TotalBought from "@/ui/TotalBought"; import Highscore from "@/ui/Highscore"; import WinGraph from "@/ui/WinGraph"; +import Wines from "@/ui/Wines"; export default { components: { PurchaseGraph, TotalBought, Highscore, - WinGraph + WinGraph, + Wines } }; @@ -56,14 +61,26 @@ h1 { background: orange; } +.win, .purchase { - width: 50vw; + width: 48%; display: inline-block; } -.win { - width: 45vw; - display: inline-block; +.chart-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100vw; + height: 50vh; +} + +.wine-and-highscore-container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: baseline; } @media only screen and (max-width: 768px) { @@ -82,5 +99,9 @@ h1 { .outer { justify-content: flex-start; } + + .wine-and-highscore-container { + flex-direction: column; + } } diff --git a/src/ui/Highscore.vue b/src/ui/Highscore.vue index d39ffe8..3c9400a 100644 --- a/src/ui/Highscore.vue +++ b/src/ui/Highscore.vue @@ -18,6 +18,9 @@ export default { response.sort((a, b) => { return a.wins.length > b.wins.length ? -1 : 1; }); + response = response.filter( + person => person.name != null && person.name != "" + ); this.highscore = response; } }; @@ -26,11 +29,7 @@ export default {