flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: change Location hero illustration to photo

Browse Source 
makes it more manageable to add new locations by just picking a photo
This commit is contained in:
Félix Péault
2024-07-25 18:59:52 +02:00
parent 048c126986
commit d2347cc7b2
5 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/website/src/routes/(site)/[country]/[location]/+page.svelte
View File

@@ -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'}
</div>
<div class="info">
<p class="text-label">
Photos by
{#each location.credits as { credit_id: { name, website } }}
{#if website}
<a href={website} target="_blank" rel="noopener external">
{name}
</a>
{:else}
<span>{name}</span>
{/if}
{/each}
</p>
{#if location.credits}
<p class="text-label">
Photos by
{#each location.credits as { credit_id: { name, website } }}
{#if website}
<a href={website} target="_blank" rel="noopener external">
{name}
</a>
{:else}
<span>{name}</span>
{/if}
{/each}
</p>
{/if}
{#if latestPhoto}
&middot;
<p class="text-label" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}>
@@ -271,15 +272,15 @@
</div>
</div>
{#if hasIllustration}
<picture class="location-page__illustration" style:--parallax-y="{illustrationOffsetY}px">
<source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
<source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
{#if location?.hero?.id}
<picture class="location-page__hero" style:--parallax-y="{heroOffsetY}px">
<source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.hero.id, 'hero-large')}>
<source media="(min-width: 768px)" srcset={getAssetUrlKey(location.hero.id, 'hero-small')}>
<img
src={getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')}
src={getAssetUrlKey(location.hero.id, 'hero-mobile')}
width={320}
height={824}
alt="Illustration for {location.name}"
alt="Hero photo of {location.name}"
decoding="async"
/>
</picture>