From 450de171e64a3739f997308ac09cb22ec57525a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Fri, 14 Feb 2020 12:37:35 +0100 Subject: [PATCH] Code optimization and fixes --- src/atoms/ToggleLayout.svelte | 6 ++--- src/molecules/Location.svelte | 4 ++- src/organisms/Carousel.svelte | 26 ++++++++++--------- .../location/[country]/[location].svelte | 2 +- .../[country]/[location]/[photo].svelte | 18 ++++++++----- src/style/_base.scss | 1 + src/style/molecules/_footer.scss | 6 ++--- src/style/organisms/_carousel.scss | 9 ++++--- src/style/organisms/_photos.scss | 5 +++- src/style/pages/_homepage.scss | 7 ++--- src/style/pages/_viewer.scss | 7 +++++ src/style/tools/_helpers.scss | 8 +++--- 12 files changed, 61 insertions(+), 38 deletions(-) diff --git a/src/atoms/ToggleLayout.svelte b/src/atoms/ToggleLayout.svelte index bde0e4f..c85e7e8 100644 --- a/src/atoms/ToggleLayout.svelte +++ b/src/atoms/ToggleLayout.svelte @@ -35,12 +35,12 @@ case 'grid': grid.classList.add(layoutGridClass) grid.classList.remove(layoutListClass) - break; + break case 'list': grid.classList.add(layoutListClass) grid.classList.remove(layoutGridClass) - break; - default: break; + break + default: break } // Animate the active pill diff --git a/src/molecules/Location.svelte b/src/molecules/Location.svelte index bfee7f3..a51a70c 100644 --- a/src/molecules/Location.svelte +++ b/src/molecules/Location.svelte @@ -2,11 +2,13 @@ export let name export let slug export let country + + const src = country.flag.full_url
- {'Flag + {'Flag

{name}

{country.name}

 diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte index 1899a23..8c5015a 100644 --- a/src/organisms/Carousel.svelte +++ b/src/organisms/Carousel.svelte @@ -23,12 +23,17 @@ const button = event.currentTarget.querySelector('button') const photoActive = document.querySelector('.gallery .active') const photoToHover = (to === 'prev') ? photoActive.previousSibling : photoActive.nextSibling - if (event.type === 'mouseenter') { - photoToHover.classList.add('hover') - button.focus() - } else { - photoToHover.classList.remove('hover') - button.blur() + + switch (event.type) { + case 'mouseenter': + photoToHover.classList.add('hover') + button.focus() + break + case 'mouseleave': + photoToHover.classList.remove('hover') + button.blur() + break + default: break } } @@ -87,13 +92,10 @@
- +

Street Name, Suburb

+

Region, Country

- + {#if viewer}

Apr 6th, 2019

{/if} diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[location].svelte index 6cc31a9..a0c8e98 100644 --- a/src/routes/location/[country]/[location].svelte +++ b/src/routes/location/[country]/[location].svelte @@ -90,7 +90,7 @@

{$site.description}

- Houses on:eventname + Houses Of diff --git a/src/routes/viewer/[country]/[location]/[photo].svelte b/src/routes/viewer/[country]/[location]/[photo].svelte index 093d304..ea55ad2 100644 --- a/src/routes/viewer/[country]/[location]/[photo].svelte +++ b/src/routes/viewer/[country]/[location]/[photo].svelte @@ -79,12 +79,18 @@ const keyboardNav = event => { const keyCode = event.keyCode - // Previous - if ([37,80].includes(keyCode)) document.getElementById('photo_prev').click() - // Next - else if ([39,78,32].includes(keyCode)) document.getElementById('photo_next').click() - // Close - else if ([27,67].includes(keyCode)) document.getElementById('photo_close').click() + switch (event.keyCode) { + case 37: case 80: case 74: + document.querySelector('.carousel__controls--area.prev').click() + break + case 39: case 78: case 75: + document.querySelector('.carousel__controls--area.next').click() + break + case 27: case 67: + document.getElementById('photo_close').click() + break + default: break + } } diff --git a/src/style/_base.scss b/src/style/_base.scss index 44efc09..6b391a1 100644 --- a/src/style/_base.scss +++ b/src/style/_base.scss @@ -2,6 +2,7 @@ html { font: #{$base-font-size} $font-sans; color: $color-text; scroll-behavior: smooth; + min-width: 320px; @media screen and (prefers-reduced-motion: reduce) { scroll-behavior: auto; diff --git a/src/style/molecules/_footer.scss b/src/style/molecules/_footer.scss index 797cdd6..a4470f3 100644 --- a/src/style/molecules/_footer.scss +++ b/src/style/molecules/_footer.scss @@ -23,7 +23,7 @@ &__left { display: flex; justify-content: center; - margin-bottom: 32px; + margin-bottom: 40px; @include breakpoint (sm) { margin: 0; @@ -41,7 +41,7 @@ // Instagram .instagram { - margin-bottom: 20px; + margin-bottom: 32px; @include breakpoint (sm) { margin: 0 40px 0 0; @@ -72,7 +72,7 @@ img { display: inline-block; - margin: 12px 0 0 12px; + margin: 8px 0 0 12px; @include breakpoint (sm) { margin-left: 16px; diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss index 6315a07..c718c1b 100644 --- a/src/style/organisms/_carousel.scss +++ b/src/style/organisms/_carousel.scss @@ -33,10 +33,11 @@ // Photo &--photo { - position: absolute; - background-color: $color-primary; overflow: hidden; - box-shadow: 0 16px 56px rgba(#2E025C, 0.7); + position: absolute; + display: block; + background-color: $color-primary; + box-shadow: 0 15px 60px rgba(#000, 0.3); transition: transform 600ms $ease-quart; @include breakpoint (sm) { @@ -47,7 +48,7 @@ display: block; height: auto; width: 100%; - opacity: 0.55; + opacity: 0.6; transition: opacity 600ms $ease-quart; } diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss index 054f909..13436ee 100644 --- a/src/style/organisms/_photos.scss +++ b/src/style/organisms/_photos.scss @@ -143,8 +143,11 @@ .photo { display: flex; flex-direction: column-reverse; - margin-bottom: 72px; + margin-bottom: 40px; + @include breakpoint (m) { + margin-bottom: pxVW(176); + } @include breakpoint (md) { margin-bottom: 0; } diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index 6033f7d..8af10b9 100644 --- a/src/style/pages/_homepage.scss +++ b/src/style/pages/_homepage.scss @@ -50,9 +50,10 @@ // Gallery .gallery { - &__images--photo { - background-color: $color-secondary; - box-shadow: 0 15px 60px rgba(#000, 0.3); + &__images { + &--photo { + background-color: $color-secondary; + } } } } diff --git a/src/style/pages/_viewer.scss b/src/style/pages/_viewer.scss index 14e5279..f433359 100644 --- a/src/style/pages/_viewer.scss +++ b/src/style/pages/_viewer.scss @@ -79,6 +79,13 @@ .gallery { left: 0; right: 0; + + // Specific box shadow for images + &__images { + &--photo { + box-shadow: 0 16px pxVW(40) rgba(#2E025C, 0.4); + } + } } // Information diff --git a/src/style/tools/_helpers.scss b/src/style/tools/_helpers.scss index e9be692..1f026b6 100644 --- a/src/style/tools/_helpers.scss +++ b/src/style/tools/_helpers.scss @@ -24,17 +24,17 @@ .wrap { max-width: 1648px; margin: 0 auto; - padding: 0 24px; + padding: 0 16px; + @include breakpoint (m) { + padding: 0 24px; + } @include breakpoint (sm) { padding: 0 60px; } @include breakpoint (md) { padding: 0 128px; } - @include breakpoint (xxl) { - // padding: 0 48px; - } } // Wrapper (inside and more spaced)