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

Edit Newsletter component

Browse Source
This commit is contained in:
Shelby Kay
2021-09-29 23:38:00 +02:00
parent e0d048fe8c
commit 0ba0ab1f60
6 changed files with 98 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/atoms/Button.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
export let text: string
export let tag: string = 'button'
export let tag: string = 'a'
export let url: string = undefined
</script>

46
src/components/organisms/Newsletter.svelte
View File

@@ -1,32 +1,40 @@
<script lang="ts">
import { getContext } from 'svelte'
// Components
import Button from '$components/atoms/Button.svelte'
import IconArrow from '$components/atoms/IconArrow.svelte'
import IconArrow from '$components/atoms/IconArrow.svelte'
// export let locations: any
const { settings: { newsletter_url, newsletter_text, newsletter_subtitle} }: any = getContext('global')
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
</script>
<div class="newsletter grid">
<div class="newsletter__wrapper grid">
<div class="newsletter__about">
<h3 class="title-small">{newsletter_subtitle}</h3>
<p class="text-small">{newsletter_text}</p>
<div class="newsletter newsletter--{theme} shadow-box-dark">
<div class="newsletter__wrapper">
<h3 class="title-medium">{newsletter_subtitle}</h3>
<p class="text-small">{newsletter_text}</p>
<form action={newsletter_url} target="_blank">
<div class="newsletter__email" class:is-focused={inputInFocus}>
<input type="email" placeholder="Your email address"
on:focus={toggleFocus}
on:blur={toggleFocus}
>
<button type="submit">
<IconArrow color="white" />
</button>
</div>
</form>
<div class="past-issues">
<a href="/subscribe">
<img src="/images/icons/form.svg" alt="newsletter icon">
<span>See past issues</span>
</a>
</div>
<div class="newsletter__signup">
<form action={newsletter_url} target="_blank">
<div class="newsletter__email">
<input type="email" placeholder="Your email address">
<button type="submit">
<IconArrow color="white" />
</button>
</div>
</form>
<span>No spam, we promise!</span>
</div>
</div>

2
src/style/_base.scss
View File

@@ -44,7 +44,7 @@ button {
outline: none;
}
[data-focus-visible-added], *:focus-visible {
outline: 1px dashed $color-tertiary;
outline: 1px dashed $color-secondary;
}
// Selection

4
src/style/_variables.scss
View File

