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

Reorganise functions, Use custom Format Date/Relative Time over dayjs

Browse Source
This commit is contained in:
Félix Péault
2020-03-06 14:14:17 +01:00
parent 46488146d0
commit adf2563eb8
11 changed files with 128 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/molecules/Photo.svelte
View File

@@ -3,13 +3,10 @@
import { fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import { site, currentLocation } from '../utils/store'
import * as fn from '../utils/functions'
// Dependencies
import * as basicScroll from 'basicscroll'
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
dayjs.extend(advancedFormat)
import { getThumbnail, formatDate } from '../utils/functions'
// Props and variables
export let photo
@@ -66,28 +63,28 @@
<a href={photoHref} sapper-noscroll>
<picture class="photo__picture">
{#if layout === 'list'}
<source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
<source media="(min-width: 768px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
<source media="(min-width: 500px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
<source media="(min-width: 300px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
<source media="(min-width: 992px)" data-srcset={getThumbnail(photo.image.private_hash, 1300)}>
<source media="(min-width: 768px)" data-srcset={getThumbnail(photo.image.private_hash, 992)}>
<source media="(min-width: 500px)" data-srcset={getThumbnail(photo.image.private_hash, 650)}>
<source media="(min-width: 300px)" data-srcset={getThumbnail(photo.image.private_hash, 400)}>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
data-src="{fn.getThumbnail(photo.image.private_hash, 900)}"
data-src="{getThumbnail(photo.image.private_hash, 900)}"
width={defaultWidth} height={defaultHeight}
alt={imgAlt}
class="lazyload"
data-aos="scale-down-fade-in" data-aos-once="true">
{:else}
<source media="(min-width: 992px)" srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
<source media="(min-width: 768px)" srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
<source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
<source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
<img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
<source media="(min-width: 992px)" srcset={getThumbnail(photo.image.private_hash, 1300)}>
<source media="(min-width: 768px)" srcset={getThumbnail(photo.image.private_hash, 992)}>
<source media="(min-width: 500px)" srcset={getThumbnail(photo.image.private_hash, 650)}>
<source media="(min-width: 300px)" srcset={getThumbnail(photo.image.private_hash, 400)}>
<img src="{getThumbnail(photo.image.private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
{/if}
</picture>
</a>
<time class="photo__date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
{dayjs(photo.date).format('MMM Do, YYYY')}
<time class="photo__date" datetime={formatDate(photo.date, 'DATETIME')}>
{formatDate(photo.date, 'FULL')}
</time>
<span class="photo__number">{(index < 10 ? '0': '') + index}</span>
</div>