Updates from designer
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1 class="title" @click="startCountdown">Loddgenerator</h1>
|
||||
<p class="subtext">
|
||||
Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
|
||||
</p>
|
||||
<p class="subtext">Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
|
||||
<div class="input-line">
|
||||
<label for="redCheckbox">
|
||||
<input type="checkbox" id="redCheckbox" v-model="redCheckbox" />
|
||||
@@ -53,6 +51,13 @@
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="color-count-container" v-if="generated && !generating">
|
||||
<span>Rød: {{red}}</span>
|
||||
<span>Blå: {{blue}}</span>
|
||||
<span>Gul: {{yellow}}</span>
|
||||
<span>Grønn: {{green}}</span>
|
||||
</div>
|
||||
|
||||
<Vipps class="vipps" :amount="numberOfBallots" />
|
||||
<Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
|
||||
</div>
|
||||
@@ -83,7 +88,9 @@ export default {
|
||||
greenCheckbox: true,
|
||||
yellowCheckbox: true,
|
||||
blueCheckbox: true,
|
||||
hardStart: false
|
||||
hardStart: false,
|
||||
generated: false,
|
||||
generating: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -105,7 +112,10 @@ export default {
|
||||
this.hardStart = true;
|
||||
},
|
||||
generateColors: function(event, time) {
|
||||
this.generating = true;
|
||||
if (time == 5) {
|
||||
this.generating = false;
|
||||
this.generated = true;
|
||||
if (this.numberOfBallots > 1 && new Set(this.colors).size == 1) {
|
||||
alert("BINGO");
|
||||
}
|
||||
@@ -212,6 +222,16 @@ p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.color-count-container {
|
||||
margin: auto;
|
||||
width: 20vw;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-family: Arial;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.input-line {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
@@ -243,7 +263,7 @@ p {
|
||||
}
|
||||
|
||||
.vipps {
|
||||
margin: 8rem auto 2.5rem auto;
|
||||
margin: 5rem auto 2.5rem auto;
|
||||
|
||||
@include mobile {
|
||||
margin-top: 2rem;
|
||||
|
||||
@@ -15,12 +15,12 @@
|
||||
<TotalBought />
|
||||
<hr class="bought-and-highscore-separator" />
|
||||
<div class="highscore-and-wines">
|
||||
<Highscore />
|
||||
<Highscore class="highscore-container" />
|
||||
<Wines class="wines-container" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="vipps-outer-container">
|
||||
<Vipps class="vipps-container" />
|
||||
<Vipps class="vipps-inner-container" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,7 +86,11 @@ export default {
|
||||
margin: auto;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
padding: 0 30px;
|
||||
|
||||
@include mobile {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -113,10 +117,27 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
justify-content: space-between;
|
||||
|
||||
.wines-container {
|
||||
margin-left: 30px;
|
||||
@include mobile {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.highscore-container {
|
||||
width: 35%;
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.wines-container {
|
||||
width: 65%;
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vipps-outer-container {
|
||||
@@ -177,10 +198,14 @@ h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vipps-container {
|
||||
.vipps-inner-container {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 30px;
|
||||
|
||||
@include mobile {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
@@ -188,7 +213,7 @@ h1 {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
width: 99vw;
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
padding: 50px 0;
|
||||
|
||||
@@ -27,22 +27,39 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.highscores {
|
||||
padding-right: 50px;
|
||||
}
|
||||
@import "../styles/media-queries.scss";
|
||||
div {
|
||||
margin: 15px 0 0 0;
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 1.375rem !important;
|
||||
margin-left: 0;
|
||||
|
||||
li {
|
||||
margin: 0 0 1.5em;
|
||||
padding: 0;
|
||||
counter-reset: item;
|
||||
& > li {
|
||||
padding: 2.5px 0;
|
||||
width: max-content;
|
||||
margin: 0 0 0 -1.25rem;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
counter-increment: item;
|
||||
&:before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
padding-right: 0.5rem;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
content: counter(item) ".";
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -134,13 +134,13 @@ export default {
|
||||
|
||||
.chart {
|
||||
height: 40vh;
|
||||
max-height: 364px;
|
||||
max-height: 500px;
|
||||
|
||||
@include mobile {
|
||||
position: relative;
|
||||
width: 90vw !important;
|
||||
max-height: unset;
|
||||
height: 50vh;
|
||||
height: 30vh;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
<div class="bought-container">
|
||||
<div
|
||||
v-for="color in colors"
|
||||
:class="color.name + '-container inner-bought-container'"
|
||||
:class="color.name + '-container ' + color.name + '-ballot inner-bought-container ballot-element'"
|
||||
:key="color.name"
|
||||
>
|
||||
<div class="number-container">
|
||||
<span :class="color.name + ' bought-number-span'">
|
||||
<span class="color-total bought-number-span">
|
||||
{{
|
||||
color.total
|
||||
}}
|
||||
@@ -16,22 +16,19 @@
|
||||
<span>kjøpte</span>
|
||||
</div>
|
||||
<div class="inner-text-container">
|
||||
<div>
|
||||
{{ color.win }} vinn -
|
||||
<span class="small">{{ color.totalPercentage }}</span>%
|
||||
</div>
|
||||
<div>
|
||||
<span :class="color.name + ' small'">{{ color.percentage }}</span>% vinn
|
||||
</div>
|
||||
<div>{{ color.win }} vinn</div>
|
||||
<div>{{ color.totalPercentage }}% vinn</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="total-container inner-bought-container">
|
||||
<div>
|
||||
<div class="inner-bought-container total-ballots">
|
||||
<div class="total-container">
|
||||
Totalt
|
||||
<span class="total">{{ total }}</span> kjøpt
|
||||
<div>
|
||||
<span class="total">{{ total }}</span> kjøpte
|
||||
</div>
|
||||
<div>{{ totalWin }} vinn</div>
|
||||
</div>
|
||||
<div>{{ totalWin }} vinn</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,12 +125,34 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
flex-direction: row;
|
||||
justify-content: unset;
|
||||
align-items: center;
|
||||
.ballot-element {
|
||||
width: 140px;
|
||||
height: 150px;
|
||||
margin: 20px 0;
|
||||
-webkit-mask-image: url(/../../public/assets/images/lodd.svg);
|
||||
background-repeat: no-repeat;
|
||||
mask-image: url(/../../public/assets/images/lodd.svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
color: #333333;
|
||||
|
||||
&.green-ballot {
|
||||
background-color: $light-green;
|
||||
}
|
||||
|
||||
&.blue-ballot {
|
||||
background-color: $light-blue;
|
||||
}
|
||||
|
||||
&.yellow-ballot {
|
||||
background-color: $light-yellow;
|
||||
}
|
||||
|
||||
&.red-ballot {
|
||||
background-color: $light-red;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -148,20 +167,29 @@ export default {
|
||||
}
|
||||
|
||||
.inner-text-container {
|
||||
padding-left: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
// TODO fix styling for displaying in columns
|
||||
@include mobile {
|
||||
margin-top: auto;
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
|
||||
& div {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-ballots {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.total-container {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.total-container {
|
||||
> div:nth-of-type(2) {
|
||||
@@ -179,6 +207,7 @@ export default {
|
||||
.bought-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
padding-bottom: 3rem;
|
||||
max-width: 1400px;
|
||||
@@ -191,10 +220,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.green,
|
||||
.blue,
|
||||
.yellow,
|
||||
.red,
|
||||
.color-total,
|
||||
.total {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
@@ -206,26 +232,9 @@ export default {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.bought-container {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,15 +1,26 @@
|
||||
<template>
|
||||
<div class="vipps-container" @click="openVipps">
|
||||
<img src="/public/assets/images/vipps-logo.svg" class="vipps-logo" alt="vipps logo" />
|
||||
<span>
|
||||
kr.
|
||||
<span class="big-money">{{ amount * 10 }},- (10,- pr. lodd)</span>
|
||||
</span>
|
||||
<ing src="/public/assets/images/vipps-qr.png" class="qr-logo" v-if="qrFailed" />
|
||||
<canvas v-if="!qrFailed" ref="canvas" class="qr-logo"></canvas>
|
||||
<span class="phone-number">977 40 427</span>
|
||||
<span class="name">Kasper Rynning-Tønnesen</span>
|
||||
<span class="mark-with">Merk med: Vinlodd/🍾</span>
|
||||
<div>
|
||||
<div class="vipps-container" :class="isMobile ? 'clickable': null" @click="openVipps">
|
||||
<img src="/public/assets/images/vipps-logo.svg" class="vipps-logo" alt="vipps logo" />
|
||||
<span v-if="amount * 10 > 10">
|
||||
kr.
|
||||
<span class="big-money">{{ amount * 10 }},-</span>
|
||||
(10,- pr. lodd)
|
||||
</span>
|
||||
<span v-if="amount * 10 == 10">
|
||||
kr.
|
||||
<span class="big-money">{{ amount * 10 }},-</span>
|
||||
pr. lodd
|
||||
</span>
|
||||
<ing src="/public/assets/images/vipps-qr.png" class="qr-logo" v-if="qrFailed" />
|
||||
<canvas v-if="!qrFailed" ref="canvas" class="qr-logo"></canvas>
|
||||
<span class="phone-number">977 40 427</span>
|
||||
<span class="name">Kasper Rynning-Tønnesen</span>
|
||||
<span class="mark-with">Merk med: Vinlodd/🍾</span>
|
||||
</div>
|
||||
<p class="click-to-open-text" v-if="isMobile">
|
||||
<i>Du kan også klikke på QR-koden for å åpne i Vipps</i>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -31,7 +42,6 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
amount: function(price) {
|
||||
console.log("price is updated", price);
|
||||
this.calculateQr();
|
||||
}
|
||||
},
|
||||
@@ -39,6 +49,9 @@ export default {
|
||||
this.calculateQr();
|
||||
},
|
||||
computed: {
|
||||
isMobile: function() {
|
||||
return this.isMobileFunction();
|
||||
},
|
||||
price: function() {
|
||||
return this.amount * 1000;
|
||||
},
|
||||
@@ -85,7 +98,25 @@ export default {
|
||||
context.fillText("🍾", centerX, centerY);
|
||||
},
|
||||
openVipps: function() {
|
||||
if (!this.isMobileFunction()) {
|
||||
return;
|
||||
}
|
||||
window.location.assign(this.vippsUrlBasedOnUserAgent);
|
||||
},
|
||||
isMobileFunction: function() {
|
||||
if (
|
||||
navigator.userAgent.match(/Android/i) ||
|
||||
navigator.userAgent.match(/webOS/i) ||
|
||||
navigator.userAgent.match(/iPhone/i) ||
|
||||
navigator.userAgent.match(/iPad/i) ||
|
||||
navigator.userAgent.match(/iPod/i) ||
|
||||
navigator.userAgent.match(/BlackBerry/i) ||
|
||||
navigator.userAgent.match(/Windows Phone/i)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -96,9 +127,6 @@ export default {
|
||||
@import "../styles/media-queries.scss";
|
||||
.vipps-container {
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
.vipps-container {
|
||||
border-radius: 10px;
|
||||
background-color: #ff5b23;
|
||||
display: flex;
|
||||
@@ -108,6 +136,9 @@ export default {
|
||||
padding: 25px;
|
||||
width: 250px;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -143,6 +174,14 @@ export default {
|
||||
@include mobile {
|
||||
.vipps-container {
|
||||
margin-left: 0px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.click-to-open-text {
|
||||
width: 65%;
|
||||
padding-top: 10px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,16 +7,16 @@
|
||||
{{ wine.name }} - sett {{ wine.occurences }} ganger,
|
||||
{{ wine.rating }} i rating
|
||||
</span>
|
||||
<div class="inline-wine-name">
|
||||
<span class="truncate">{{ wine.name }}</span>
|
||||
</div>
|
||||
- {{ wine.occurences }} gang(er)
|
||||
<a
|
||||
class="wine-link"
|
||||
:href="wine.vivinoLink"
|
||||
v-if="wine.vivinoLink != '' && wine.vivinoLink != null"
|
||||
@click="wineClick(wine)"
|
||||
>
|
||||
<span class="truncate">{{ wine.name }}</span>
|
||||
- {{ wine.rating }} i
|
||||
rating - {{ wine.occurences }} gang(er)
|
||||
</a>
|
||||
>Les mer</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
@@ -54,31 +54,52 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/media-queries.scss";
|
||||
h3 {
|
||||
text-align: left;
|
||||
}
|
||||
div {
|
||||
margin: 15px 0 0 0;
|
||||
margin: 0;
|
||||
font-family: arial;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #ff5b23;
|
||||
padding: 2.5px 0;
|
||||
ol {
|
||||
padding-left: 1.375rem !important;
|
||||
margin-left: 0;
|
||||
margin: 0 0 1.5em;
|
||||
padding: 0;
|
||||
counter-reset: item;
|
||||
& > li {
|
||||
margin: 0 0 0 -1.25rem;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
counter-increment: item;
|
||||
&:before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
content: counter(item) ".";
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
.inline-wine-name {
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wine-link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #ff5fff;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
|
||||
Reference in New Issue
Block a user