From 048c126986e8589c3058bfa8dea909f5a9bd36d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Thu, 25 Jul 2024 15:44:22 +0200 Subject: [PATCH 1/2] fix: rework sizes and spaces on Location page --- .../src/components/molecules/House/House.scss | 8 +++--- apps/website/src/style/_typography.scss | 4 +-- apps/website/src/style/pages/_location.scss | 26 +++++++------------ 3 files changed, 16 insertions(+), 22 deletions(-) diff --git a/apps/website/src/components/molecules/House/House.scss b/apps/website/src/components/molecules/House/House.scss index 5a775aa..f369621 100644 --- a/apps/website/src/components/molecules/House/House.scss +++ b/apps/website/src/components/molecules/House/House.scss @@ -15,7 +15,7 @@ } @include bp (sm) { grid-column: 6 / span 14; - margin-bottom: 56px; + margin-bottom: 48px; padding: 0; max-width: 800px; } @@ -28,7 +28,7 @@ } .info { display: block; - margin-top: 12px; + margin-top: 8px; color: $color-lightgray; line-height: 1.5; opacity: 0; @@ -36,10 +36,10 @@ transition-delay: var(--delay); @include bp (sm) { - margin-top: 16px; + margin-top: 12px; } @include bp (md) { - margin-top: 24px; + margin-top: 16px; } & > * { diff --git a/apps/website/src/style/_typography.scss b/apps/website/src/style/_typography.scss index 4dde40b..95fbe61 100644 --- a/apps/website/src/style/_typography.scss +++ b/apps/website/src/style/_typography.scss @@ -20,12 +20,12 @@ // House Name .title-image { font-family: $font-serif; - font-size: rem(40px); + font-size: clamp(#{rem(28px)}, 9vw, #{rem(36px)}); line-height: 1; color: $color-secondary; @include bp (sm) { - font-size: clamp(#{rem(40px)}, 7vw, #{rem(88px)}); + font-size: clamp(#{rem(40px)}, 4.5vw, #{rem(56px)}); } } diff --git a/apps/website/src/style/pages/_location.scss b/apps/website/src/style/pages/_location.scss index 9365037..889b532 100644 --- a/apps/website/src/style/pages/_location.scss +++ b/apps/website/src/style/pages/_location.scss @@ -7,13 +7,6 @@ position: relative; background: $color-primary; - @include bp (sm) { - padding-top: clamp(40px, 14vw, 320px); - } - @include bp (lg) { - padding-top: clamp(40px, 18vw, 272px); - } - // Houses Of Title .title { position: relative; @@ -37,6 +30,15 @@ max-width: clamp(300px, 80vw, 1120px); margin: 0 auto; padding: 0; + + @include bp (sm) { + --margin-y: clamp(40px, 14vw, 256px); + margin-top: var(--margin-y); + margin-bottom: var(--margin-y); + } + @include bp (lg) { + // --margin-y: clamp(40px, 10vw, 256px); + } } strong { @@ -52,8 +54,6 @@ @include bp (sm) { display: flex; align-items: baseline; - // margin-right: auto; - // margin-left: -15vw; } span { @@ -69,12 +69,6 @@ } .city { text-align: center; - - @include bp (sm) { - // margin-left: 15vw; - // width: 80%; - // padding-left: min(400px, 16vw); - } } } } @@ -92,7 +86,7 @@ @include bp (sm) { --columns: 19; grid-column: 4 / span 21; - margin: clamp(40px, 16vw, 260px) 0 calc(-1 * clamp(60px, 6vw, 120px)); + margin-bottom: calc(-1 * clamp(60px, 6vw, 120px)); border-radius: 8px 0 0 8px; } @include bp (md) { From d2347cc7b23a21f787074cd467bc04889ab359ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Thu, 25 Jul 2024 18:59:52 +0200 Subject: [PATCH 2/2] feat: change Location hero illustration to photo makes it more manageable to add new locations by just picking a photo --- apps/website/package.json | 2 +- .../[country]/[location]/+page.server.ts | 4 +- .../(site)/[country]/[location]/+page.svelte | 45 ++++++++++--------- apps/website/src/routes/+layout.svelte | 12 ++--- apps/website/src/style/pages/_location.scss | 19 ++++---- 5 files changed, 41 insertions(+), 41 deletions(-) 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 @@