KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

wines

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2020-01-21 12:36:39 +01:00
parent c07d18e140
commit e5441d55f1
3 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -3,8 +3,8 @@
<head> <head>
<title>Vinlottis</title> <title>Vinlottis</title>
<meta name=viewport content="width=device-width,initial-scale=1"> <meta name=viewport content="width=device-width,initial-scale=1">
<link href=/dist/css/vinlottis.3d5c3cb.css rel=stylesheet></head> <link href=/dist/css/vinlottis.37fd51a.css rel=stylesheet></head>
<body> <body>
<div id=app></div> <div id=app></div>
<script type=text/javascript src=/dist/js/vinlottis.bundle.3d5c3cb.js></script></body> <script type=text/javascript src=/dist/js/vinlottis.bundle.37fd51a.js></script></body>
</html> </html>

31
src/components/VinlottisPage.vue
View File

@@ -8,7 +8,10 @@
<WinGraph class="win" /> <WinGraph class="win" />
</div> </div>
<TotalBought /> <TotalBought />
<div class="wine-and-highscore-container">
<Highscore /> <Highscore />
<Wines />
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -18,13 +21,15 @@ import PurchaseGraph from "@/ui/PurchaseGraph";
import TotalBought from "@/ui/TotalBought"; import TotalBought from "@/ui/TotalBought";
import Highscore from "@/ui/Highscore"; import Highscore from "@/ui/Highscore";
import WinGraph from "@/ui/WinGraph"; import WinGraph from "@/ui/WinGraph";
import Wines from "@/ui/Wines";
export default { export default {
components: { components: {
PurchaseGraph, PurchaseGraph,
TotalBought, TotalBought,
Highscore, Highscore,
WinGraph WinGraph,
Wines
} }
}; };
</script> </script>
@@ -56,14 +61,26 @@ h1 {
background: orange; background: orange;
} }
.win,
.purchase { .purchase {
width: 50vw; width: 48%;
display: inline-block; display: inline-block;
} }
.win { .chart-container {
width: 45vw; display: flex;
display: inline-block; 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) { @media only screen and (max-width: 768px) {
@@ -82,5 +99,9 @@ h1 {
.outer { .outer {
justify-content: flex-start; justify-content: flex-start;
} }
.wine-and-highscore-container {
flex-direction: column;
}
} }
</style> </style>

9
src/ui/Highscore.vue
View File

@@ -18,6 +18,9 @@ export default {
response.sort((a, b) => { response.sort((a, b) => {
return a.wins.length > b.wins.length ? -1 : 1; return a.wins.length > b.wins.length ? -1 : 1;
}); });
response = response.filter(
person => person.name != null && person.name != ""
);
this.highscore = response; this.highscore = response;
} }
}; };
@@ -26,11 +29,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
div { div {
font-family: sans-serif; font-family: sans-serif;
width: 70vw; display: inline-flex;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; flex-direction: column;
} }
</style> </style>