Félix Péault
7e0d1e33fb
- Use Svelte/Sapper native if and transitions to show either the page content or the loader, then load each page animationIn - Code is safe on SSR side, using process.browser on this if - The <main> element is on position absolute to fade nicely the different pages - Code cleaning
20 lines
531 B
Svelte
20 lines
531 B
Svelte
<script>
|
|
// Props
|
|
export let location
|
|
|
|
// Variables
|
|
const { name, slug, country } = location
|
|
</script>
|
|
|
|
<div class="location">
|
|
<a href="/location/{country.slug}/{slug}" rel="prefetch">
|
|
<img src={country.flag.full_url} alt="Flag of {country.name}">
|
|
<div class="anim-mask mask-city">
|
|
<h3 class="location__city">{name}</h3>
|
|
</div>
|
|
<div class="anim-mask mask-country">
|
|
<p class="location__country style-caps">{country.name}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|