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

Carousel: Add city in photo's caption instead of region
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-08-24 11:18:09 +02:00
parent d058cab507
commit 1c8cb20b67
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/organisms/Carousel.svelte
View File

@@ -141,7 +141,7 @@
<div class="wrap"> <div class="wrap">
<div class="gallery"> <div class="gallery">
<div class="gallery__images"> <div class="gallery__images">
{#each photos as { id, name, location, image }, index} {#each photos as { id, name, location, city, image }, index}
<div class="gallery__photo" <div class="gallery__photo"
class:is-prev={id === prevPhoto.id} class:is-prev={id === prevPhoto.id}
class:is-active={id === currentPhoto.id} class:is-active={id === currentPhoto.id}
@@ -158,7 +158,7 @@
<source media="(min-width: 500px)" data-srcset={getThumbnail(image.private_hash, 600)}> <source media="(min-width: 500px)" data-srcset={getThumbnail(image.private_hash, 600)}>
<source media="(min-width: 300px)" data-srcset={getThumbnail(image.private_hash, 400)}> <source media="(min-width: 300px)" data-srcset={getThumbnail(image.private_hash, 400)}>
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
alt="{name}, {location.name}, {location.country.name}" alt="{name}, {city ? city : location.name}, {location.country.name}"
width={defaultWidth} height={defaultHeight} width={defaultWidth} height={defaultHeight}
class:lazyload={ class:lazyload={
// Load the current index and the two previous/next ones // Load the current index and the two previous/next ones
@@ -203,7 +203,7 @@
<div class="carousel__infos"> <div class="carousel__infos">
<div class="carousel__locations"> <div class="carousel__locations">
{#each photos as { id, name, location }, index} {#each photos as { id, name, location, city }, index}
<div class="carousel__location style-location" <div class="carousel__location style-location"
class:is-prev={id === prevPhoto.id} class:is-prev={id === prevPhoto.id}
class:is-active={id === currentPhoto.id} class:is-active={id === currentPhoto.id}
@@ -213,10 +213,10 @@
<p class="state style-caps style-caps--transparent"> <p class="state style-caps style-caps--transparent">
{#if locationUrl} {#if locationUrl}
<a href="/location/{location.country.slug}/{location.slug}" sapper-noscroll> <a href="/location/{location.country.slug}/{location.slug}" sapper-noscroll>
{location.name}, {location.country.name} {city ? city : location.name}, {location.country.name}
</a> </a>
{:else} {:else}
{location.name}, {location.country.name} {city ? city : location.name}, {location.country.name}
{/if} {/if}
</p> </p>
</div> </div>

2
src/routes/viewer/[country]/[place]/[photo].svelte
View File

@@ -63,7 +63,6 @@
let windowWidth let windowWidth
let gotoLink let gotoLink
let pageTitle
let currentPhoto = photos.find(photo => photo.slug === $page.params.photo) let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
@@ -125,6 +124,7 @@
</a> </a>
{/if} {/if}
</div> </div>
<a href="/" bind:this={gotoLink} aria-hidden="true" hidden class="hidden" sapper-noscroll>&nbsp;</a> <a href="/" bind:this={gotoLink} aria-hidden="true" hidden class="hidden" sapper-noscroll>&nbsp;</a>
</div> </div>