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"> <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> </script>
<div class="post-card"> <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="post-card__stamp">
<div class="frame"> <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> </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> </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"> <ul class="post-card__address">
<li> <li>{street}</li>
<p>Rue Clerisseau</p> <li>{location}{region ? `, ${region}` : ''}</li>
</li> <li>{country}</li>
<li>
<p>Nimes, Occitanie</p>
</li>
<li>
<p>France</p>
</li>
</ul> </ul>
</div> </div>
</div> </div>

26
src/routes/photos.svelte
View File

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