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

Photo: Tweak reveal animations and fix horizontal scroll

Browse Source 
- Photo number doesn't jumps anymore (now reveals based on photo not the number)
- Properly reveal title locations lines
- Optimize code
This commit is contained in:
Félix Péault
2020-04-06 12:14:48 +02:00
parent bd9b91f480
commit 60fdf02112
4 changed files with 67 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/molecules/Photo.svelte
View File

@@ -37,8 +37,11 @@
<div class="photo__location wrap">
<div class="wrapper">
<h2 class="title-location">
<span>{name.split(', ')[0]},</span>
<span>{name.split(', ')[1]}</span>
{#each name.split(', ') as line, i}
<span class="line">
<span>{name.split(', ')[i]},</span>
</span>
{/each}
</h2>
<p class="style-caps">{location.region}, {location.country.name}</p>
</div>
@@ -48,20 +51,15 @@
<div class="align">
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}" sapper-noscroll>
<picture class="photo__picture">
<source media="(min-width: 992px)" data-srcset={getThumbnail(private_hash, 1300)}>
<source media="(min-width: 992px)" data-srcset={getThumbnail(private_hash, 1200)}>
<source media="(min-width: 768px)" data-srcset={getThumbnail(private_hash, 992)}>
<source media="(min-width: 500px)" data-srcset={getThumbnail(private_hash, 650)}>
<source media="(min-width: 300px)" data-srcset={getThumbnail(private_hash, 400)}>
{#if layout === 'list'}
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
alt={imgAlt}
<img src={layout === 'list' ? 'data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' : getThumbnail(private_hash, 900)}
width={defaultWidth} height={defaultHeight}
class="lazyload">
{:else}
<img src="{getThumbnail(private_hash, 900)}"
alt={imgAlt}
width={defaultWidth} height={defaultHeight}>
{/if}
alt={imgAlt}
class:lazyload={layout === 'list'}
/>
</picture>
</a>
<time class="photo__date" datetime={formatDate(date, 'DATETIME')}>