@@ -12,11 +12,13 @@ $color-lilas-bright: #C78FEC;
$color-gray: #666;
$color-lightgray: #999;
$color-shadow-brown: #7A5D44;
$color-cream: #FEF6EF;
// CSS Variables
:root {
// Sizes
--container-width: 1680px;
--container-width: 1800px;
// Animation
--ease-quart: cubic-bezier(.165, .84, .44, 1);

102
src/style/organisms/_newsletter.scss
View File

@@ -1,75 +1,68 @@
.newsletter {
margin-bottom: 88px;
&__wrapper {
--columns: 20;
background-color: $color-primary-dark;
grid-column: 3 / span var(--columns);
padding: 80px 0;
padding: 40px 40px 48px;
border-radius: 12px;
@include bp (sd) {
--columns: 18;
grid-column: 4 / span var(--columns);
padding: 64px 60px 72px;
}
}
// About
&__about {
grid-column: 3 / span 6;
margin: auto 0;
// Text
p {
margin: 16px 0;
}
// Past issues
a {
text-decoration: none;
color: $color-lilas-bright;
font-size: rem(14px);
span {
margin-left: 12px;
border-bottom: 1px solid $color-lilas-bright;
}
}
h3 {
color: $color-secondary;
}
// Signup
&__signup {
grid-column: 11 / span 6;
margin: auto 0;
justify-content: center;
p {
margin: 12px 0 40px;
color: $color-text;
font-weight: 300;
}
span {
font-size: rem(16px);
line-height: 1.2;
color: rgba($color-text, 0.6);
}
// Past issues
a {
text-decoration: none;
color: $color-text;
font-size: rem(14px);
span {
font-size: rem(16px);
line-height: 1.2;
font-weight: 300;
color: rgba($color-tertiary, 0.6);
color: $color-text;
margin-left: 12px;
border-bottom: 1px solid $color-text;
}
}
// Form
&__email {
position: relative;
box-shadow: inset 0 0 0 2px $color-secondary;
border-radius: 100vh;
padding: 0 30px;
margin-bottom: 8px;
display: flex;
width: 100%;
height: 64px;
max-width: 400px;
margin-bottom: 20px;
padding: 0 30px;
border-radius: 100vh;
box-shadow: inset 0 0 0 3px $color-secondary;
transition: box-shadow 0.6s var(--ease-quart);
input {
background: none;
display: block;
width: 100%;
font-family: $font-sans;
font-weight: 400;
font-size: rem(18px);
color: #333;
background: none;
border: none;
color: #fff;
&::placeholder {
color: #fff;
color: $color-gray;
opacity: 1;
}
}
@@ -88,5 +81,30 @@
flex-shrink: 0;
border-radius: 100vh;
}
// States
&.is-focused {
box-shadow: inset 0 0 0 4px $color-secondary;
}
}
// Past Issues
.past-issues {
display: flex;
justify-content: space-between;
}
// Variants
// Default color
&--default {
.newsletter__wrapper {
background-color: $color-tertiary;
}
}
// Light
&--light {
.newsletter__wrapper {
background-color: $color-cream;
}
}
}

12
static/images/icons/form.svg
View File

@@ -1,7 +1,7 @@
<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.8 12.9459L16.2 12.9459C16.4485 12.9459 16.65 12.7444 16.65 12.4959L16.65 2.50406C16.65 2.25553 16.4485 2.05406 16.2 2.05406L1.8 2.05406C1.55147 2.05406 1.35 2.25553 1.35 2.50406L1.35 12.4959C1.35 12.7444 1.55147 12.9459 1.8 12.9459ZM16.2 14.2959C17.1941 14.2959 18 13.49 18 12.4959L18 2.50406C18 1.50995 17.1941 0.704061 16.2 0.704061L1.8 0.70406C0.805888 0.70406 1.11778e-06 1.50995 1.03088e-06 2.50406L1.57361e-07 12.4959C7.04529e-08 13.49 0.805889 14.2959 1.8 14.2959L16.2 14.2959Z" fill="#C78FEC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.82499 10.4711L5.62499 10.4711L5.62499 7.77109L3.82499 7.77109L3.82499 10.4711ZM5.62499 11.3711C6.12205 11.3711 6.52499 10.9682 6.52499 10.4711L6.52499 7.77109C6.52499 7.27404 6.12205 6.87109 5.62499 6.87109L3.82499 6.87109C3.32794 6.87109 2.92499 7.27404 2.92499 7.77109L2.92499 10.4711C2.92499 10.9681 3.32794 11.3711 3.82499 11.3711L5.62499 11.3711Z" fill="#C78FEC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3 8.75752C15.3 9.00605 15.0985 9.20752 14.85 9.20752L9.44999 9.20752C9.20146 9.20752 8.99999 9.00605 8.99999 8.75752C8.99999 8.50899 9.20146 8.30752 9.44999 8.30752L14.85 8.30752C15.0985 8.30752 15.3 8.50899 15.3 8.75752Z" fill="#C78FEC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.625 6.50752C14.625 6.75605 14.4235 6.95752 14.175 6.95752L8.775 6.95752C8.52647 6.95752 8.325 6.75605 8.325 6.50752C8.325 6.25899 8.52647 6.05752 8.775 6.05752L14.175 6.05752C14.4235 6.05752 14.625 6.25899 14.625 6.50752Z" fill="#C78FEC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.95 4.25752C13.95 4.50605 13.7485 4.70752 13.5 4.70752L8.09998 4.70752C7.85145 4.70752 7.64998 4.50605 7.64998 4.25752C7.64998 4.00899 7.85145 3.80752 8.09998 3.80752L13.5 3.80752C13.7485 3.80752 13.95 4.00899 13.95 4.25752Z" fill="#C78FEC"/>
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.8 12.4459L16.2 12.4459C16.4485 12.4459 16.65 12.2444 16.65 11.9959L16.65 2.00406C16.65 1.75553 16.4485 1.55406 16.2 1.55406L1.8 1.55406C1.55147 1.55406 1.35 1.75553 1.35 2.00406L1.35 11.9959C1.35 12.2444 1.55147 12.4459 1.8 12.4459ZM16.2 13.7959C17.1941 13.7959 18 12.99 18 11.9959L18 2.00406C18 1.00995 17.1941 0.204061 16.2 0.204061L1.8 0.20406C0.805888 0.20406 1.11778e-06 1.00995 1.03088e-06 2.00406L1.57361e-07 11.9959C7.04529e-08 12.99 0.805889 13.7959 1.8 13.7959L16.2 13.7959Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.82502 9.97109L5.62502 9.97109L5.62502 7.27109L3.82502 7.27109L3.82502 9.97109ZM5.62502 10.8711C6.12208 10.8711 6.52502 10.4682 6.52502 9.97109L6.52502 7.27109C6.52502 6.77404 6.12208 6.37109 5.62502 6.37109L3.82502 6.37109C3.32797 6.37109 2.92502 6.77404 2.92502 7.27109L2.92502 9.97109C2.92502 10.4681 3.32797 10.8711 3.82502 10.8711L5.62502 10.8711Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3 8.25752C15.3 8.50605 15.0985 8.70752 14.85 8.70752L9.44999 8.70752C9.20146 8.70752 8.99999 8.50605 8.99999 8.25752C8.99999 8.00899 9.20146 7.80752 9.44999 7.80752L14.85 7.80752C15.0985 7.80752 15.3 8.00899 15.3 8.25752Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.625 6.00752C14.625 6.25605 14.4235 6.45752 14.175 6.45752L8.775 6.45752C8.52647 6.45752 8.325 6.25605 8.325 6.00752C8.325 5.75899 8.52647 5.55752 8.775 5.55752L14.175 5.55752C14.4235 5.55752 14.625 5.75899 14.625 6.00752Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.95 3.75752C13.95 4.00605 13.7485 4.20752 13.5 4.20752L8.10001 4.20752C7.85148 4.20752 7.65001 4.00605 7.65001 3.75752C7.65001 3.50899 7.85148 3.30752 8.10001 3.30752L13.5 3.30752C13.7485 3.30752 13.95 3.50899 13.95 3.75752Z" fill="#333333"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB