Add Newsletter Component and Page

- Newsletter form on Subscribe page and at the end of the photos
2020-04-28 22:10:29 +02:00
parent 955de7d1e4
commit 6fe4df4189
22 changed files with 478 additions and 137 deletions
--- a/src/atoms/IconArrow.svelte
+++ b/src/atoms/IconArrow.svelte
@@ -1,10 +1,17 @@
 <script>
    export let direction = 'left'
    export let color = '#fff'
+    export let width = 20
    export let hidden = undefined
 </script>

-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 20 20" width="20" height="20" fill={color} class={$$props.class} aria-hidden={hidden}>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 20 20"
+    width={width} height={width}
+    fill={color}
+    class={$$props.class}
+    aria-hidden={hidden}
+    data-width={width}
+>
    {#if direction === 'left'}
    <path fill-rule="nonzero" 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'}
--- a/src/atoms/LinkTranslate.svelte
+++ b/src/atoms/LinkTranslate.svelte
@@ -3,12 +3,13 @@
    export let text = ''
    export let target = null
    export let rel = null
+    export let active = false
    export let noScroll = undefined
 </script>

-<a class="link-translate" {href} {target} {rel} sapper-noscroll={noScroll}>
+<a {href} {target} {rel} class="link-translate" class:is-active={!!active} sapper-noscroll={noScroll}>
    <slot />
    <div class="text" data-text={text}>
        <span>{text}</span>
    </div>
-</a>
+</a>
--- a/src/molecules/Newsletter.svelte
+++ b/src/molecules/Newsletter.svelte
@@ -0,0 +1,46 @@
+<script>
+    import { site } from 'utils/store'
+    // Components
+    import IconArrow from 'atoms/IconArrow'
+
+    // Props
+    export let title = true
+    export let small = false
+    export let brightness = 'dark'
+</script>
+
+<div class="newsletter" class:newsletter--small={small} class:newsletter--light={brightness === 'light'}>
+    <div class="newsletter__text style-description" class:style-description--small={small} class:style-description--dark={brightness === 'light'} class:page__part={!small}>
+        <p>{$site.newsletter_text}</p>
+    </div>
+
+    <form method="POST" action={$site.newsletter_url} target="_blank" id="sib-form" class="form"
+        class:form--light={brightness === 'light'}
+        class:page__part={!small}
+    >
+        {#if title}
+        <h2 class="style-location">
+            <label for="EMAIL">{$site.newsletter_subtitle}</label>
+        </h2>
+        {/if}
+
+        <div class="newsletter__input form__group form__inputgroup">
+            <input type="email" id="EMAIL" name="EMAIL" value="" placeholder="Your email address..." class="input__text" required>
+            <button type="submit" form="sib-form" class="button-control dir-right"
+                class:button-control--pink={brightness === 'light'}
+                class:button-control--lightpink={brightness === 'dark'}
+            >
+                <IconArrow direction="right" color="#fff" class="icon" width="12" />
+                <IconArrow direction="right" color="#fff" class="icon" width="12" hidden="true" />
+            </button>
+        </div>
+
+        <div class="newsletter__notice">
+            <p class="style-notice">No spam, promised!</p>
+        </div>
+
+        <input type="text" name="email_address_check" value="" style="display: none;">
+        <input type="hidden" name="locale" value="en">
+        <input type="hidden" name="html_type" value="simple">
+    </form>
+</div>
--- a/src/organisms/Footer.svelte
+++ b/src/organisms/Footer.svelte
@@ -1,8 +1,12 @@
 <script>
+    import { stores } from '@sapper/app'
    import { site, currentLocation } from 'utils/store'
    // Components
    import LinkTranslate from 'atoms/LinkTranslate'
    import Switcher from 'molecules/Switcher'
+
+    // Variables
+    const { page } = stores()
 </script>

 <footer class="footer">
@@ -16,7 +20,10 @@
                <li>
                    <ul>
                        <li>
-                            <LinkTranslate href="/credits" text="Credits" rel="prefetch" noScroll />
+                            <LinkTranslate href="/subscribe" text="Keep Updated" active={$page.path.includes('subscribe')} rel="prefetch" noScroll />
+                        </li>
+                        <li>
+                            <LinkTranslate href="/credits" text="Credits" active={$page.path.includes('credits')} rel="prefetch" noScroll />
                        </li>
                        {#if $site}
                        <li class="instagram">
--- a/src/organisms/Pagination.svelte
+++ b/src/organisms/Pagination.svelte
@@ -1,7 +1,8 @@
 <script>
    import { onMount, createEventDispatcher } from 'svelte'
-    import { currentLocation } from 'utils/store'
-
+    import { site, currentLocation } from 'utils/store'
+    // Components
+    import Newsletter from 'molecules/Newsletter'
    // Props
    export let photos
    export let paginatedPhotos
@@ -58,7 +59,12 @@
    {:else if $currentLocation}
    <div class="pagination__message">
        <h3>That's all folks!</h3>
-        <p class="pagination__caption style-caps">Come back later to check out <br>new photos of {$currentLocation.name}</p>
+
+        <Newsletter
+            small={true}
+            brightness="light"
+            title={false}
+        />
    </div>
    {/if}
 </section>
--- a/src/routes/_error.svelte
+++ b/src/routes/_error.svelte
@@ -30,7 +30,7 @@
    <section class="page">
        <div class="wrap">
            <div class="page__top">
-                <a href="/" class="button-control button-control--pink dir-left" on:click|preventDefault={() => window.location = '/'}>
+                <a href="/" class="button-control button-control--lightpink dir-left" on:click|preventDefault={() => window.location = '/'}>
                    <IconArrow direction="left" color="#fff" class="icon" />
                    <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                </a>
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -20,6 +20,9 @@
                        seo_share_image { full_url }
                        credits_text
                        credits_list
+                        newsletter_text
+                        newsletter_subtitle
+                        newsletter_url
                    }
                }
                continents {
--- a/src/routes/choose.svelte
+++ b/src/routes/choose.svelte
@@ -24,6 +24,7 @@
    // Variables
    const { page } = stores()
    pageAnimation.set(animateIn)
+    const pageTitle = `${$site.seo_name} - ${$site.seo_title_default} across the globe`

    // Reset current location
    currentLocation.set()
@@ -40,11 +41,11 @@
 </script>

 <svelte:head>
-	<title>{$site.seo_name} - {$site.seo_title_default} across the globe</title>
+	<title>{pageTitle}</title>
    <meta name="description" content={$site.seo_description_default}>
    <SocialMetas
-        url="https://{$page.host}"
-        title="{$site.seo_name} - {$site.seo_title_default} across the globe"
+        url="https://{$page.host}{$page.path}"
+        title="{pageTitle}"
        description={$site.seo_description_default}
        image={$site.seo_share_image.full_url}
    />
@@ -54,7 +55,7 @@
    <section class="page explore">
        <div class="wrap">
            <div class="page__top">
-                <a href="/" class="button-control button-control--pink dir-left" aria-label="Back to homepage" rel="prefetch">
+                <a href="/" class="button-control button-control--lightpink dir-left" aria-label="Back to homepage" rel="prefetch">
                    <IconArrow direction="left" color="#fff" class="icon" />
                    <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                </a>
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -17,6 +17,7 @@
    // Variables
    const { page } = stores()
    pageAnimation.set(animateIn)
+    const pageTitle = `${$site.seo_name} - Credits`


    /*
@@ -29,11 +30,11 @@
 </script>

 <svelte:head>
-	<title>{$site.seo_name} - Credits</title>
+	<title>{pageTitle}</title>
    <meta name="description" content={$site.credits_text}>
    <SocialMetas
-        url="https://{$page.host}/credits"
-        title="{$site.seo_name} - Credits"
+        url="https://{$page.host}{$page.path}"
+        title="{pageTitle}"
        description={$site.credits_text}
        image={$site.seo_share_image.full_url}
    />
@@ -43,7 +44,7 @@
    <section class="page">
        <div class="wrap">
            <div class="page__top">
-                <a href="/" class="button-control button-control--pink dir-left">
+                <a href="/" class="button-control button-control--lightpink dir-left">
                    <IconArrow direction="left" color="#fff" class="icon" />
                    <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                </a>
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -0,0 +1,67 @@
+<script>
+    import { onMount } from 'svelte'
+    import { stores } from '@sapper/app'
+    import { site, pageReady, pageAnimation } from 'utils/store'
+    // Dependencies
+    import Lazy from 'svelte-lazy'
+    // Components
+    import IconArrow from 'atoms/IconArrow'
+    import TitleSite from 'atoms/TitleSite'
+    import LinkTranslate from 'atoms/LinkTranslate'
+    import InteractiveGlobe from 'molecules/InteractiveGlobe'
+    import Newsletter from 'molecules/Newsletter'
+    import Footer from 'organisms/Footer'
+    import SocialMetas from 'utils/SocialMetas'
+    // Animations
+    import { animateIn } from 'animations/page'
+
+    // Variables
+    const { page } = stores()
+    pageAnimation.set(animateIn)
+    const pageTitle = `${$site.seo_name} - Keep Updated`
+
+
+    /*
+    ** Run code when mounted
+    */
+    onMount(() => {
+        // Page is loaded
+        pageReady.set(true)
+    })
+</script>
+
+<svelte:head>
+	<title>{pageTitle}</title>
+    <meta name="description" content={$site.subscribe_text}>
+    <SocialMetas
+        url="https://{$page.host}{$page.path}"
+        title="{pageTitle}"
+        description={$site.subscribe_text}
+        image={$site.seo_share_image.full_url}
+    />
+</svelte:head>
+
+<main class="housesof page--credits" class:is-transitioning={!$pageReady}>
+    <section class="page">
+        <div class="wrap">
+            <div class="page__top">
+                <a href="/" class="button-control button-control--lightpink dir-left">
+                    <IconArrow direction="left" color="#fff" class="icon" />
+                    <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
+                </a>
+
+                <TitleSite />
+            </div>
+
+            <Newsletter />
+        </div>
+
+        {#if process.browser}
+        <Lazy offset={window.innerHeight} fadeOption={null}>
+            <InteractiveGlobe type="part" opacity="0.5" />
+        </Lazy>
+        {/if}
+
+        <Footer />
+    </section>
+</main>
--- a/src/routes/viewer/[country]/[place]/[photo].svelte
+++ b/src/routes/viewer/[country]/[place]/[photo].svelte
@@ -119,7 +119,7 @@
                    </svg>
                </a>
                {#if $currentLocation}
-                <a href="/location/{$currentLocation.country.slug}/{$currentLocation.slug}" class="button-control button-control--pink dir-bottom" aria-label="Back to photos" rel="prefetch">
+                <a href="/location/{$currentLocation.country.slug}/{$currentLocation.slug}" class="button-control button-control--lightpink dir-bottom" aria-label="Back to photos" rel="prefetch">
                    <IconCross color="#fff" width="18" class="icon" />
                    <IconCross color="#fff" width="18" class="icon" hidden="true" />
                </a>
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -230,7 +230,35 @@ button {

    @include breakpoint (sm) {
        max-width: 572px;
+        margin: 0 auto;
        font-size: rem(28px);
        line-height: 1.64;
    }
+
+    // Dark text
+    &--dark {
+        color: $color-text;
+    }
+
+    // Small text variant
+    &--small {
+        font-size: rem(16px);
+        line-height: 1.4;
+
+        @include breakpoint (sm) {
+            font-size: rem(20px);
+            line-height: 1.5;
+        }
+    }
 }
+
+// Notice
+.style-notice {
+    color: rgba($color-tertiary, 0.5);
+    font-family: $font-sans-light;
+    font-size: rem(14px);
+
+    @include breakpoint (sm) {
+        font-size: rem(16px);
+    }
+}
--- a/src/style/atoms/_button-control.scss
+++ b/src/style/atoms/_button-control.scss
@@ -27,13 +27,18 @@
        position: relative;
        overflow: hidden;
        display: block;
-        width: 13px;
        height: auto;
        transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
        will-change: transform;

+        &:not([data-width]) {
+            width: 13px;
+        }
+
        @include breakpoint (sm) {
-            width: 20px;
+            &:not([data-width]) {
+                width: 20px;
+            }
        }
    }
    .icon[aria-hidden] {
@@ -54,11 +59,18 @@
            background-color: $color-secondary;
        }
    }
-    &--pink {
+    &--lightpink {
        background-color: rgba($color-secondary, 0.4);

        &:hover, &.hover {
-            background-color: rgba($color-secondary, 0.75);
+            background-color: rgba($color-secondary, 0.85);
+        }
+    }
+    &--pink {
+        background-color: rgba($color-secondary, 0.85);
+
+        &:hover, &.hover {
+            background-color: $color-secondary;
        }
    }
    &--gray {
--- a/src/style/atoms/_link.scss
+++ b/src/style/atoms/_link.scss
@@ -1,4 +1,6 @@
-// Change link
+/*
+** Link: Change location
+*/
 .link-change {
    position: relative;
    display: inline-block;
@@ -65,7 +67,9 @@
 }


-// Link with animated letters
+/*
+** Link: Translation effect
+*/
 .link-translate {
    display: inline-block;

@@ -95,7 +99,7 @@
        }
    }

-    // Hover
+    // States
    &:hover {
        .text {
            &:after {
--- a/src/style/molecules/_form.scss
+++ b/src/style/molecules/_form.scss
@@ -0,0 +1,89 @@
+// Form
+.form {
+    label {
+        cursor: pointer;
+    }
+
+    // Group item
+    // &__group {
+    // }
+
+    // Input group
+    &__inputgroup {
+        position: relative;
+
+        button {
+            position: absolute;
+            top: 50%;
+            right: 10px;
+            transform: translateY(-50%);
+            width: 32px;
+            height: 32px;
+
+            @include breakpoint (sm) {
+                right: 20px;
+            }
+        }
+
+        // Hover
+        &:hover {
+            .input__text {
+                @extend %input__text--active;
+            }
+        }
+    }
+
+
+    /*
+    ** Light version
+    */
+    &--light {
+        // Text input
+        .input__text {
+            &, &::placeholder {
+                color: $color-text;
+            }
+        }
+    }
+}
+
+// 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;
+    }
+}
--- a/src/style/molecules/_newsletter.scss
+++ b/src/style/molecules/_newsletter.scss
@@ -0,0 +1,62 @@
+// Newsletter
+.newsletter {
+    max-width: 360px;
+    margin: 0 auto;
+    text-align: center;
+
+    @include breakpoint (sm) {
+        max-width: 444px;
+    }
+
+    // Title
+    h2 {
+        margin-bottom: 40px;
+        color: $color-secondary;
+    }
+
+    // Text
+    &__text {
+        margin-bottom: 72px;
+
+        @include breakpoint (sm) {
+            margin-bottom: 96px;
+        }
+    }
+
+    // Form
+    .form {
+
+    }
+
+    // Notice
+    &__notice {
+        margin-top: 32px;
+    }
+
+
+    /*
+    ** Small version
+    */
+    &--small {
+        .newsletter__text {
+            max-width: 344px;
+            margin-bottom: 56px;
+
+            @include breakpoint (sm) {
+                margin-bottom: 72px;
+            }
+        }
+    }
+
+
+    /*
+    ** Light version
+    */
+    &--light {
+        .newsletter__notice {
+            p {
+                color: rgba($color-text, 0.5);
+            }
+        }
+    }
+}
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -83,7 +83,7 @@
            }

            // Hover
-            &:hover {
+            &:hover, &.is-active {
                color: $color-secondary;
            }
        }
--- a/src/style/organisms/_pagination.scss
+++ b/src/style/organisms/_pagination.scss
@@ -105,9 +105,10 @@
            font-family: $font-serif;
            font-size: rem(32px);
            color: $color-secondary;
-            margin-bottom: 16px;
+            margin-bottom: 24px;

            @include breakpoint (sm) {
+                margin-bottom: 32px;
                font-size: rem(40px);
            }
        }
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -27,6 +27,8 @@
@import "molecules/location";
@import "molecules/photo";
@import "molecules/globe";
+@import "molecules/newsletter";
+@import "molecules/form";

 // Organisms
@import "organisms/carousel";