yann/liebling
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

WIP Give support to the new newsletter form

Browse source
This commit is contained in:
Eduardo Gomez 2020-02-28 11:01:58 +01:00
parent 74f5ba8577
commit 1e96082b11
9 changed files with 185 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
locales/en.json
View file

@ -9,6 +9,9 @@
"You've successfully subscribed to": "You've successfully subscribed to",
"Your email address": "Your email address",
"with the email address": "with the email address",
"Now check your inbox and click the link to confirm your subscription.": "Now check your inbox and click the link to confirm your subscription.",
"Please enter a valid email address": "Please enter a valid email address",
"Oops! There was an error sending the email, please try later": "Oops! There was an error sending the email, please try later",
"Email cannot be blank.": "Email cannot be blank.",
"Get the latest posts delivered right to your inbox.": "Get the latest posts delivered right to your inbox.",
"Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.",

3
locales/es.json
View file

@ -9,6 +9,9 @@
"You've successfully subscribed to": "Te has suscrito con éxito a",
"Your email address": "Tu dirección de correo electrónico",
"with the email address": "con la dirección de correo electrónico",
"Now check your inbox and click the link to confirm your subscription.": "Ahora revisa tu bandeja de entrada y haz click en el enlace para confirmar tu suscripción.",
"Please enter a valid email address": "Por favor introduce una dirección de correo electrónico válida",
"Oops! There was an error sending the email, please try later": "Oops! Ha ocurrido un error, por favor inténtalo más tarde",
"Email cannot be blank.": "El correo electrónico no puede estar vacío.",
"Get the latest posts delivered right to your inbox.": "Recibe los últimos artículos directamente en tu bandeja de entrada.",
"Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Mantente al día! Recibe todos los mejores y más recientes artículos directamente en tu bandeja de entrada.",

41
page-newsletter.hbs Normal file
View file

@ -0,0 +1,41 @@
{{!--
This template is used for the subscription page.
--}}
{{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!< default}}
<div class="l-wrapper" data-aos="fade-down">
<a href="{{@site.url}}" class="m-back">
<span class="m-back__icon icon-arrow-left"></span>
<span>{{t "Back to home"}}</span>
</a>
</div>
<main class="l-fullscreen">
<section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
{{^if success}}
<div>
<header class="m-heading in-subscribe-page">
<h1 class="m-heading__title">{{t "Subscribe to"}} {{@site.title}}</h1>
<p class="m-heading__description in-subscribe-page">
{{t "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox."}}
</p>
</header>
{{> "newsletter-form"}}
</div>
{{else}}
<div>
<header class="m-heading in-subscribe-page">
<h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
<p class="m-heading__description in-subscribe-page">
{{t "You've successfully subscribed to"}} <strong>{{@site.title}}</strong> {{t "with the email address"}}
<strong>{{email}}</strong>
</p>
</header>
<a href="{{@site.url}}" class="m-button outlined">{{t "Back to home"}}</a>
</div>
{{/if}}
</section>
</main>

31
partials/newsletter-form.hbs Normal file
View file

@ -0,0 +1,31 @@
{{!--
This subscribe template is used to display the form where users can subscribe.
You need to enable the members feature first.
--}}
<div class="m-subscribe-section__form">
<form data-members-form="subscribe" id="newsletter-form" class="m-subscribe-section__container">
<div class="m-subscribe__form">
<fieldset>
<label for="newsletter_input" class="sr-only">{{t "Your email address"}}</label>
<input data-members-email id="newsletter-input" class="m-input in-subscribe-section" type="email"
placeholder="{{t "Your email address"}}" required />
</fieldset>
<button id="newsletter_button" class="m-button primary block" type="submit">{{t "Subscribe"}}</button>
</div>
<div class="m-subscribe__success">
<header class="m-heading no-margin">
<h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
<p class="m-heading__description in-subscribe-page">
{{t "Now check your inbox and click the link to confirm your subscription."}}
</p>
</header>
</div>
<p class="m-subscribe__invalid m-small-text">
{{t "Please enter a valid email address"}}
</p>
<p class="m-subscribe__error m-small-text">
{{t "Oops! There was an error sending the email, please try later"}}
</p>
</form>
</div>

27
post.hbs
View file

@ -22,11 +22,7 @@ into the {body} of the default.hbs template --}}
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
<div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up" data-aos-delay="300">
{{#if @labs.subscribers}}
<div class="l-post-content has-subscribe-form js-progress-content">
{{else}}
<div class="l-post-content js-progress-content">
{{/if}}
<div class="l-post-content {{#if @labs.subscribers}}has-subscribe-form{{/if}} {{#if @labs.members}}has-subscribe-form{{/if}} js-progress-content">
<header class="m-heading">
<h1 class="m-heading__title in-post">{{title}}</h1>
<div class="m-heading__meta">
@ -84,11 +80,24 @@ into the {body} of the default.hbs template --}}
</div>
</section>
{{/if}}
{{#if @labs.subscribers}}
<section class="m-author">
{{else}}
<section class="m-author no-subscribers">
{{#if @labs.members}}
<section class="m-subscribe-section">
<div class="l-wrapper in-post">
<div class="m-subscribe-section__content">
<div class="m-subscribe-section__text">
<h4 class="m-subscribe-section__title">{{t "Subscribe to our newsletter"}}</h4>
<p class="m-subscribe-section__description">
{{t "Get the latest posts delivered right to your inbox."}}
</p>
</div>
<div class="m-subscribe-section__form">
{{> "newsletter-form"}}
</div>
</div>
</div>
</section>
{{/if}}
<section class="m-author">
<div class="m-author__content">
<div class="m-author__picture">
<a href="{{primary_author.url}}" class="m-author-picture" aria-label="Author picture">

22
routes.yaml Normal file
View file

@ -0,0 +1,22 @@
routes:
/signup/:
template: members/signup
data: page.signup
/signin/:
template: members/signin
data: page.signin
/membership/:
template: members/membership
data: page.membership
/account/:
template: members/account
data: page.account
collections:
/:
permalink: /{slug}/
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/

4
src/sass/components/author/_author.scss
View file

@ -17,10 +17,6 @@
@include respond-to('extra-large') {
padding: 60px 0;
}
&.no-subscribers {
background-color: var(--secondary-subtle-color);
}
}
.m-author__content {

39
src/sass/components/subscribe/_subscribe-section.scss
View file

@ -67,3 +67,42 @@
margin: 0 auto;
}
}
.m-subscribe-section__container {
&.loading {
.m-button {
pointer-events: none;
@extend .loading;
}
}
&.success {
.m-subscribe__success {
display: block;
}
.m-subscribe__invalid,
.m-subscribe__error,
.m-subscribe__form {
display: none;
}
}
&.invalid {
.m-subscribe__invalid {
display: block;
}
}
&.error {
.m-subscribe__error {
display: block;
}
}
.m-subscribe__success,
.m-subscribe__invalid,
.m-subscribe__error {
display: none;
}
}

28
src/sass/components/ui/_button.scss
View file

@ -11,6 +11,7 @@
cursor: pointer;
outline: 0;
border: 0;
position: relative;
background-color: transparent;
@extend .no-appearance;
@include transition(all .25s cubic-bezier(.02,.01,.47,1));
@ -44,4 +45,31 @@
color: $white;
background-color: var(--primary-subtle-color);
}
&.loading {
cursor: default;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 25%;
height: 2px;
background-color: $white;
@include animation('loading 1s infinite');
@include keyframes(loading) {
0% {
@include transform(translatex(0));
}
50% {
@include transform(translatex(300%));
}
100% {
@include transform(translatex(0));
}
}
}
}
}