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

Readapt the misuse of BEM, Code organization

Browse Source 
- -- is only for a modifier, not a child "child". Use master__child without the parent__ in it to make it more readable.
https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
- Redefine atom design components
This commit is contained in:
Félix Péault
2020-02-29 18:32:32 +01:00
parent 70ce97e9bc
commit 76c8c31c89
17 changed files with 387 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/organisms/Carousel.svelte
View File

@@ -81,7 +81,7 @@
// Hover function
hover = event => {
const button = event.currentTarget.querySelector('button')
const photoActive = document.querySelector('.gallery__images .active')
const photoActive = document.querySelector('.gallery__photo--active')
let photoToHover
if (event.currentTarget.dataset.to === 'prev') {
@@ -122,10 +122,10 @@
<div class="gallery">
<div class="gallery__images">
{#each photos as photo, index}
<picture class="gallery__images--photo"
class:prev={photo === prevPhoto}
class:active={photo === currentPhoto}
class:next={photo === nextPhoto}
<picture class="gallery__photo"
class:gallery__photo--prev={photo === prevPhoto}
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)}>
@@ -137,14 +137,14 @@
</div>
<div class="carousel__controls">
<div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={goToPrev}>
<div class="carousel__area carousel__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" 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}>
<div class="carousel__area carousel__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" class="icon" />
<IconArrow direction="right" color="#fff" class="icon" hidden="true" />
@@ -160,12 +160,12 @@
</div>
<div class="carousel__infos">
<div class="carousel__infos--locations">
<div class="carousel__locations">
{#each photos as photo, index}
<div class="carousel__infos--location style-location"
class:prev={photo === prevPhoto}
class:active={photo === currentPhoto}
class:next={photo === nextPhoto}
<div class="carousel__location style-location"
class:carousel__location--prev={photo === prevPhoto}
class:carousel__location--active={photo === currentPhoto}
class:carousel__location--next={photo === nextPhoto}
>
<p class="street">{photo.name}</p>
<p class="state style-caps style-caps--transparent">
@@ -175,7 +175,7 @@
{/each}
</div>
{#if viewer}
<p class="carousel__infos--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
<p class="carousel__date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
{/if}
</div>