Merge pull request #48 from KevinMidboe/refactor/wine-ui
Refactor/implement new design for Wine
This commit is contained in:
GitHub
@@ -139,7 +139,9 @@ const allWinesSummary = async (req, res) => {
|
||||
}
|
||||
}
|
||||
|
||||
return res.json(Object.values(wines));
|
||||
wines = Object.values(wines).reverse()
|
||||
|
||||
return res.json(wines);
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
|
||||
@@ -1,26 +1,32 @@
|
||||
<template>
|
||||
<div class="outer">
|
||||
<div class="container">
|
||||
<h1 class="title">Alle viner</h1>
|
||||
<div class="wines-container">
|
||||
<Wine :wine="wine" v-for="wine in wines" :key="wine" :fullscreen="true" :inlineSlot="true">
|
||||
<div class="winners-container">
|
||||
<div class="color-wins" :class="{ 'big': fullscreen }"
|
||||
v-if="wine.blue || wine.red || wine.green || wine.yellow">
|
||||
<span class="label">Vinnende lodd:</span>
|
||||
<span class="color-win blue">{{wine.blue == undefined ? 0 : wine.blue}}</span>
|
||||
<span class="color-win red">{{wine.red == undefined ? 0 : wine.red}}</span>
|
||||
<span class="color-win green">{{wine.green == undefined ? 0 : wine.green}}</span>
|
||||
<span class="color-win yellow">{{wine.yellow == undefined ? 0 : wine.yellow}}</span>
|
||||
</div>
|
||||
<div class="name-wins" v-if="wine.winners">
|
||||
<span class="label">Vunnet av:</span>
|
||||
<span class="names" v-for="winner in wine.winners">- {{ winner }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1 class="">Alle viner</h1>
|
||||
|
||||
<div id="wines-container">
|
||||
<Wine :wine="wine" v-for="(wine, _, index) in wines" :key="wine._id">
|
||||
<div class="winners-container">
|
||||
|
||||
<span class="label">Vinnende lodd:</span>
|
||||
<div class="flex row">
|
||||
<span class="raffle-element blue-raffle">{{ wine.blue == null ? 0 : wine.blue }}</span>
|
||||
<span class="raffle-element red-raffle">{{ wine.red == null ? 0 : wine.red }}</span>
|
||||
<span class="raffle-element green-raffle">{{ wine.green == null ? 0 : wine.green }}</span>
|
||||
<span class="raffle-element yellow-raffle">{{ wine.yellow == null ? 0 : wine.yellow }}</span>
|
||||
</div>
|
||||
</Wine>
|
||||
</div>
|
||||
|
||||
<div class="name-wins">
|
||||
<span class="label">Vunnet av:</span>
|
||||
<ul class="names">
|
||||
<li v-for="(winner, index) in wine.winners">
|
||||
<router-link class="vin-link" :to="`/highscore/` + winner">{{ winner }}</router-link>
|
||||
-
|
||||
<router-link class="vin-link" :to="winDateUrl(wine.dates[index])">{{ dateString(wine.dates[index]) }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Wine>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -30,6 +36,7 @@ import { page, event } from "vue-analytics";
|
||||
import Banner from "@/ui/Banner";
|
||||
import Wine from "@/ui/Wine";
|
||||
import { overallWineStatistics } from "@/api";
|
||||
import { dateString } from "@/utils";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -41,133 +48,97 @@ export default {
|
||||
wines: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
winDateUrl(date) {
|
||||
const timestamp = new Date(date).getTime();
|
||||
return `/history/${timestamp}`
|
||||
},
|
||||
dateString: dateString
|
||||
},
|
||||
async mounted() {
|
||||
const wines = await overallWineStatistics();
|
||||
this.wines = wines.sort((a, b) =>
|
||||
a.rating > b.rating ? -1 : 1
|
||||
);
|
||||
this.wines = await overallWineStatistics();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./src/styles/media-queries";
|
||||
@import "./src/styles/variables";
|
||||
|
||||
.container {
|
||||
width: 90vw;
|
||||
margin: 3rem auto;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-family: "knowit";
|
||||
font-weight: normal;
|
||||
|
||||
font-family: knowit, Arial;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.wines-container {
|
||||
.label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#wines-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
align-items: flex-start;
|
||||
|
||||
@include desktop {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
> div {
|
||||
max-width: max-content;
|
||||
}
|
||||
> div {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.winners-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 2rem;
|
||||
flex-direction: column;
|
||||
margin-top: 1rem;
|
||||
|
||||
@include mobile {
|
||||
flex-direction: row;
|
||||
width: max-content;
|
||||
margin: 0.75rem;
|
||||
|
||||
&:not(&:first-child) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
> div:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name-wins {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
|
||||
.names {
|
||||
margin-left: 0.5rem;
|
||||
a {
|
||||
font-weight: normal;
|
||||
&:not(:hover) {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
padding-left: 1.5rem;
|
||||
list-style: none;
|
||||
|
||||
&:before {
|
||||
content: "- ";
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-wins {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
|
||||
margin-left: -3px; // offset span.color-win margin
|
||||
|
||||
@include mobile {
|
||||
width: 25vw;
|
||||
margin-left: -2px; // offset span.color-win margin
|
||||
}
|
||||
@include desktop {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.color-wins.big {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
span.color-win {
|
||||
border: 2px solid transparent;
|
||||
color: #333;
|
||||
display: block;
|
||||
padding: 25px;
|
||||
.raffle-element {
|
||||
padding: 1rem;
|
||||
font-size: 1.3rem;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
/* max-height: calc(3rem + 18px); */
|
||||
/* max-width: calc(3rem + 18px); */
|
||||
width: 1rem;
|
||||
margin: 3px;
|
||||
touch-action: manipulation;
|
||||
height: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 900;
|
||||
|
||||
@include mobile {
|
||||
margin: 2px;
|
||||
padding: 10px;
|
||||
font-size: 1rem;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
grow: 0.5;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: #c8f9df;
|
||||
}
|
||||
&.blue {
|
||||
background: #d4f2fe;
|
||||
}
|
||||
&.red {
|
||||
background: #fbd7de;
|
||||
}
|
||||
&.yellow {
|
||||
background: #fff6d6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
<h3>Vinnere</h3>
|
||||
<a class="wine-link" @click="fetchColorsAndWinners()">Refresh data fra virtuelt lotteri</a>
|
||||
<div class="winner-container" v-if="winners.length > 0">
|
||||
<wine v-for="winner in winners" :key="winner" :wine="winner.wine" :inlineSlot="true">
|
||||
<wine v-for="winner in winners" :key="winner" :wine="winner.wine">
|
||||
<div class="winner-element">
|
||||
<div class="color-selector">
|
||||
<div class="label-div">
|
||||
@@ -500,6 +500,10 @@ hr {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 0 1.5rem 3rem;
|
||||
|
||||
@@ -537,10 +541,10 @@ hr {
|
||||
}
|
||||
.winner-element {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
|
||||
@include desktop {
|
||||
margin-top: 1.5rem;
|
||||
> div {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<template>
|
||||
<div class="outer">
|
||||
<div class="container">
|
||||
<h1 class="title">Dagens viner</h1>
|
||||
<div class="wines-container">
|
||||
<Wine :wine="wine" v-for="wine in wines" :key="wine" :fullscreen="true" :inlineSlot="true" />
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1 class="title">Dagens viner</h1>
|
||||
<div class="wines-container">
|
||||
<Wine :wine="wine" v-for="wine in wines" :key="wine" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -47,7 +45,7 @@ h1 {
|
||||
.wines-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 2rem;
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
|
||||
@@ -2,23 +2,18 @@
|
||||
<div class="container">
|
||||
<div v-if="!posted">
|
||||
<h1 v-if="name">Gratulerer {{name}}!</h1>
|
||||
<p
|
||||
v-if="name"
|
||||
>Her er valgene for dagens lotteri, du har 10 minutter å velge etter du fikk SMS-en.</p>
|
||||
<p v-if="name">
|
||||
Her er valgene for dagens lotteri, du har 10 minutter å velge etter du fikk SMS-en.
|
||||
</p>
|
||||
<h1 v-else-if="!turn && !existing" class="sent-container">Finner ikke noen vinner her..</h1>
|
||||
<h1 v-else-if="!turn" class="sent-container">Du må vente på tur..</h1>
|
||||
<div class="wines-container" v-if="name">
|
||||
<br />
|
||||
<br />
|
||||
<Wine
|
||||
:wine="wine"
|
||||
v-for="wine in wines"
|
||||
:key="wine"
|
||||
:winner="true"
|
||||
:fullscreen="true"
|
||||
:inlineSlot="true"
|
||||
v-on:chosen="chosenWine"
|
||||
/>
|
||||
<Wine :wine="wine" v-for="wine in wines" :key="wine">
|
||||
<button
|
||||
@click="chooseWine(wine.name)"
|
||||
class="vin-button select-wine"
|
||||
>Velg denne vinnen</button>
|
||||
</Wine>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="posted" class="sent-container">
|
||||
@@ -63,7 +58,7 @@ export default {
|
||||
this.wines = await prelottery();
|
||||
},
|
||||
methods: {
|
||||
chosenWine: async function(name) {
|
||||
chooseWine: async function(name) {
|
||||
let posted = await postWineChosen(this.id, name);
|
||||
console.log("response", posted);
|
||||
if (posted.success) {
|
||||
@@ -92,9 +87,14 @@ export default {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.select-wine {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.wines-container {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
229
src/ui/Wine.vue
229
src/ui/Wine.vue
@@ -1,39 +1,27 @@
|
||||
<template>
|
||||
<div class="wine-container" :class="{ 'big': fullscreen }">
|
||||
<div class="left">
|
||||
<div class="wine">
|
||||
<div class="wine-image">
|
||||
<img
|
||||
v-if="wine.image"
|
||||
v-if="wine.image && loadImage"
|
||||
:src="wine.image"
|
||||
class="wine-image"
|
||||
:class="{ 'fullscreen': fullscreen }"
|
||||
/>
|
||||
<img v-else class="wine-placeholder" alt="Wine image" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div>
|
||||
<h2 v-if="wine.name">{{ wine.name }}</h2>
|
||||
<h2 v-else>(no name)</h2>
|
||||
<span v-if="wine.rating">{{ wine.rating }} rating</span>
|
||||
<span v-if="wine.price">{{ wine.price }} NOK</span>
|
||||
<span v-if="wine.country">{{ wine.country }}</span>
|
||||
|
||||
<a
|
||||
v-if="wine.vivinoLink"
|
||||
:href="wine.vivinoLink"
|
||||
class="wine-link"
|
||||
>Les mer på {{ hostname(wine.vivinoLink) }}</a>
|
||||
|
||||
<button
|
||||
v-if="winner"
|
||||
@click="choseWine(wine.name)"
|
||||
class="vin-button"
|
||||
>Velg dette som din vin</button>
|
||||
</div>
|
||||
|
||||
<slot v-if="shouldUseInlineSlot()"></slot>
|
||||
<div class="wine-details">
|
||||
<h2 v-if="wine.name">{{ wine.name }}</h2>
|
||||
<span v-if="wine.rating"><b>Rating:</b> {{ wine.rating }} rating</span>
|
||||
<span v-if="wine.price"><b>Pris:</b> {{ wine.price }} NOK</span>
|
||||
<span v-if="wine.country"><b>Land:</b> {{ wine.country }}</span>
|
||||
</div>
|
||||
|
||||
<slot v-if="!shouldUseInlineSlot()"></slot>
|
||||
<slot></slot>
|
||||
|
||||
<div class="bottom-section">
|
||||
<a v-if="wine.vivinoLink" :href="wine.vivinoLink" class="link float-right">
|
||||
Les mer
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -43,37 +31,30 @@ export default {
|
||||
wine: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
inlineSlot: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
winner: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadImage: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
shouldUseInlineSlot() {
|
||||
return this.inlineSlot && window.innerWidth > 768;
|
||||
},
|
||||
hostname(url) {
|
||||
const urlHostname = new URL(url).hostname;
|
||||
return urlHostname.split(".")[
|
||||
(urlHostname.match(/\./g) || []).length - 1
|
||||
];
|
||||
},
|
||||
choseWine(name) {
|
||||
if (window.confirm(`Er du sikker på at du vil ha ${name}?`)) {
|
||||
this.$emit("chosen", name);
|
||||
}
|
||||
setImage(entries) {
|
||||
const { target, isIntersecting } = entries[0];
|
||||
if (!isIntersecting) return;
|
||||
|
||||
this.loadImage = true;
|
||||
this.observer.unobserve(target);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.observer = new IntersectionObserver(this.setImage, {
|
||||
root: this.$el,
|
||||
threshold: 0
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
this.observer.observe(this.$el);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -83,100 +64,66 @@ export default {
|
||||
@import "./src/styles/global";
|
||||
@import "./src/styles/variables";
|
||||
|
||||
.wine-image {
|
||||
height: 250px;
|
||||
.wine {
|
||||
padding: 2rem;
|
||||
margin: 1rem 0rem;
|
||||
position: relative;
|
||||
-webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
|
||||
|
||||
@include mobile {
|
||||
max-width: 90px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
@include desktop {
|
||||
height: 100%;
|
||||
max-height: 65vh;
|
||||
max-width: 275px;
|
||||
object-fit: cover;
|
||||
}
|
||||
@include tablet {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
margin: 1rem 2rem;
|
||||
}
|
||||
}
|
||||
.wine-placeholder {
|
||||
height: 250px;
|
||||
width: 70px;
|
||||
|
||||
.wine-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
height: 250px;
|
||||
@include mobile {
|
||||
object-fit: cover;
|
||||
max-width: 90px;
|
||||
}
|
||||
}
|
||||
.wine-placeholder {
|
||||
height: 250px;
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.wine-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-size: 1.4rem;
|
||||
margin: 2rem 0;
|
||||
color: $matte-text-color;
|
||||
}
|
||||
|
||||
.bottom-section {
|
||||
width: 100%;
|
||||
max-width: 30vw;
|
||||
|
||||
@include mobile {
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
.wine-container {
|
||||
margin-bottom: 30px;
|
||||
font-family: Arial;
|
||||
width: 100%;
|
||||
max-width: max-content;
|
||||
|
||||
&.big {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
max-width: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
margin-right: 3rem;
|
||||
|
||||
@include mobile {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: max-content;
|
||||
|
||||
> div:first-of-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: #333333;
|
||||
font-family: Arial;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.wine-link {
|
||||
color: #333333;
|
||||
font-family: Arial;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid $link-color;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
& button.red {
|
||||
background-color: $light-red;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.vin-button {
|
||||
margin-top: 1rem;
|
||||
|
||||
.link {
|
||||
color: $matte-text-color;
|
||||
font-family: Arial;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
border-bottom: 2px solid $matte-text-color;
|
||||
|
||||
&:hover {
|
||||
font-weight: normal;
|
||||
border-color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,8 @@
|
||||
|
||||
const dateString = (date) => {
|
||||
if (typeof(date) == "string") {
|
||||
date = new Date(date);
|
||||
}
|
||||
const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date)
|
||||
const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date)
|
||||
const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date)
|
||||
|
||||
Reference in New Issue
Block a user