diff --git a/api/retrieve.js b/api/retrieve.js index d377c60..a90b95f 100644 --- a/api/retrieve.js +++ b/api/retrieve.js @@ -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 = { diff --git a/src/components/AllWinesPage.vue b/src/components/AllWinesPage.vue index f042fbd..24cad15 100644 --- a/src/components/AllWinesPage.vue +++ b/src/components/AllWinesPage.vue @@ -1,26 +1,32 @@ @@ -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(); } }; diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue index 0cebbe9..52345d4 100644 --- a/src/components/RegisterPage.vue +++ b/src/components/RegisterPage.vue @@ -85,7 +85,7 @@

Vinnere

Refresh data fra virtuelt lotteri
- +
@@ -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 { diff --git a/src/components/TodaysPage.vue b/src/components/TodaysPage.vue index de81fc1..4cca96b 100644 --- a/src/components/TodaysPage.vue +++ b/src/components/TodaysPage.vue @@ -1,10 +1,8 @@ @@ -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) { diff --git a/src/components/WinnerPage.vue b/src/components/WinnerPage.vue index c60472c..2b76296 100644 --- a/src/components/WinnerPage.vue +++ b/src/components/WinnerPage.vue @@ -2,23 +2,18 @@

Gratulerer {{name}}!

-

Her er valgene for dagens lotteri, du har 10 minutter å velge etter du fikk SMS-en.

+

+ Her er valgene for dagens lotteri, du har 10 minutter å velge etter du fikk SMS-en. +

Finner ikke noen vinner her..

Du må vente på tur..

-
-
- + + +
@@ -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; } \ No newline at end of file diff --git a/src/ui/Wine.vue b/src/ui/Wine.vue index 8dd0a5e..955bdcd 100644 --- a/src/ui/Wine.vue +++ b/src/ui/Wine.vue @@ -1,39 +1,27 @@ @@ -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); } }; @@ -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; + } + } } \ No newline at end of file diff --git a/src/utils.js b/src/utils.js index 644a673..1cee256 100644 --- a/src/utils.js +++ b/src/utils.js @@ -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)