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

Renamed css ballot to raffle.

Browse Source
This commit is contained in:
Kevin
2020-10-09 01:01:24 +02:00
committed by KevinMidboe
parent 59792f9aae
commit c01692bf1e
6 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/VirtualLotteryRegistrationPage.vue
View File

@@ -18,7 +18,7 @@
<h2 v-if="winners.length > 0">Vinnere</h2> <h2 v-if="winners.length > 0">Vinnere</h2>
<div class="winners" v-if="winners.length > 0"> <div class="winners" v-if="winners.length > 0">
<div class="winner" v-for="(winner, index) in winners" :key="index"> <div class="winner" v-for="(winner, index) in winners" :key="index">
<div :class="winner.color + '-ballot'" class="ballot-element"> <div :class="winner.color + '-raffle'" class="raffle-element">
<span>{{ winner.name }}</span> <span>{{ winner.name }}</span>
<span>{{ winner.phoneNumber }}</span> <span>{{ winner.phoneNumber }}</span>
<span>Rød: {{ winner.red }}</span> <span>Rød: {{ winner.red }}</span>
@@ -47,11 +47,11 @@
<span class="name">{{ attendee.name }}</span> <span class="name">{{ attendee.name }}</span>
<span class="phoneNumber">{{ attendee.phoneNumber }}</span> <span class="phoneNumber">{{ attendee.phoneNumber }}</span>
</div> </div>
<div class="ballots-container"> <div class="raffles-container">
<div class="red-ballot ballot-element small">{{ attendee.red }}</div> <div class="red-raffle raffle-element small">{{ attendee.red }}</div>
<div class="blue-ballot ballot-element small">{{ attendee.blue }}</div> <div class="blue-raffle raffle-element small">{{ attendee.blue }}</div>
<div class="green-ballot ballot-element small">{{ attendee.green }}</div> <div class="green-raffle raffle-element small">{{ attendee.green }}</div>
<div class="yellow-ballot ballot-element small">{{ attendee.yellow }}</div> <div class="yellow-raffle raffle-element small">{{ attendee.yellow }}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -140,7 +140,7 @@ export default {
blue: 0, blue: 0,
green: 0, green: 0,
yellow: 0, yellow: 0,
ballots: 0, raffles: 0,
randomColors: false, randomColors: false,
attendees: [], attendees: [],
winners: [], winners: [],
@@ -197,7 +197,7 @@ export default {
blue: this.blue, blue: this.blue,
green: this.green, green: this.green,
yellow: this.yellow, yellow: this.yellow,
ballots: this.ballots raffles: this.raffles
}); });
if (response == true) { if (response == true) {
@@ -354,7 +354,7 @@ hr {
} }
} }
.ballot-element { .raffle-element {
width: 140px; width: 140px;
height: 150px; height: 150px;
margin: 20px 0; margin: 20px 0;
@@ -378,19 +378,19 @@ hr {
font-size: 1rem; font-size: 1rem;
} }
&.green-ballot { &.green-raffle {
background-color: $light-green; background-color: $light-green;
} }
&.blue-ballot { &.blue-raffle {
background-color: $light-blue; background-color: $light-blue;
} }
&.yellow-ballot { &.yellow-raffle {
background-color: $light-yellow; background-color: $light-yellow;
} }
&.red-ballot { &.red-raffle {
background-color: $light-red; background-color: $light-red;
} }
} }
@@ -422,7 +422,7 @@ button {
margin: 0 auto; margin: 0 auto;
& .name-and-phone, & .name-and-phone,
& .ballots-container { & .raffles-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
@@ -431,7 +431,7 @@ button {
flex-direction: column; flex-direction: column;
} }
& .ballots-container { & .raffles-container {
flex-direction: row; flex-direction: row;
} }
} }

10
src/styles/global.scss
View File

