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

Add a newsletter subscription form below locations
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- One component used below Locations list and in the Pagination when all photos has been loaded
- Keep the subscribe page with the column display
This commit is contained in:
Félix Péault
2020-05-06 23:06:26 +02:00
parent 2bb568865c
commit 720ca69902
16 changed files with 228 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/molecules/Newsletter.svelte
View File

@@ -1,46 +0,0 @@
<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>

41
src/molecules/NewsletterForm.svelte Normal file
View File

@@ -0,0 +1,41 @@
<script>
import { site } from 'utils/store'
// Components
import IconArrow from 'atoms/IconArrow'
// Props
export let title = false
export let small = false
export let brightness = 'dark'
export let align = 'center'
</script>
<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="SUB_EMAIL">{$site.newsletter_subtitle}</label>
</h2>
{/if}
<div class="newsletter__input form__group form__inputgroup">
<input type="email" id="SUB_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" class:is-aligned--right={align === 'right'}>
<p class="style-notice">No spam, we promise!</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>