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

WIP

Browse Source
This commit is contained in:
Félix Péault
2020-02-13 22:24:28 +01:00
parent 9b0c154f61
commit ef23d90eb6
60 changed files with 1665 additions and 930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/molecules/Photo.svelte
View File

@@ -1,6 +1,6 @@
<script>
// Svelte
import { site, currentLocation } from '../store'
import * as fn from '../functions'
// Dependencies
import dayjs from 'dayjs'
@@ -14,9 +14,6 @@
// Shortcut current location
let location
$: location = $currentLocation.location
// Manipulate data
const thumbnail = photo.image.data.thumbnails.find(thumb => thumb.url.includes('key=large'))
</script>
<div class="photo">
@@ -32,40 +29,17 @@
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
<div class="photo__image--img">
<img
src={thumbnail.url}
width={thumbnail.width} height={thumbnail.height}
src="{fn.getThumbnail(photo.image.private_hash, 800)}"
srcset="{fn.getThumbnail(photo.image.private_hash, 1200)} 1200w, {fn.getThumbnail(photo.image.private_hash, 1600)} 1600w"
width="600" height="400"
alt="{photo.name}, {location.region}, {location.country.name}"
>
</div>
<time class="photo__image--date">{dayjs(photo.date).format('MMM Do, YYYY')}</time>
<time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
{dayjs(photo.date).format('MMM Do, YYYY')}
</time>
<span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
</a>
</div>
</div>
</div>
<!-- <div class="card">
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
<div class="card-image">
<figure class="image is-4by3">
<img
src={thumbnail.url}
alt="{`${photo.name}, ${location.name}, ${location.country.name}`}"
width={thumbnail.width} height={thumbnail.height}
>
</figure>
</div>
<div class="card-content">
<p class="is-size-5"><strong></strong>
<strong>{photo.name}</strong>
</p>
<p>{location.name}, {location.country.name}</p>
</div>
<footer class="card-footer has-text-grey-light">
<span class="card-footer-item">{dayjs(photo.date).format('MMM Do, YYYY')}</span>
<span class="card-footer-item">#{(index < 10 ? '0' : '') + index}</span>
</footer>
</a>
</div> -->