diff --git a/apps/website/package.json b/apps/website/package.json index c99647f..9677bd7 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -1,6 +1,6 @@ { "name": "website", - "version": "2.0.0", + "version": "2.1.0", "private": true, "author": "Félix Péault (https://flayks.com)", "contributors": [ diff --git a/apps/website/src/routes/(site)/[country]/[location]/+page.server.ts b/apps/website/src/routes/(site)/[country]/[location]/+page.server.ts index b6bc0b0..1cbc5d6 100644 --- a/apps/website/src/routes/(site)/[country]/[location]/+page.server.ts +++ b/apps/website/src/routes/(site)/[country]/[location]/+page.server.ts @@ -20,9 +20,7 @@ export const load = async ({ params, setHeaders }) => { slug description date_updated - illustration_desktop { id } - illustration_desktop_2x { id } - illustration_mobile { id } + hero { id } credits { credit_id { name diff --git a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte index 2c10420..71c46a4 100644 --- a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte +++ b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte @@ -41,12 +41,11 @@ let currentPage = 1 let ended: boolean let currentPhotosAmount: number - let illustrationOffsetY = 0 + let heroOffsetY = 0 $: latestPhoto = photos[0] $: currentPhotosAmount = photos.length $: ended = currentPhotosAmount === totalPhotos - $: hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile /** @@ -104,7 +103,7 @@ * Add parallax on illustration when scrolling */ $: if (scrollY && scrollY < introEl.offsetHeight) { - illustrationOffsetY = scrollY * 0.1 + heroOffsetY = scrollY * 0.1 } @@ -163,7 +162,7 @@ }], // Illustration - ['.location-page__illustration', { + ['.location-page__hero', { scale: [1.06, 1], opacity: [0, 1], }, { @@ -235,18 +234,20 @@ Houses of {location.name} {location.description ?? 'has no description yet'}
-

- Photos by - {#each location.credits as { credit_id: { name, website } }} - {#if website} - - {name} - - {:else} - {name} - {/if} - {/each} -

+ {#if location.credits} +

+ Photos by + {#each location.credits as { credit_id: { name, website } }} + {#if website} + + {name} + + {:else} + {name} + {/if} + {/each} +

+ {/if} {#if latestPhoto} ·

@@ -271,15 +272,15 @@

- {#if hasIllustration} - - - + {#if location?.hero?.id} + + + Illustration for {location.name} diff --git a/apps/website/src/routes/+layout.svelte b/apps/website/src/routes/+layout.svelte index af4c2e6..735f8fa 100644 --- a/apps/website/src/routes/+layout.svelte +++ b/apps/website/src/routes/+layout.svelte @@ -62,24 +62,26 @@ $previousPage = from.url.pathname // Enable page loading state if URL changed - if (from.route.id !== to.route.id) { + if (from?.route.id !== to?.route.id) { $pageLoading = true } }) - afterNavigate(() => { + afterNavigate(({ from }) => { // Remove page loading state setTimeout(() => $pageLoading = false, DELAY.PAGE_LOADING) // Scroll back to top when new page is ready (excepted certain pages) - if (!$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')) { + if (from?.url?.pathname && (!$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/'))) { setTimeout(scrollToTop, DELAY.PAGE_IN) } }) - // Define page loading $: if (browser) { + // Define page loading document.body.classList.toggle('is-loading', $pageLoading) + // Block scroll on certain conditions + // document.body.classList.toggle('block-scroll', condition) } @@ -120,7 +122,7 @@