From 720ca69902f195e29f41d02a3674ff6d58c7de82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Wed, 6 May 2020 23:06:26 +0200 Subject: [PATCH] Add a newsletter subscription form below locations - One component used below Locations list and in the Pagination when all photos has been loaded - Keep the subscribe page with the column display --- src/molecules/Newsletter.svelte | 46 ------------- src/molecules/NewsletterForm.svelte | 41 ++++++++++++ src/organisms/Locations.svelte | 8 +-- src/organisms/Newsletter.svelte | 22 +++++++ src/organisms/Pagination.svelte | 7 +- src/routes/subscribe.svelte | 12 +++- src/style/_variables.scss | 1 + src/style/atoms/_inputs.scss | 40 +++++++++++ src/style/layouts/_explore.scss | 1 - src/style/molecules/_form.scss | 44 +------------ src/style/molecules/_newsletter.scss | 99 +++++++++++++++++++++------- src/style/organisms/_footer.scss | 4 ++ src/style/organisms/_locations.scss | 6 +- src/style/organisms/_pagination.scss | 23 ++++--- src/style/organisms/_photos.scss | 10 ++- src/style/style.scss | 1 + 16 files changed, 228 insertions(+), 137 deletions(-) delete mode 100644 src/molecules/Newsletter.svelte create mode 100644 src/molecules/NewsletterForm.svelte create mode 100644 src/organisms/Newsletter.svelte create mode 100644 src/style/atoms/_inputs.scss diff --git a/src/molecules/Newsletter.svelte b/src/molecules/Newsletter.svelte deleted file mode 100644 index 1bff26b..0000000 --- a/src/molecules/Newsletter.svelte +++ /dev/null @@ -1,46 +0,0 @@ - - -
- - -
- {#if title} -

- -

- {/if} - - - - - - - - -
-
\ No newline at end of file diff --git a/src/molecules/NewsletterForm.svelte b/src/molecules/NewsletterForm.svelte new file mode 100644 index 0000000..ad4a834 --- /dev/null +++ b/src/molecules/NewsletterForm.svelte @@ -0,0 +1,41 @@ + + +
+ {#if title} +

+ +

+ {/if} + + + + + + + + +
\ No newline at end of file diff --git a/src/organisms/Locations.svelte b/src/organisms/Locations.svelte index 73658cf..01905d5 100644 --- a/src/organisms/Locations.svelte +++ b/src/organisms/Locations.svelte @@ -7,6 +7,7 @@ // Components import Button from 'atoms/Button' import Location from 'molecules/Location' + import Newsletter from 'organisms/Newsletter' // Animations import { animateIn } from 'animations/Locations' @@ -58,12 +59,11 @@
{#each filteredLocations as location (location.id)} -
+
{/each}
+ + \ No newline at end of file diff --git a/src/organisms/Newsletter.svelte b/src/organisms/Newsletter.svelte new file mode 100644 index 0000000..bf25df1 --- /dev/null +++ b/src/organisms/Newsletter.svelte @@ -0,0 +1,22 @@ + + + \ No newline at end of file diff --git a/src/organisms/Pagination.svelte b/src/organisms/Pagination.svelte index 5b10434..7667bcf 100644 --- a/src/organisms/Pagination.svelte +++ b/src/organisms/Pagination.svelte @@ -2,7 +2,7 @@ import { onMount, createEventDispatcher } from 'svelte' import { site, currentLocation } from 'utils/store' // Components - import Newsletter from 'molecules/Newsletter' + import Newsletter from 'organisms/Newsletter' // Props export let photos export let paginatedPhotos @@ -58,12 +58,9 @@ {:else if $currentLocation}
-

That's all folks!

-
{/if} diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte index e3f608e..af93d87 100644 --- a/src/routes/subscribe.svelte +++ b/src/routes/subscribe.svelte @@ -9,7 +9,7 @@ import TitleSite from 'atoms/TitleSite' import LinkTranslate from 'atoms/LinkTranslate' import InteractiveGlobe from 'molecules/InteractiveGlobe' - import Newsletter from 'molecules/Newsletter' + import NewsletterForm from 'molecules/NewsletterForm' import Footer from 'organisms/Footer' import SocialMetas from 'utils/SocialMetas' // Animations @@ -53,7 +53,15 @@ - + {#if process.browser} diff --git a/src/style/_variables.scss b/src/style/_variables.scss index 3271a3c..95cbfb6 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -1,5 +1,6 @@ // Colors $color-primary: #3C0576; +$color-primary-dark: #36046A; $color-primary-darker: #2D0458; $color-secondary: #FF6C89; $color-secondary-light: #FFB3C2; diff --git a/src/style/atoms/_inputs.scss b/src/style/atoms/_inputs.scss new file mode 100644 index 0000000..24e3adb --- /dev/null +++ b/src/style/atoms/_inputs.scss @@ -0,0 +1,40 @@ +// Text input +.input__text { + position: relative; + display: block; + width: 100%; + height: 48px; + padding: 0 24px; + color: #fff; + font-size: rem(16px); + font-family: $font-sans-light; + border: 2px solid rgba($color-secondary, 0.6); + border-radius: 50vh; + transition: border 300ms $ease-quart; + background: none; + outline: none; + + @include breakpoint (sm) { + font-size: rem(18px); + height: 64px; + padding: 0 32px; + } + + // States + &::placeholder { + color: #fff; + opacity: 0.75; + transition: all 300ms $ease-quart; + } + &:focus { + @extend %input__text--active; + } +} + +%input__text--active { + border-color: $color-secondary; + + &::placeholder { + opacity: 1; + } +} \ No newline at end of file diff --git a/src/style/layouts/_explore.scss b/src/style/layouts/_explore.scss index 69fb866..3d1a33b 100644 --- a/src/style/layouts/_explore.scss +++ b/src/style/layouts/_explore.scss @@ -21,6 +21,5 @@ position: relative; z-index: 3; margin-top: 72px; - margin-bottom: 72px; } } diff --git a/src/style/molecules/_form.scss b/src/style/molecules/_form.scss index 037ad9a..0d3bd60 100644 --- a/src/style/molecules/_form.scss +++ b/src/style/molecules/_form.scss @@ -36,8 +36,9 @@ /* - ** Light version + ** Variants */ + // Light version &--light { // Text input .input__text { @@ -46,45 +47,4 @@ } } } -} - -// Text input -.input__text { - position: relative; - display: block; - width: 100%; - height: 48px; - padding: 0 24px; - color: #fff; - font-size: rem(16px); - font-family: $font-sans-light; - border: 2px solid rgba($color-secondary, 0.6); - border-radius: 50vh; - transition: border 300ms $ease-quart; - background: none; - outline: none; - - @include breakpoint (sm) { - font-size: rem(18px); - height: 64px; - padding: 0 32px; - } - - // States - &::placeholder { - color: #fff; - opacity: 0.75; - transition: all 300ms $ease-quart; - } - &:focus { - @extend %input__text--active; - } -} - -%input__text--active { - border-color: $color-secondary; - - &::placeholder { - opacity: 1; - } } \ No newline at end of file diff --git a/src/style/molecules/_newsletter.scss b/src/style/molecules/_newsletter.scss index a3fd3fe..4d43ec3 100644 --- a/src/style/molecules/_newsletter.scss +++ b/src/style/molecules/_newsletter.scss @@ -1,58 +1,109 @@ // Newsletter .newsletter { - max-width: 360px; - margin: 0 auto; - text-align: center; + background-color: $color-primary-dark; + padding: 56px 0; @include breakpoint (sm) { - max-width: 444px; + padding: 96px 0; + } + + .wrapper { + @include breakpoint (md) { + display: flex; + justify-content: space-between; + } } - // Title h2 { - margin-bottom: 40px; color: $color-secondary; } // Text &__text { - margin-bottom: 72px; + max-width: 400px; + margin: 0 auto 32px; @include breakpoint (sm) { - margin-bottom: 96px; + margin-bottom: 40px; + } + @include breakpoint (md) { + margin-left: 0; + margin-right: 48px; + margin-bottom: 0; + text-align: left; + } + + h2 { + margin-bottom: 16px; + + @include breakpoint (md) { + text-align: left; + } } } // Form .form { + min-width: 270px; + max-width: 320px; + margin: 0 auto; - } + @include breakpoint (md) { + min-width: 320px; + max-width: 440px; + margin: 48px 0 0; + } - // Notice - &__notice { - margin-top: 32px; - } - - - /* - ** Small version - */ - &--small { - .newsletter__text { - max-width: 344px; - margin-bottom: 32px; + // Title (if existing) + h2 { + margin-bottom: 24px; @include breakpoint (sm) { - margin-bottom: 48px; + margin-bottom: 40px; } } } + // Notice + &__notice { + margin-top: 16px; + text-align: center; + } + /* - ** Light version + ** Variants */ + // Centered column mode + &--column { + max-width: 360px; + margin: 0 auto; + padding: 0; + background: none; + + @include breakpoint (sm) { + max-width: 444px; + } + + // Text + .newsletter__text { + max-width: 440px; + margin: 0 0 48px; + text-align: center; + + @include breakpoint (sm) { + margin-bottom: 72px; + } + @include breakpoint (md) { + margin-bottom: 96px; + } + } + } + + // Light version &--light { + background: none; + .newsletter__notice { p { color: rgba($color-text, 0.5); diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss index 99f4120..da8c78d 100644 --- a/src/style/organisms/_footer.scss +++ b/src/style/organisms/_footer.scss @@ -61,6 +61,10 @@ li { margin-right: 20px; + + &:last-child { + margin-right: 0; + } } a { display: block; diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss index 36d762f..141fa0e 100644 --- a/src/style/organisms/_locations.scss +++ b/src/style/organisms/_locations.scss @@ -1,10 +1,10 @@ .browse { width: 100%; overflow: hidden; + margin-bottom: 56px; @include breakpoint (sm) { margin-top: 120px; - margin-bottom: 52px; } // Description @@ -50,7 +50,7 @@ grid-row-gap: pxVW(96); min-height: 200px; margin-top: 112px; - margin-bottom: pxVW(120); + margin-bottom: pxVW(72); } @include breakpoint (xl) { grid-column-gap: 96px; @@ -58,7 +58,7 @@ max-width: 1024px; margin-left: auto; margin-right: auto; - margin-bottom: 184px; + margin-bottom: 72px; // To apply when having 4 locations: // grid-template-columns: repeat(4, 1fr); diff --git a/src/style/organisms/_pagination.scss b/src/style/organisms/_pagination.scss index 820b8e0..3abd7ed 100644 --- a/src/style/organisms/_pagination.scss +++ b/src/style/organisms/_pagination.scss @@ -99,16 +99,23 @@ // Message &__message { - h3 { - font-family: $font-serif; - font-size: rem(32px); - color: $color-secondary; - margin-bottom: 16px; + // Newsletter + .newsletter { + margin: 0; + padding: 0; @include breakpoint (sm) { - margin-bottom: 24px; - font-size: rem(40px); + padding: 24px 0 0; + } + + // Title + h2 { + font-size: rem(32px); + + @include breakpoint (md) { + font-size: rem(40px); + } } } } -} +} \ No newline at end of file diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss index 9182e4e..462b40b 100644 --- a/src/style/organisms/_photos.scss +++ b/src/style/organisms/_photos.scss @@ -74,6 +74,10 @@ @include breakpoint (sm) { padding-bottom: 120px; + + &:last-child { + padding-bottom: 0; + } } // Even photos @@ -129,14 +133,16 @@ margin-top: 24px; @include breakpoint (sm) { - margin-top: -184px; - padding-top: pxVW(224); + margin-top: -64px; + padding-top: pxVW(240); + padding-bottom: pxVW(120); } @include breakpoint (md) { padding-top: pxVW(200); } @include breakpoint (xl) { padding-top: 200px; + padding-bottom: 120px; } } } diff --git a/src/style/style.scss b/src/style/style.scss index c77e343..357fd5d 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -23,6 +23,7 @@ @import "atoms/switcher"; @import "atoms/counter"; @import "atoms/badge"; +@import "atoms/inputs"; // Molecules @import "molecules/location";