Make newsletter form a reusable component
This commit is contained in:
44
src/components/molecules/EmailForm.svelte
Normal file
44
src/components/molecules/EmailForm.svelte
Normal file
@@ -0,0 +1,44 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte'
|
||||
// Components
|
||||
import IconArrow from '$components/atoms/IconArrow.svelte'
|
||||
|
||||
export let past: boolean = false
|
||||
|
||||
const { settings: { newsletter_url }}: any = getContext('global')
|
||||
|
||||
let inputInFocus = false
|
||||
|
||||
// Toggle input focus
|
||||
const toggleFocus = () => inputInFocus = !inputInFocus
|
||||
</script>
|
||||
|
||||
<div class="newsletter-form">
|
||||
<form method="POST" action={newsletter_url} id="sib-form" target="_blank">
|
||||
<div class="newsletter-form__email" class:is-focused={inputInFocus}>
|
||||
<input type="email" placeholder="Your email address" name="EMAIL" id="SUB_EMAIL" required
|
||||
on:focus={toggleFocus}
|
||||
on:blur={toggleFocus}
|
||||
>
|
||||
<button type="submit" form="sib-form">
|
||||
<IconArrow color="white" />
|
||||
</button>
|
||||
</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 class="newsletter-form__bottom">
|
||||
{#if past}
|
||||
<a href="/subscribe" class="past-issues">
|
||||
<svg width="20" height="16" viewBox="0 0 20 16" fill="#333" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
|
||||
</svg>
|
||||
<span>See past issues</span>
|
||||
</a>
|
||||
{/if}
|
||||
<p>No spam, we promise!</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,16 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte'
|
||||
// Components
|
||||
import IconArrow from '$components/atoms/IconArrow.svelte'
|
||||
import EmailForm from '$components/molecules/EmailForm.svelte'
|
||||
|
||||
export let theme: string = 'default'
|
||||
|
||||
const { settings: { newsletter_url, newsletter_text, newsletter_subtitle }}: any = getContext('global')
|
||||
|
||||
let inputInFocus = false
|
||||
|
||||
// Toggle input focus
|
||||
const toggleFocus = () => inputInFocus = !inputInFocus
|
||||
const { settings: { newsletter_text, newsletter_subtitle }}: any = getContext('global')
|
||||
</script>
|
||||
|
||||
<div class="newsletter newsletter--{theme} shadow-box-dark">
|
||||
@@ -20,30 +15,6 @@
|
||||
</h3>
|
||||
<p class="text-small">{newsletter_text}</p>
|
||||
|
||||
<form method="POST" action={newsletter_url} id="sib-form" target="_blank">
|
||||
<div class="newsletter__email" class:is-focused={inputInFocus}>
|
||||
<input type="email" placeholder="Your email address" name="EMAIL" id="SUB_EMAIL" required
|
||||
on:focus={toggleFocus}
|
||||
on:blur={toggleFocus}
|
||||
>
|
||||
<button type="submit" form="sib-form">
|
||||
<IconArrow color="white" />
|
||||
</button>
|
||||
</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 class="past-issues">
|
||||
<a href="/subscribe">
|
||||
<svg width="20" height="16" viewBox="0 0 20 16" fill="#333" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
|
||||
</svg>
|
||||
<span>See past issues</span>
|
||||
</a>
|
||||
<p>No spam, we promise!</p>
|
||||
</div>
|
||||
<EmailForm past={true} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,6 +4,8 @@
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import Heading from '$components/molecules/Heading.svelte'
|
||||
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte';
|
||||
import EmailForm from '$components/molecules/EmailForm.svelte';
|
||||
|
||||
export let issues: any
|
||||
</script>
|
||||
@@ -19,6 +21,8 @@
|
||||
text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
|
||||
/>
|
||||
|
||||
<EmailForm />
|
||||
|
||||
<section class="subscribe__issues">
|
||||
<h2 class="title-small">Past Issues</h2>
|
||||
<ul>
|
||||
@@ -38,6 +42,8 @@
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<InteractiveGlobe type="cropped" />
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
107
src/style/molecules/_newsletter-form.scss
Normal file
107
src/style/molecules/_newsletter-form.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
// Email Form
|
||||
.newsletter-form {
|
||||
&__email {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 56px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 24px;
|
||||
border-radius: 100vh;
|
||||
box-shadow: inset 0 0 0 2px $color-secondary;
|
||||
transition: box-shadow 0.6s var(--ease-quart);
|
||||
|
||||
@include bp (sm) {
|
||||
height: 64px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: rem(16px);
|
||||
font-family: $font-sans;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: 32px;
|
||||
background-color: $color-secondary;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 100vh;
|
||||
}
|
||||
|
||||
// States
|
||||
&.is-focused {
|
||||
box-shadow: inset 0 0 0 4px $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom details
|
||||
&__bottom {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: rem(14px);
|
||||
max-width: 600px;
|
||||
|
||||
@include bp (sm) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: rem(16px);
|
||||
}
|
||||
|
||||
.past-issues {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 auto auto 0;
|
||||
text-decoration: none;
|
||||
color: $color-text;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding-bottom: 2px;
|
||||
font-size: rem(14px);
|
||||
color: $color-text;
|
||||
margin-left: 8px;
|
||||
border-bottom: 1px solid $color-text;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-left: 12px;
|
||||
padding-bottom: 0;
|
||||
font-size: rem(16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $color-gray;
|
||||
line-height: 1.3;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -35,106 +35,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Form
|
||||
&__email {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 64px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 30px;
|
||||
border-radius: 100vh;
|
||||
box-shadow: inset 0 0 0 2px $color-secondary;
|
||||
transition: box-shadow 0.6s var(--ease-quart);
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: rem(18px);
|
||||
font-family: $font-sans;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: 32px;
|
||||
background-color: $color-secondary;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 100vh;
|
||||
}
|
||||
|
||||
// States
|
||||
&.is-focused {
|
||||
box-shadow: inset 0 0 0 4px $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Past Issues
|
||||
.past-issues {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: rem(14px);
|
||||
max-width: 600px;
|
||||
|
||||
@include bp (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: rem(16px);
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: $color-text;
|
||||
|
||||
@include bp (sm) {
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
padding-bottom: 2px;
|
||||
font-size: rem(14px);
|
||||
color: $color-text;
|
||||
margin-left: 8px;
|
||||
border-bottom: 1px solid $color-text;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-left: 12px;
|
||||
padding-bottom: 0;
|
||||
font-size: rem(16px);
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $color-gray;
|
||||
line-height: 1.3;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Variants
|
||||
// Default color
|
||||
&--default {
|
||||
|
||||
@@ -12,6 +12,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Email Form
|
||||
.newsletter-form {
|
||||
margin: 42px auto 70px;
|
||||
padding: 0 20px;
|
||||
max-width: max(432px, 70%);
|
||||
|
||||
@include bp (sm) {
|
||||
max-width: 560px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
&__email {
|
||||
input {
|
||||
color: #fff;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($color-tertiary, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__bottom {
|
||||
p {
|
||||
color: rgba($color-tertiary, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Past Issues
|
||||
&__issues {
|
||||
margin: 64px auto 0;
|
||||
@@ -46,4 +74,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.globe--cropped {
|
||||
margin-top: 96px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 156px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -47,6 +47,7 @@
|
||||
@import "molecules/switcher";
|
||||
@import "molecules/heading";
|
||||
@import "molecules/issue";
|
||||
@import "molecules/newsletter-form";
|
||||
|
||||
// Organisms
|
||||
@import "organisms/locations";
|
||||
|
||||
Reference in New Issue
Block a user