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

Make PostCard content dynamic

Browse Source
This commit is contained in:
Félix Péault
2021-10-14 23:19:09 +02:00
parent 2ed411a94e
commit 2ea5cbecda
2 changed files with 40 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/molecules/PostCard.svelte
View File

@@ -1,31 +1,31 @@
<script lang="ts">
import Image from '$components/atoms/Image.svelte';
import Image from '$components/atoms/Image.svelte'
export let street: string
export let location: string
export let region: string = undefined
export let country: string
export let flagId: string
</script>
<div class="post-card">
<div class="wrap">
<div class="post-card__left">
<h3 class="post-card__country">
<span>Houses of</span><br>
<strong class="title-country__purple">{country}</strong>
</h3>
</div>
<div class="post-card__right">
<div class="post-card__stamp">
<div class="frame">
<img src="/images/icons/stamp.svg" width="32" height="42" alt="">
<img src="/images/icons/stamp.svg" width="32" height="42" alt="Stamp">
</div>
<Image class="flag" id="5a5bc9a1-9401-4e2f-88f2-ffd6c05acefb" width={32} height={32} alt="country" />
<Image class="flag" id={flagId} width={32} height={32} alt="Flag of {country}" />
</div>
<h3 class="post-card__country">
<span>Houses of <br></span>
<strong class="title-country__purple">France</strong>
</h3>
<div class="post-card__border"></div>
<ul class="post-card__address">
<li>
<p>Rue Clerisseau</p>
</li>
<li>
<p>Nimes, Occitanie</p>
</li>
<li>
<p>France</p>
</li>
<li>{street}</li>
<li>{location}{region ? `, ${region}` : ''}</li>
<li>{country}</li>
</ul>
</div>
</div>

26
src/routes/photos.svelte
View File

@@ -120,7 +120,13 @@
}
location {
slug
country { slug }
name
region
country {
slug
name
flag { id }
}
}
}
}
@@ -250,7 +256,7 @@
<div class="grid container">
{#if photos.length}
<div class="photos__grid">
{#each photos as { image, slug, location }}
{#each photos as { image, slug, location, title }}
<div class="photo shadow-photo">
<a href="/{location.country.slug}/{location.slug}/{slug}">
<Image
@@ -263,7 +269,13 @@
ratio={1.5}
alt={image.title}
/>
<PostCard />
<PostCard
street={title}
location={location.name}
region={location.region}
country={location.country.name}
flagId={location.country.flag.id}
/>
</a>
</div>
{/each}
@@ -338,7 +350,13 @@
}
location {
slug
country { slug }
name
region
country {
slug
name
flag { id }
}
}
date_created
}