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

More design-updates

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2020-01-22 17:16:02 +01:00
parent b64e17bbab
commit c177f1cda8
7 changed files with 149 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/VinlottisPage.vue
View File

@@ -10,13 +10,20 @@
<PurchaseGraph class="purchase" />
<WinGraph class="win" />
</div>
<TotalBought />
<!-- <img src="/public/assets/images/vipps.png" class="vipps-image" /> -->
<div class="wine-and-highscore-container">
<Vipps class="vipps-container" />
<Highscore />
<Wines />
<!-- <img src="/public/assets/images/vipps.png" class="vipps-image" /> -->
<div class="bottom-container">
<div class="left-bottom">
<TotalBought />
<hr class="bought-and-highscore-separator" />
<div class="highscore-and-wines">
<Highscore />
<Wines class="wines-container" />
</div>
</div>
<div class="vipps-outer-container">
<Vipps class="vipps-container" />
</div>
</div>
</div>
</div>
@@ -52,6 +59,41 @@ body {
}
</style>
<style lang="scss" scoped>
.bottom-container {
display: flex;
flex-direction: row;
max-width: 1350px;
margin: auto;
justify-content: space-evenly;
align-items: center;
}
.left-bottom {
width: 75%;
}
.bought-and-highscore-separator {
border: none;
border-bottom: 1px solid rgb(237, 237, 237);
}
.highscore-and-wines {
display: flex;
flex-direction: row;
padding-top: 1.5rem;
}
.wines-container {
margin-left: 30px;
}
.vipps-outer-container {
border-left: 1px solid rgb(237, 237, 237);
margin-left: 20px;
display: flex;
align-items: center;
}
@font-face {
font-family: "knowit";
font-weight: 600;
@@ -104,7 +146,9 @@ h1 {
}
.vipps-container {
margin-top: 25px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 30px;
}
.chart-container {
@@ -120,12 +164,10 @@ h1 {
.wine-and-highscore-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: baseline;
flex-direction: column;
align-items: flex-start;
padding-bottom: 25px;
max-width: 1400px;
margin: auto;
border-right: 1px solid #333;
}
@media only screen and (max-width: 768px) {
@@ -149,8 +191,17 @@ h1 {
justify-content: flex-start;
}
.wine-and-highscore-container {
.bottom-container,
.highscore-and-wines {
flex-direction: column;
}
.vipps-container {
margin-left: 0px;
}
.wines-container {
margin-left: 0px;
}
}
</style>

6
src/ui/Banner.vue
View File

@@ -13,8 +13,8 @@
margin-top: 0px;
padding: 33px 0;
background-color: #dbeede;
-webkit-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.65);
-moz-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.65);
box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.65);
-webkit-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
}
</style>

