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>
<title>Vinlottis</title>
<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>
<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>

31
src/components/VinlottisPage.vue
View File

@@ -8,7 +8,10 @@
<WinGraph class="win" />
</div>
<TotalBought />
<div class="wine-and-highscore-container">
<Highscore />
<Wines />
</div>
</div>
</div>
</template>
@@ -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
}
};
</script>
@@ -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;
}
}
</style>

9
src/ui/Highscore.vue
View File

@@ -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 {
<style lang="scss" scoped>
div {
font-family: sans-serif;
width: 70vw;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
display: inline-flex;
flex-direction: column;
}
</style>