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

Merge branch 'master' of github.com:KevinMidboe/vinlottis

Browse Source
This commit is contained in:
Adrian Thompson
2020-09-17 13:17:03 +02:00
parent c1c4b414c3 ce67ecc23d
commit 53156e2330
1 changed files with 70 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/HighscorePage.vue
View File

@@ -2,11 +2,11 @@
<div> <div>
<h1 class="text-center">Vinlottis highscore 🏆🍷</h1> <h1 class="text-center">Vinlottis highscore 🏆🍷</h1>
<div class="flex row"> <div class="content-container">
<div class="highscore"> <div class="highscore">
<div class="flex column"> <div>
<h3 class="margin-bottom-0">Finn ditt navn:</h3> <h3 >Finn ditt navn:</h3>
<input v-model="highscoreFilter" placeholder="Filtrer på navn" class="margin-bottom-sm" /> <input type="text" v-model="highscoreFilter" placeholder="Filtrer på navn" class="margin-bottom-sm" />
</div> </div>
<ol v-if="highscore.length > 0"> <ol v-if="highscore.length > 0">
@@ -16,7 +16,7 @@
</ol> </ol>
<div v-if="highscore.length != highscoreResponse.length" class="flex justify-center align-center"> <div v-if="highscore.length != highscoreResponse.length" class="flex justify-center align-center">
<i class="text-center vin-link cursor-pointer" @click="resetFilter" @keyup.space="resetFilter" <i @click="resetFilter" @keyup.space="resetFilter"
role="button" aria-pressed="false" tabindex="0">reset filter</i> role="button" aria-pressed="false" tabindex="0">reset filter</i>
</div> </div>
</div> </div>
@@ -24,34 +24,32 @@
<div class="winners-vines" v-if="selectedWinner"> <div class="winners-vines" v-if="selectedWinner">
<h1>{{ selectedWinner.name }}</h1> <h1>{{ selectedWinner.name }}</h1>
<h2 class="margin-bottom-sm">Vinnende farger:</h2> <h2>Vinnende farger:</h2>
<div class="flex row wrap"> <div class="winning-colors">
<div v-for="win in selectedWinner.wins" <div v-for="win in selectedWinner.wins"
class="color-box" :class="win.color" class="color-box" :class="win.color"
:style="{ transform: 'rotate(' + getRotation() + 'deg)' }"> :style="{ transform: 'rotate(' + getRotation() + 'deg)' }">
</div> </div>
</div> </div>
<h2 class="margin-top-md margin-bottom-0">Flasker vunnet:</h2> <h2>Flasker vunnet:</h2>
<div class="flex column wrap"> <div v-for="win in selectedWinner.wins" class="single-win">
<div v-for="win in selectedWinner.wins"> <div class="date-won"><b>{{ humanReadableDate(win.date) }}</b> - {{ daysAgo(win.date) }} dager siden</div>
<div class="date-won"><b>{{ humanReadableDate(win.date) }}</b> - {{ daysAgo(win.date) }} dager siden</div> <br/>
<br/> <div class="left">
<div class="left"> <h3>Vunnet med:</h3>
<div class="margin-bottom-md"><b>Vunnet med farge:</b></div>
<div class="color-box" :class="win.color" <div class="color-box" :class="win.color"
:style="{ transform: 'rotate(' + getRotation() + 'deg)' }"></div> :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"></div>
</div> </div>
<div class="left"> <div class="left">
<Wine :wine="win.wine"></Wine> <Wine :wine="win.wine"></Wine>
</div>
</div> </div>
</div> </div>
</div> </div>
<div v-else class="center"> <div v-else class="center">
<h1>👈 Se dine vinn, tykk på navnet ditt</h1> <h1>👈 Se dine vinn, trykk på navnet ditt</h1>
</div> </div>
</div> </div>
</div> </div>
@@ -133,33 +131,15 @@ h1 {
text-align: center; text-align: center;
} }
.highscore { input[type="text"] {
width: max-content; width: 100%;
margin: 2rem; color: black;
border-radius: 4px;
padding: 1rem 1rem;
border: 1px solid black;
max-width: 200px;
} }
.winners-vines {
margin: 2rem;
}
.left {
float: left;
}
.center {
background-color: $primary;
padding: 0.5rem 1rem;
border-radius: 8px;
font-style: italic;
@include desktop {
align-self: flex-start;
margin-top: 20vh;
}
}
.date-won { .date-won {
font-size: 1.3rem; font-size: 1.3rem;
margin-top: 2rem; margin-top: 2rem;
@@ -182,6 +162,14 @@ h1 {
} }
} }
.single-win {
border-bottom: 1px solid rgb(237, 237, 237);
.left {
display: flex;
align-items: center;
}
}
.green { .green {
background-color: $light-green; background-color: $light-green;
} }
@@ -198,8 +186,41 @@ h1 {
background-color: $light-red; background-color: $light-red;
} }
div { .content-container {
font-family: Arial; display: flex;
flex-direction: column-reverse;
margin: 2em;
.center {
align-self: center;
h1 {
background-color: $primary;
padding: 0.5rem 1rem;
border-radius: 8px;
font-style: italic;
}
}
.winning-colors {
display: flex;
}
@include mobile {
.center {
display: none;
}
}
@include tablet {
display: grid;
grid-template-columns: .3fr 1fr;
grid-template-rows: auto-flow min-content;
justify-items: center;
width: 80%;
margin: auto;
grid-gap: 1em;
max-width: 1600px;
}
} }
ol { ol {