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

Optimize components

Browse Source 
- Use class attribute over className
- Code cleaning
This commit is contained in:
Félix Péault
2020-02-26 15:49:56 +01:00
parent b084629b37
commit afb087408c
8 changed files with 18 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/atoms/Button.svelte
View File

@@ -1,20 +1,19 @@
<script>
export let href = '#'
export let type = 'a'
export let className = 'button'
export let text = ''
const hasSlot = arguments[1].$$slots !== undefined
</script>
{#if type === 'button'}
<button class={className} class:button-icon={hasSlot} data-text={text} on:click>
<button class={$$props.class ? $$props.class : 'button'} class:button-icon={hasSlot} data-text={text} on:click>
<slot></slot>
<span>{text}</span>
</button>
{:else}
<a {href} class={className} class:button-icon={hasSlot} data-text={text} on:click>
<a {href} class={$$props.class ? $$props.class : 'button'} class:button-icon={hasSlot} data-text={text} on:click>
<slot></slot>
<span>{text}</span>
</a>

3
src/atoms/IconArrow.svelte
View File

@@ -1,11 +1,10 @@
<script>
export let direction = 'left'
export let color = '#fff'
export let className
export let hidden = undefined
</script>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill={color} class={className} aria-hidden={hidden}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill={color} class={$$props.class} aria-hidden={hidden}>
{#if direction === 'left'}
<path d="M.26 10.85l-.06-.11-.08-.15-.05-.16-.04-.13a1.5 1.5 0 010-.6c0-.05.03-.09.04-.13l.05-.16.08-.15.06-.1c.06-.1.13-.17.2-.25L9.2.45c.61-.6 1.61-.6 2.23 0 .62.6.62 1.57 0 2.17L5.4 8.47h13.02c.87 0 1.58.68 1.58 1.53s-.7 1.53-1.58 1.53H5.4l6.03 5.85c.62.6.62 1.57 0 2.17-.3.3-.71.45-1.12.45-.4 0-.8-.15-1.11-.45L.46 11.08a1.5 1.5 0 01-.2-.23"/>
{:else if direction === 'right'}

3
src/atoms/IconCross.svelte
View File

@@ -1,10 +1,9 @@
<script>
export let width = 18
export let color = '#fff'
export let className
export let hidden = undefined
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" {width} fill={color} class={className} aria-hidden={hidden}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" {width} fill={color} class={$$props.class} aria-hidden={hidden}>
<path fill-rule="nonzero" d="M16.63.37c.47.47.5 1.2.09 1.7l-.09.1-6.32 6.33 6.32 6.32a1.28 1.28 0 01-1.7 1.9l-.1-.09-6.33-6.32-6.32 6.32a1.28 1.28 0 01-1.9-1.7l.09-.1L6.69 8.5.37 2.18a1.28 1.28 0 011.7-1.9l.1.09L8.5 6.69 14.82.37c.5-.5 1.31-.5 1.81 0z"/>
</svg>

5
src/molecules/InteractiveGlobe.svelte
View File

@@ -1,6 +1,7 @@
<script>
// Idea: https://codepen.io/edankwan/pen/emqgpr
// Idea 2: ThreeJS globe: https://github.com/vasturiano/globe.gl
// Lead 1: https://codepen.io/edankwan/pen/emqgpr
// Lead 2: ThreeJS globe: https://github.com/vasturiano/globe.gl
// Lead 3: https://www.bypeople.com/css-js-webgl-rotating-3d-globe-effect/
</script>
<div class="globe">

2
src/molecules/Switcher.svelte
View File

@@ -15,7 +15,7 @@
$: {
location = $currentLocation
locationName = location ? location.location.name : 'World'
locationName = location ? location.name : 'World'
locationOf = location ? 'Of' : 'Of The'
}
</script>

10
src/organisms/Carousel.svelte
View File

@@ -138,15 +138,15 @@
<div class="carousel__controls">
<div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={goToPrev}>
<button class="button-control button-control--white dir-left" aria-label="Previous">
<IconArrow direction="left" color="#ff6c89" className="icon" />
<IconArrow direction="left" color="#fff" className="icon" hidden="true" />
<IconArrow direction="left" color="#ff6c89" class="icon" />
<IconArrow direction="left" color="#fff" class="icon" hidden="true" />
</button>
</div>
<div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={goToNext}>
<button class="button-control button-control--white dir-right" aria-label="Next">
<IconArrow direction="right" color="#ff6c89" className="icon" />
<IconArrow direction="right" color="#fff" className="icon" hidden="true" />
<IconArrow direction="right" color="#ff6c89" class="icon" />
<IconArrow direction="right" color="#fff" class="icon" hidden="true" />
</button>
</div>
</div>
@@ -171,7 +171,7 @@
<ol class="carousel__dots">
{#each photos as page, index}
<li class:active={index === 0}>
<button></button>
<button aria-label="Go to image #{index + 1}"></button>
</li>
{/each}
</ol>

4
src/routes/choose.svelte
View File

@@ -38,8 +38,8 @@
<div class="wrap">
<div class="explore__top">
<a href="/" class="button-control button-control--pink dir-left">
<IconArrow direction="left" color="#fff" className="icon" />
<IconArrow direction="left" color="#fff" className="icon" hidden="true" />
<IconArrow direction="left" color="#fff" class="icon" />
<IconArrow direction="left" color="#fff" class="icon" hidden="true" />
</a>
<div class="title-location title-location--inline">

58
src/routes/viewer/[country]/[location]/[photo].svelte
View File

@@ -96,69 +96,17 @@
<div class="buttons">
<a href="/choose" class="button-control button-control--dashed">
<IconGlobe color="#fff" width="18" />
<IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} />
<svg>
<circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
</svg>
</a>
<a href="/location/{location.country.slug}/{location.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
<IconCross color="#fff" width="18" className="icon" />
<IconCross color="#fff" width="18" className="icon" hidden="true" />
<IconCross color="#fff" width="18" class="icon" />
<IconCross color="#fff" width="18" class="icon" hidden="true" />
</a>
</div>
</div>
<Carousel {photos} viewer={true} />
</section>
<!-- <div class="container">
<div class="nav content">
<a href="/choose" class="button is-info" id="photo_close">Change location</a>
<a href="/location/{location.country.slug}/{location.slug}" class="button is-dark" id="photo_close">Close</a>
</div>
<div class="photo">
<div class="image">
<img src={getThumb(viewerPhotos.current, 'large')} srcset="{getThumb(viewerPhotos.current, 'large')} 1x, {getThumb(viewerPhotos.current, 'large-2x')} 2x" alt="viewerPhotos.current.name">
</div>
<div class="details content">
<strong class="is-size-5">{viewerPhotos.current.name}</strong> <br>
<span>{locationFull}</span> <br>
<span>{indexFormated}</span> <br>
<span>{dayjs(viewerPhotos.current.date).format('MMM Do, YYYY')}</span>
</div>
</div>
<div class="section">
<div class="level">
<div class="level-left">
<a href={path + viewerPhotos.prev.slug} id="photo_prev">
<div class="media">
<div class="media-left">
<img src={getThumb(viewerPhotos.prev, 'thumbnail')} alt={viewerPhotos.prev.name} width="200">
</div>
<div class="media-content content">
<strong class="is-size-5">{viewerPhotos.prev.name}</strong> <br>
<span>{locationFull}</span>
</div>
</div>
</a>
</div>
<div class="level-right">
<a href={path + viewerPhotos.next.slug} id="photo_next">
<div class="media">
<div class="media-content content has-text-right">
<strong class="is-size-5">{viewerPhotos.next.name}</strong> <br>
<span>{locationFull}</span>
</div>
<div class="media-right">
<img src={getThumb(viewerPhotos.next, 'thumbnail')} alt={viewerPhotos.next.name} width="200">
</div>
</div>
</a>
</div>
</div>
</div>
</div> -->