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

Use SVG icons from global symbols

Browse Source 
Allow to change color and avoid code duplication
This commit is contained in:
Félix Péault
2021-11-10 22:57:50 +01:00
parent f1be0b719e
commit 73c9e80a21
20 changed files with 90 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/routes/[country]/[location]/[photo].svelte
View File

@@ -1,11 +1,12 @@
<script lang="ts">
import { page } from '$app/stores'
import { getAssetUrlKey } from '$utils/helpers'
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat.js'
import { getAssetUrlKey } from '$utils/helpers'
// Components
import Metas from '$components/Metas.svelte'
import Image from '$components/atoms/Image.svelte'
import Icon from '$components/atoms/Icon.svelte'
import IconArrow from '$components/atoms/IconArrow.svelte'
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
@@ -20,13 +21,12 @@
$: isLast = currentIndex === totalPhotos - 1
$: isFirst = currentIndex === 0
// Define current photo
// $: currentPhoto = photos.find((photo: any) => photo.slug === $page.params.photo)
$: currentPhoto = photos[photos.findIndex((photo: any) => photo.slug === $page.params.photo)]
// Reactive photos showns
$: shownPhotos = [
// Reactive photos
$: displayedPhotos = [
...photos.filter((photo: any, index: number) => {
// Grab the 4 prev and next photos depending the index
console.log(index)
// Grab the 4 prev and next photos depending on the index
// console.log(index)
// console.log(index >= currentIndex - 4 && index < currentIndex + 4)
})
]
@@ -120,7 +120,7 @@
<h1 class="title-medium">{currentPhoto.title}</h1>
<div class="detail text-date">
<img src="/images/icons/map-pin.svg" width={16} height={18} alt="Map icon"><span>{location.name}, {location.country.name}</span> <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
<Icon class="icon" icon="map-pin" label="Map pin" /><span>{location.name}, {location.country.name}</span> <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
</div>
</div>
</div>