@@ -199,7 +199,7 @@ textarea {
margin: 0 !important; margin: 0 !important;
} }
.ballot-element { .raffle-element {
margin: 20px 0; margin: 20px 0;
-webkit-mask-image: url(/../../public/assets/images/lodd.svg); -webkit-mask-image: url(/../../public/assets/images/lodd.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -208,19 +208,19 @@ textarea {
mask-repeat: no-repeat; mask-repeat: no-repeat;
color: #333333; color: #333333;
&.green-ballot { &.green-raffle {
background-color: $light-green; background-color: $light-green;
} }
&.blue-ballot { &.blue-raffle {
background-color: $light-blue; background-color: $light-blue;
} }
&.yellow-ballot { &.yellow-raffle {
background-color: $light-yellow; background-color: $light-yellow;
} }
&.red-ballot { &.red-raffle {
background-color: $light-red; background-color: $light-red;
} }
} }

10
src/ui/Attendees.vue
View File

@@ -4,10 +4,10 @@
<div class="attendees-container" ref="attendees"> <div class="attendees-container" ref="attendees">
<div class="attendee" v-for="(attendee, index) in flipList(attendees)" :key="index"> <div class="attendee" v-for="(attendee, index) in flipList(attendees)" :key="index">
<span class="attendee-name">{{ attendee.name }}</span> <span class="attendee-name">{{ attendee.name }}</span>
<div class="red-ballot ballot-element small">{{ attendee.red }}</div> <div class="red-raffle ballot-element small">{{ attendee.red }}</div>
<div class="blue-ballot ballot-element small">{{ attendee.blue }}</div> <div class="blue-raffle ballot-element small">{{ attendee.blue }}</div>
<div class="green-ballot ballot-element small">{{ attendee.green }}</div> <div class="green-raffle ballot-element small">{{ attendee.green }}</div>
<div class="yellow-ballot ballot-element small">{{ attendee.yellow }}</div> <div class="yellow-raffle ballot-element small">{{ attendee.yellow }}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -46,7 +46,7 @@ export default {
width: 60%; width: 60%;
} }
.ballot-element { .raffle-element {
font-size: 0.75rem; font-size: 0.75rem;
width: 45px; width: 45px;
height: 45px; height: 45px;

8
src/ui/TotalBought.vue
View File

@@ -8,7 +8,7 @@
color.name + color.name +
'-container ' + '-container ' +
color.name + color.name +
'-ballot inner-bought-container ballot-element' '-raffle inner-bought-container ballot-element'
" "
:key="color.name" :key="color.name"
> >
@@ -24,7 +24,7 @@
</div> </div>
</div> </div>
<div class="inner-bought-container total-ballots"> <div class="inner-bought-container total-raffles">
<div class="total-container"> <div class="total-container">
Totalt&nbsp; Totalt&nbsp;
<div> <div>
@@ -136,7 +136,7 @@ export default {
align-items: center; align-items: center;
} }
.ballot-element { .raffle-element {
width: 140px; width: 140px;
height: 150px; height: 150px;
margin: 20px 0; margin: 20px 0;
@@ -166,7 +166,7 @@ export default {
} }
} }
.total-ballots { .total-raffles {
width: 150px; width: 150px;
height: 150px; height: 150px;
margin: 20px 0; margin: 20px 0;

6
src/ui/WinnerDraw.vue
View File

@@ -3,7 +3,7 @@
<div class="current-draw" v-if="drawing"> <div class="current-draw" v-if="drawing">
<h2>TREKKER</h2> <h2>TREKKER</h2>
<div <div
:class="currentColor + '-ballot'" :class="currentColor + '-raffle'"
class="ballot-element center-new-winner" class="ballot-element center-new-winner"
:style="{ transform: 'rotate(' + getRotation() + 'deg)' }" :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
> >
@@ -19,7 +19,7 @@
<div class="current-draw" v-if="drawingDone"> <div class="current-draw" v-if="drawingDone">
<h2>VINNER</h2> <h2>VINNER</h2>
<div <div
:class="currentColor + '-ballot'" :class="currentColor + '-raffle'"
class="ballot-element center-new-winner" class="ballot-element center-new-winner"
:style="{ transform: 'rotate(' + getRotation() + 'deg)' }" :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
> >
@@ -204,7 +204,7 @@ h2 {
align-items: center; align-items: center;
} }
.ballot-element { .raffle-element {
width: 140px; width: 140px;
height: 140px; height: 140px;
font-size: 1.2rem; font-size: 1.2rem;

4
src/ui/Winners.vue
View File

@@ -3,7 +3,7 @@
<h2 v-if="winners.length > 0"> {{ title ? title : 'Vinnere' }}</h2> <h2 v-if="winners.length > 0"> {{ title ? title : 'Vinnere' }}</h2>
<div class="winners" v-if="winners.length > 0"> <div class="winners" v-if="winners.length > 0">
<div class="winner" v-for="(winner, index) in winners" :key="index"> <div class="winner" v-for="(winner, index) in winners" :key="index">
<div :class="winner.color + '-ballot'" class="ballot-element">{{ winner.name }}</div> <div :class="winner.color + '-raffle'" class="ballot-element">{{ winner.name }}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -40,7 +40,7 @@ h2 {
flex-wrap: wrap; flex-wrap: wrap;
} }
.ballot-element { .raffle-element {
font-size: 1rem; font-size: 1rem;
width: 145px; width: 145px;
height: 145px; height: 145px;