WIP for the locations list

Needs some fixes for the appearing items

src/molecules/Location.svelte

@@ -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>

src/organisms/Locations.svelte

@@ -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}
-        <Location
-            name={location.name}
-            slug={location.slug}
-            country={location.country}
-        />
-    {/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>
+    {#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>
-    </div>
     {/each}
-</div> -->
+    </div>
+</div>

src/style/organisms/_locations.scss

@@ -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);