WIP for the locations list
Needs some fixes for the appearing items
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
const src = country.flag.full_url
|
||||
</script>
|
||||
|
||||
<div class="location" data-groups='["{country.continent.id}"]'>
|
||||
<div class="location">
|
||||
<a href="/location/{country.slug}/{slug}">
|
||||
<img {src} alt={'Flag of ' + country.name} />
|
||||
<h3 class="location__city">{name}</h3>
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
<script context="module">
|
||||
// import Shuffle from 'shufflejs'
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { flip } from 'svelte/animate'
|
||||
import { crossfade } from 'svelte/transition'
|
||||
import { quintOut } from 'svelte/easing'
|
||||
import { locations, countries, continents } from '../store'
|
||||
// import { zoomFadeIn, zoomFadeOut } from '../animations'
|
||||
|
||||
// Components
|
||||
import Button from '../atoms/Button'
|
||||
@@ -13,39 +11,40 @@
|
||||
|
||||
// Variables
|
||||
let filterLocations
|
||||
let continentsToShow = []
|
||||
let continentsToDisplay = []
|
||||
let continentsFiltered = []
|
||||
$: filteredLocations = $locations.filter(location => continentsFiltered.includes(location.country.continent))
|
||||
|
||||
// Define continents to show
|
||||
$continents.forEach(cont => !!cont.countries && continentsToShow.push(cont))
|
||||
$continents.forEach(cont => !!cont.countries && continentsToDisplay.push(cont))
|
||||
continentsFiltered = [...continentsToDisplay]
|
||||
|
||||
// On click on continents
|
||||
const toggleContinents = (event, continent) => {
|
||||
// Change the filter
|
||||
// filterLocations.filter(continent)
|
||||
// Filter by continent
|
||||
const toggleContinents = (event, continent) => continentsFiltered = (!continent) ? [...continentsToDisplay] : [continent]
|
||||
|
||||
// Change active classes
|
||||
document.querySelectorAll('#continents button').forEach(button => {
|
||||
if (!continent) {
|
||||
button.classList.remove('disabled')
|
||||
} else {
|
||||
button.classList.add('disabled')
|
||||
event.currentTarget.querySelector('button').classList.remove('disabled')
|
||||
// Crossfade animation
|
||||
const [send, receive] = crossfade({
|
||||
duration: d => Math.sqrt(d * 200),
|
||||
fallback(node, params) {
|
||||
const style = getComputedStyle(node)
|
||||
const transform = style.transform === 'none' ? '' : style.transform
|
||||
return {
|
||||
duration: 600,
|
||||
easing: quintOut,
|
||||
css: t => `
|
||||
transform: ${transform} scale(${t});
|
||||
opacity: ${t}
|
||||
`
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Run code on browser only
|
||||
*/
|
||||
onMount(() => {
|
||||
// Create the filterable list of locations
|
||||
// filterLocations = new Shuffle(document.getElementById('continents'), {
|
||||
// itemSelector: '.location',
|
||||
// // sizer: '#locations_list',
|
||||
// speed: 400,
|
||||
// staggerAmount: 50
|
||||
// })
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
@@ -56,57 +55,32 @@
|
||||
</div>
|
||||
|
||||
<ul class="browse__continents" id="continents">
|
||||
{#if continentsToShow.length > 1}
|
||||
{#if continentsToDisplay.length > 1}
|
||||
<li on:click={e => toggleContinents(e)}>
|
||||
<Button type="button" className="button-outline" text="All" />
|
||||
<Button type="button" text="All" className="button-outline {(continentsFiltered.length <= 1) ? 'disabled' : ''}" />
|
||||
</li>
|
||||
{/if}
|
||||
{#each continentsToShow as continent}
|
||||
<li on:click={e => toggleContinents(e, continent.id)}>
|
||||
<Button type="button" className="button-outline" text={continent.name} />
|
||||
{#each continentsToDisplay as continent}
|
||||
<li on:click={e => toggleContinents(e, continent)}>
|
||||
<Button type="button" text={continent.name} className="button-outline {(!continentsFiltered.includes(continent)) ? 'disabled' : ''}" />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div class="browse__locations" id="locations_list">
|
||||
{#each $locations as location}
|
||||
{#each filteredLocations as location (location.id)}
|
||||
<div
|
||||
animate:flip="{{duration: 600}}"
|
||||
in:receive="{{key: location.id}}"
|
||||
out:send="{{key: location.id}}"
|
||||
>
|
||||
<!-- Animation: Grid with auto-min is fucking up the transition -->
|
||||
<Location
|
||||
name={location.name}
|
||||
slug={location.slug}
|
||||
country={location.country}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="buttons is-centered" id="continents">
|
||||
<button class="button is-rounded is-danger" on:click={e => toggleContinents(e)}>All</button>
|
||||
{#each continentsToShow as continent}
|
||||
{#if continent.countries}
|
||||
<button class="button is-rounded is-danger is-outlined" on:click={e => toggleContinents(e, continent)}>{continent.name}</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="columns" id="locations_list">
|
||||
{#each $locations as location}
|
||||
<div class="column is-one-third animate" data-groups='["{location.country.continent.id}"]'>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a class="media" href="/location/{location.country.slug}/{location.slug}">
|
||||
<figure class="media-left">
|
||||
<span class="icon is-medium has-text-danger">
|
||||
<img src={location.country.flag.full_url} alt={location.country.flag.full_url} width="32" height="32">
|
||||
</span>
|
||||
</figure>
|
||||
|
||||
<div class="media-content">
|
||||
<span class="title is-5">{location.name}</span><br>
|
||||
{location.region}, {location.country.name}<br>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div> -->
|
||||
|
||||
@@ -40,7 +40,8 @@
|
||||
margin-top: 112px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: grid;
|
||||
display: flex;
|
||||
// display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-column-gap: 120px;
|
||||
grid-row-gap: pxVW(120);
|
||||
|
||||
Reference in New Issue
Block a user