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

Liting and compact prop for thiner styling.

Browse Source
This commit is contained in:
Kevin
2021-02-18 22:52:51 +01:00
parent 7267c5f5bd
commit d9de155174
1 changed files with 33 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
frontend/ui/RaffleGenerator.vue
View File

@@ -2,28 +2,28 @@
<div class="container"> <div class="container">
<div class="input-line"> <div class="input-line">
<label for="redCheckbox"> <label for="redCheckbox">
<input type="checkbox" id="redCheckbox" v-model="redCheckbox" @click="generateColors"/> <input type="checkbox" id="redCheckbox" v-model="redCheckbox" @click="generateColors" />
<span class="border"> <span class="border">
<span class="checkmark"></span> <span class="checkmark"></span>
</span> </span>
<span class="text">Rød</span> <span class="text">Rød</span>
</label> </label>
<label for="blueCheckbox"> <label for="blueCheckbox">
<input type="checkbox" id="blueCheckbox" v-model="blueCheckbox" @click="generateColors"/> <input type="checkbox" id="blueCheckbox" v-model="blueCheckbox" @click="generateColors" />
<span class="border"> <span class="border">
<span class="checkmark"></span> <span class="checkmark"></span>
</span> </span>
<span class="text">Blå</span> <span class="text">Blå</span>
</label> </label>
<label for="yellowCheckbox"> <label for="yellowCheckbox">
<input type="checkbox" id="yellowCheckbox" v-model="yellowCheckbox" @click="generateColors"/> <input type="checkbox" id="yellowCheckbox" v-model="yellowCheckbox" @click="generateColors" />
<span class="border"> <span class="border">
<span class="checkmark"></span> <span class="checkmark"></span>
</span> </span>
<span class="text">Gul</span> <span class="text">Gul</span>
</label> </label>
<label for="greenCheckbox"> <label for="greenCheckbox">
<input type="checkbox" id="greenCheckbox" v-model="greenCheckbox" @click="generateColors"/> <input type="checkbox" id="greenCheckbox" v-model="greenCheckbox" @click="generateColors" />
<span class="border"> <span class="border">
<span class="checkmark"></span> <span class="checkmark"></span>
</span> </span>
@@ -31,15 +31,10 @@
</label> </label>
</div> </div>
<div class="input-line"> <div class="input-line">
<input <input type="number" placeholder="Antall lodd" @keyup.enter="generateColors" v-model="numberOfRaffles" />
type="number"
placeholder="Antall lodd"
@keyup.enter="generateColors"
v-model="numberOfRaffles"
/>
<button class="vin-button" @click="generateColors">Generer</button> <button class="vin-button" @click="generateColors">Generer</button>
</div> </div>
<div class="colors"> <div class="colors" :class="{ compact }">
<div <div
v-for="color in colors" v-for="color in colors"
:class="getColorClass(color)" :class="getColorClass(color)"
@@ -47,13 +42,6 @@
:style="{ transform: 'rotate(' + getRotation() + 'deg)' }" :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
></div> ></div>
</div> </div>
<div class="color-count-container" v-if="generated">
<span>Rød: {{ red }}</span>
<span>Blå: {{ blue }}</span>
<span>Gul: {{ yellow }}</span>
<span>Grønn: {{ green }}</span>
</div>
</div> </div>
</template> </template>
@@ -64,11 +52,15 @@ export default {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false
},
compact: {
type: Boolean,
default: false
} }
}, },
data() { data() {
return { return {
numberOfRaffles: 4, numberOfRaffles: 6,
colors: [], colors: [],
blue: 0, blue: 0,
red: 0, red: 0,
@@ -101,18 +93,21 @@ export default {
if (time == 5) { if (time == 5) {
this.generating = false; this.generating = false;
this.generated = true; this.generated = true;
if (this.numberOfRaffles > 1 && if (
[this.redCheckbox, this.greenCheckbox, this.yellowCheckbox, this.blueCheckbox].filter(value => value == true).length == 1) { this.numberOfRaffles > 1 &&
return [this.redCheckbox, this.greenCheckbox, this.yellowCheckbox, this.blueCheckbox].filter(value => value == true)
.length == 1
) {
return;
} }
if (new Set(this.colors).size == 1) { if (new Set(this.colors).size == 1) {
alert("BINGO"); alert("BINGO");
} }
this.emitColors() this.emitColors();
window.ga('send', { window.ga("send", {
hitType: "event", hitType: "event",
eventCategory: "Raffles", eventCategory: "Raffles",
eventAction: "Generate", eventAction: "Generate",
@@ -147,8 +142,7 @@ export default {
} }
if (this.numberOfRaffles > 0) { if (this.numberOfRaffles > 0) {
for (let i = 0; i < this.numberOfRaffles; i++) { for (let i = 0; i < this.numberOfRaffles; i++) {
let color = let color = randomArray[Math.floor(Math.random() * randomArray.length)];
randomArray[Math.floor(Math.random() * randomArray.length)];
this.colors.push(color); this.colors.push(color);
if (color == 1) { if (color == 1) {
this.red += 1; this.red += 1;
@@ -201,12 +195,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../styles/variables.scss"; @import "@/styles/variables.scss";
@import "../styles/global.scss"; @import "@/styles/global.scss";
@import "../styles/media-queries.scss"; @import "@/styles/media-queries.scss";
.container { .container {
margin: auto; // margin: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -282,6 +276,15 @@ label .text {
max-width: 1400px; max-width: 1400px;
margin: 3rem auto 0; margin: 3rem auto 0;
&.compact {
margin-top: 0.5rem;
> .color-box {
width: 100px;
height: 100px;
}
}
@include mobile { @include mobile {
margin: 1.8rem auto 0; margin: 1.8rem auto 0;
} }
@@ -309,20 +312,6 @@ label .text {
justify-content: space-around; justify-content: space-around;
} }
.color-count-container {
margin: auto;
width: 300px;
justify-content: space-around;
align-items: center;
display: flex;
font-family: Arial;
margin-top: 35px;
@include mobile {
width: 80vw;
}
}
.green { .green {
background-color: $light-green; background-color: $light-green;
} }