WIP React > Svelte
Put most of the developed design into Svelte
This commit is contained in:
@@ -1,76 +0,0 @@
|
||||
<script context="module">
|
||||
import Shuffle from 'shufflejs'
|
||||
</script>
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { continents, locations } from '../store'
|
||||
import { zoomFadeIn, zoomFadeOut } from '../animations'
|
||||
|
||||
|
||||
// Define continents to be show
|
||||
let continentsShow = []
|
||||
$continents.forEach((c, i) => {
|
||||
continentsShow[i] = {
|
||||
id: c.id,
|
||||
show: c.countries ? true : false
|
||||
}
|
||||
})
|
||||
|
||||
let filterLocations
|
||||
onMount(() => {
|
||||
filterLocations = new Shuffle(document.getElementById('locations_list'), {
|
||||
itemSelector: '.column',
|
||||
sizer: '#continents',
|
||||
speed: 400,
|
||||
staggerAmount: 50
|
||||
})
|
||||
})
|
||||
|
||||
// On click on continents
|
||||
const toggleContinents = (event, continent = '') => {
|
||||
// Change the filter
|
||||
filterLocations.filter(continent.id)
|
||||
|
||||
// Change active classes
|
||||
const continentsList = [...event.target.parentNode.children]
|
||||
continentsList.forEach(c => c.classList.remove('is-danger'))
|
||||
event.target.classList.add('is-danger')
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="buttons is-centered" id="continents">
|
||||
<button class="button is-rounded is-danger" on:click="{(e) => toggleContinents(e)}">All</button>
|
||||
{#each $continents as continent, i}
|
||||
{#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>
|
||||
<!-- {#if (location.photos.length > 0)}
|
||||
{location.photos.length} {(location.photos.length > 1) ? 'photos' : 'photo'}
|
||||
{/if} -->
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -1,14 +0,0 @@
|
||||
<script>
|
||||
export let segment;
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a class:selected='{segment === undefined}' href='.'>home</a></li>
|
||||
<li><a class:selected='{segment === "about"}' href='about'>about</a></li>
|
||||
|
||||
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
|
||||
the blog data when we hover over the link or tap it on a touchscreen -->
|
||||
<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -1,40 +0,0 @@
|
||||
<script>
|
||||
// Svelte
|
||||
import { fade, slide } from 'svelte/transition'
|
||||
import { site, currentLocation } from '../store'
|
||||
|
||||
// Dependencies
|
||||
import dayjs from 'dayjs'
|
||||
import advancedFormat from 'dayjs/plugin/advancedFormat'
|
||||
dayjs.extend(advancedFormat)
|
||||
|
||||
export let index
|
||||
export let photo
|
||||
const location = $currentLocation.location
|
||||
|
||||
// Manipulate data
|
||||
const thumbnail = photo.image.data.thumbnails.find(t => t.url.includes('key=large'))
|
||||
index = (index < 10 ? '0' : null) + index
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{thumbnail.url}" alt="{photo.name}, {location.name}, {location.country.name}" width="{thumbnail.width}" height="{thumbnail.height}">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<p class="is-size-5"><strong></strong>
|
||||
<strong>{photo.name}</strong>
|
||||
</p>
|
||||
<p>{location.name}, {location.country.name}</p>
|
||||
</div>
|
||||
|
||||
<footer class="card-footer has-text-grey-light">
|
||||
<span class="card-footer-item">{dayjs(photo.date).format('MMM Do, YYYY')}</span>
|
||||
<span class="card-footer-item">#{index}</span>
|
||||
</footer>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,17 +0,0 @@
|
||||
<script>
|
||||
import { currentLocation } from '../store'
|
||||
|
||||
const locationName = ($currentLocation) ? $currentLocation.location.name : 'World'
|
||||
const locationOf = ($currentLocation) ? 'Of' : 'Of The'
|
||||
</script>
|
||||
|
||||
<div class="switcher switcher--side">
|
||||
<p class="switcher__location">
|
||||
<a href="/">Houses <span class="caps">{locationOf}</span></a> <br>
|
||||
<strong class="name">{locationName}</strong>
|
||||
</p>
|
||||
|
||||
<a href="/choose" class="switcher__icon icon is-medium has-text-danger">
|
||||
<i class="fas fa-exchange-alt fa-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
Reference in New Issue
Block a user