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

Photo in list component

Browse Source
This commit is contained in:
Félix Péault
2019-12-28 13:21:36 +01:00
parent 4b5edc7456
commit 53b76dc41a
1 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Photo.svelte
View File

@@ -1,36 +1,40 @@
<script> <script>
import { slide } from 'svelte/transition' // Svelte
import { fade, slide } from 'svelte/transition'
import { site, currentLocation } from '../store'
// Dependencies
import dayjs from 'dayjs' import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat' import advancedFormat from 'dayjs/plugin/advancedFormat'
import * as fn from '../functions' dayjs.extend(advancedFormat)
export let photo
export let index export let index
export let location export let photo
const location = $currentLocation.location
// Manipulate data // Manipulate data
const thumbnail = photo.image.data.thumbnails.find(t => t.url.includes('key=large')) const thumbnail = photo.image.data.thumbnails.find(t => t.url.includes('key=large'))
index = (index < 10 ? '0' : null) + index index = (index < 10 ? '0' : null) + index
// Format the date
dayjs.extend(advancedFormat)
const date = dayjs(photo.created_on).format('MMM Do, YYYY')
</script> </script>
<div class="card" in:slide out:slide> <div class="card" in:fade out:fade>
<div class="card-image"> <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
<figure class="image is-4by3"> <div class="card-image">
<img src="{thumbnail.url}" alt="{photo.name}, {location.name}, {location.country.name}" width="{thumbnail.width}" height="{thumbnail.height}"> <figure class="image is-4by3">
</figure> <img src="{thumbnail.url}" alt="{photo.name}, {location.name}, {location.country.name}" width="{thumbnail.width}" height="{thumbnail.height}">
</div> </figure>
</div>
<div class="card-content"> <div class="card-content">
<h4 class="title is-4">{photo.name}</h4> <p class="is-size-5"><strong></strong>
<p>{location.name}, {location.country.name}</p> <strong>{photo.name}</strong>
</div> </p>
<p>{location.name}, {location.country.name}</p>
</div>
<footer class="card-footer"> <footer class="card-footer has-text-grey-light">
<span class="card-footer-item">{date}</span> <span class="card-footer-item">{dayjs(photo.date).format('MMM Do, YYYY')}</span>
<span class="card-footer-item">#{index}</span> <span class="card-footer-item">#{index}</span>
</footer> </footer>
</a>
</div> </div>