flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Reorganise functions, Use custom Format Date/Relative Time over dayjs

Browse Source
This commit is contained in:
Félix Péault
2020-03-06 14:14:17 +01:00
parent 46488146d0
commit adf2563eb8
11 changed files with 128 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/organisms/Carousel.svelte
View File

@@ -2,15 +2,10 @@
import { onMount, createEventDispatcher } from 'svelte'
import { stores } from '@sapper/app'
import { currentLocation } from '../utils/store'
import * as fn from '../utils/functions'
import { getThumbnail, formatDate } from '../utils/functions'
const dispatch = createEventDispatcher()
const { page } = stores()
// Dependencies
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
dayjs.extend(advancedFormat)
// Components
import IconArrow from '../atoms/IconArrow'
@@ -147,11 +142,11 @@
class:gallery__photo--active={photo === currentPhoto}
class:gallery__photo--next={photo === nextPhoto}
>
<source media="(min-width: 968px)" srcset={fn.getThumbnail(photo.image.private_hash, 1400)}>
<source media="(min-width: 800px)" srcset={fn.getThumbnail(photo.image.private_hash, 900)}>
<source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 600)}>
<source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
<img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {photo.location.name}, {photo.location.country.name}">
<source media="(min-width: 968px)" srcset={getThumbnail(photo.image.private_hash, 1400)}>
<source media="(min-width: 800px)" srcset={getThumbnail(photo.image.private_hash, 900)}>
<source media="(min-width: 500px)" srcset={getThumbnail(photo.image.private_hash, 600)}>
<source media="(min-width: 300px)" srcset={getThumbnail(photo.image.private_hash, 400)}>
<img src="{getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {photo.location.name}, {photo.location.country.name}">
</picture>
{/each}
</div>
@@ -201,7 +196,7 @@
{/each}
</div>
{#if viewer}
<p class="carousel__date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
<p class="carousel__date">{formatDate(currentPhoto.date, 'FULL')}</p>
{/if}
</div>

4
src/organisms/Locations.svelte
View File

@@ -3,10 +3,10 @@
import { flip } from 'svelte/animate'
import { crossfadeReceive, crossfadeSend } from '../utils/animations'
import { locations, countries, continents } from '../utils/store'
import * as fn from '../utils/functions'
// Dependencies
import AOS from 'aos'
import { throttle } from '../utils/functions'
// Components
import Button from '../atoms/Button'
@@ -25,7 +25,7 @@
// Filter by continent
// Detects if click difference if too short with a throttled function
const toggleContinents = fn.throttle((event, continent) => {
const toggleContinents = throttle((event, continent) => {
continentsFiltered = (!continent) ? [...continentsToDisplay] : [continent]
}, transitionDuration)