From 5f973b199d81eb3b419ef1f2c1800531b3e311fe Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 11 Oct 2020 15:55:15 +0200 Subject: [PATCH 1/8] All wines endpoint returns newest first. --- api/retrieve.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 = { From 64a1a8a93a89c29e98cf226e368e82e867cc40ee Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 11 Oct 2020 16:24:44 +0200 Subject: [PATCH 2/8] Updated wine w/ new design, removed lots of code. Updated wine component to reflect changes in design. Removed all methods, computed and unnecessary props. The inlineSlot props has been removed, now slot always renders inline. Removed functions for custom logic, not this is resides in the parent and should be passed down in the slot. --- src/ui/Wine.vue | 211 ++++++++++++++++-------------------------------- 1 file changed, 68 insertions(+), 143 deletions(-) diff --git a/src/ui/Wine.vue b/src/ui/Wine.vue index 8dd0a5e..9c31a1b 100644 --- a/src/ui/Wine.vue +++ b/src/ui/Wine.vue @@ -1,39 +1,27 @@ @@ -43,36 +31,6 @@ 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 - } - }, - 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); - } } } }; @@ -83,100 +41,67 @@ 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; + background-color: NavajoWhite; + + .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 From 5f2b29324dfd8dde1cd1a3993219e9bbe1a77177 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 11 Oct 2020 16:31:40 +0200 Subject: [PATCH 3/8] Reflecting changes no longer use props in Wine.vue Reflecting changes now that wine should not have custom logic. No longer send prop values other than wine down. WinnerPage function called from the slot passed down, not using custom :winner prop and @chosenWine event. --- src/components/RegisterPage.vue | 12 ++++++++---- src/components/TodaysPage.vue | 12 +++++------- src/components/WinnerPage.vue | 34 ++++++++++++++++----------------- 3 files changed, 30 insertions(+), 28 deletions(-) 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 0dfdf12..0ec99f3 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 434f9d7..adf9489 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..

-
-
- + + +
@@ -64,7 +59,7 @@ export default { this.wines = await _wines.json(); }, methods: { - chosenWine: async function(name) { + chooseWine: async function(name) { let posted = await postWineChosen(this.id, name); console.log("response", posted); if (posted.success) { @@ -93,9 +88,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 From dc7ffbae7a5f5f3b8b694ac65eac3a9fc1e56ed5 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 11 Oct 2020 16:34:37 +0200 Subject: [PATCH 4/8] Removed unused css. --- src/ui/Wine.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/Wine.vue b/src/ui/Wine.vue index 9c31a1b..88574e8 100644 --- a/src/ui/Wine.vue +++ b/src/ui/Wine.vue @@ -88,7 +88,6 @@ h2 { .bottom-section { width: 100%; margin-top: 1rem; - background-color: NavajoWhite; .link { color: $matte-text-color; From 6670f43b11ed80af26449bf9cb29453fda0c42c4 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 11 Oct 2020 17:43:56 +0200 Subject: [PATCH 5/8] Implements intersectObserver to lazy load images. IntersectionObserver for delaying the load of images until the component enteres the viewport. --- src/ui/Wine.vue | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/ui/Wine.vue b/src/ui/Wine.vue index 88574e8..971acfe 100644 --- a/src/ui/Wine.vue +++ b/src/ui/Wine.vue @@ -2,7 +2,7 @@
Wine image @@ -32,6 +32,29 @@ export default { type: Object, required: true } + }, + data() { + return { + loadImage: false + } + }, + methods: { + 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); } }; From 587239b799b7043ec497b874316c04169650ebc8 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 11 Oct 2020 17:56:59 +0200 Subject: [PATCH 6/8] All wines simplified. Refactor script and template. --- src/components/AllWinesPage.vue | 193 ++++++++++++++------------------ 1 file changed, 82 insertions(+), 111 deletions(-) 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(); } }; From a7d673026ec18406ec98940b9cfe300fd058c795 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 11 Oct 2020 18:11:12 +0200 Subject: [PATCH 7/8] Added missing space before rating. --- src/ui/Wine.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/Wine.vue b/src/ui/Wine.vue index 971acfe..955bdcd 100644 --- a/src/ui/Wine.vue +++ b/src/ui/Wine.vue @@ -10,7 +10,7 @@

{{ wine.name }}

- Rating:{{ wine.rating }} rating + Rating: {{ wine.rating }} rating Pris: {{ wine.price }} NOK Land: {{ wine.country }}
From 9c1b2902193b6bd47861165eeaa9bc4e6c0b5ebf Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 11 Oct 2020 18:11:44 +0200 Subject: [PATCH 8/8] Make sure date is date in dateString(). --- src/utils.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/utils.js b/src/utils.js index 7644e4b..b057bca 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)