11
src/ui/Highscore.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-if="highscore.length > 0">
<div class="highscores" v-if="highscore.length > 0">
<h3>Highscore</h3>
<ol>
<li v-for="person in highscore">
@@ -29,10 +29,17 @@ export default {
</script>
<style lang="scss" scoped>
.highscores {
padding-right: 50px;
}
div {
margin: 15px 0 0 0;
font-family: "knowit";
font-family: Arial;
display: inline-flex;
flex-direction: column;
}
ol {
padding-left: 1rem;
margin-left: 0;
}
</style>

6
src/ui/PurchaseGraph.vue
View File

@@ -118,4 +118,10 @@ export default {
margin-right: 5px;
border-radius: 25px;
}
@media only screen and (max-width: 768px) {
canvas {
height: 50vh;
}
}
</style>

91
src/ui/TotalBought.vue
View File

@@ -1,52 +1,51 @@
<template>
<div class="bought-container">
<div class="red-container inner-bought-container">
<div class="number-container">
<span class="red bought-number-span">{{ red.total }}</span>
<div class="inner-text-container">
<div class="outer-bought">
<h3>Loddstatistikk</h3>
<div class="bought-container">
<div class="red-container inner-bought-container">
<div class="number-container">
<span class="red bought-number-span">{{ red.total }}</span>
<span> kjøpte</span>
<div>{{ red.win }} vinn</div>
<div>{{ redPercentage }}% vinn</div>
</div>
<div class="inner-text-container">
<div>{{ red.win }} vinn - {{ redPercentage }}% vinn</div>
</div>
</div>
</div>
<div class="blue-container inner-bought-container">
<div class="number-container">
<span class="blue bought-number-span">{{ blue.total }}</span>
<div class="inner-text-container">
<div class="blue-container inner-bought-container">
<div class="number-container">
<span class="blue bought-number-span">{{ blue.total }}</span>
<span> kjøpte</span>
<div>{{ blue.win }} vinn</div>
<div>{{ bluePercentage }}% vinn</div>
</div>
<div class="inner-text-container">
<div>{{ blue.win }} vinn - {{ bluePercentage }}% vinn</div>
</div>
</div>
</div>
<div class="yellow-container inner-bought-container">
<div class="number-container">
<span class="yellow bought-number-span">{{ yellow.total }}</span>
<div class="inner-text-container">
<div class="yellow-container inner-bought-container">
<div class="number-container">
<span class="yellow bought-number-span">{{ yellow.total }}</span>
<span> kjøpte</span>
<div>{{ yellow.win }} vinn</div>
<div>{{ yellowPercentage }}% vinn</div>
</div>
<div class="inner-text-container">
<div>{{ yellow.win }} vinn - {{ yellowPercentage }}% vinn</div>
</div>
</div>
</div>
<div class="green-container inner-bought-container">
<div class="number-container">
<span class="green bought-number-span">{{ green.total }}</span>
<div class="inner-text-container">
<div class="green-container inner-bought-container">
<div class="number-container">
<span class="green bought-number-span">{{ green.total }}</span>
<span> kjøpte</span>
<div>{{ green.win }} vinn</div>
<div>{{ greenPercentage }}% vinn</div>
</div>
<div class="inner-text-container">
<div>{{ green.win }} vinn - {{ greenPercentage }}% vinn</div>
</div>
</div>
</div>
<!--<div class="total-container inner-bought-container">
<div>
totalt&nbsp;
<span class="total">{{ total }}</span> kjøpt
<div class="total-container inner-bought-container">
<div>
Totalt&nbsp;
<span class="total">{{ total }}</span> kjøpt
</div>
<div>{{ totalWin }} vinn</div>
</div>
<div>{{ totalWin }} vinn</div>
</div>-->
</div>
</div>
</template>
<script>
@@ -103,15 +102,20 @@ export default {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-items: flex-start;
}
.number-container {
display: flex;
align-items: flex-end;
& span:last-child {
padding-bottom: 5px;
padding-left: 5px;
}
}
.inner-text-container {
margin-top: 0.8rem;
padding-left: 5px;
}
@@ -122,11 +126,12 @@ export default {
.bought-container {
display: flex;
flex-direction: row;
width: 100vw;
width: 100%;
padding-bottom: 3rem;
max-width: 1400px;
margin: auto;
justify-content: space-around;
font-family: "knowit";
justify-content: space-between;
font-family: Arial;
}
.green,
@@ -153,4 +158,10 @@ export default {
.blue {
color: #57d2fb;
}
@media only screen and (max-width: 768px) {
.bought-container {
flex-wrap: wrap;
flex-direction: column;
}
}
</style>

8
src/ui/WinGraph.vue
View File

@@ -90,3 +90,11 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@media only screen and (max-width: 768px) {
canvas {
height: 50vh;
}
}
</style>

9
src/ui/Wines.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="wines.length > 0">
<h3>Viner</h3>
<h3>Topp viner</h3>
<ol>
<li v-for="wine in wines">
<span v-if="wine.vivinoLink == '' || wine.vivinoLink == null"
@@ -38,7 +38,7 @@ export default {
<style lang="scss" scoped>
h3 {
text-align: center;
text-align: left;
}
div {
margin: 15px 0 0 0;
@@ -51,4 +51,9 @@ a {
text-decoration: none;
color: orange;
}
ol {
padding-left: 1rem;
margin-left: 0;
}
</style>