Added subscribe failure notification

Fixes #738
This commit is contained in:
Sodbileg Gansukh 2020-10-08 10:22:49 +08:00
parent 9d12bc32f0
commit 0052c2ddc3
4 changed files with 30 additions and 12 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -2584,7 +2584,7 @@ Usage (In Ghost editor):
/* 10. Subscribe Message and Overlay
/* ---------------------------------------------------------- */
.subscribe-success-message {
.subscribe-notification {
position: fixed;
top: 0;
right: 0;
@ -2598,26 +2598,35 @@ Usage (In Ghost editor):
transform: translateY(-175%);
}
.subscribe-notification.subscribe-failure-message {
background: var(--red);
}
.subscribe-success .subscribe-success-message {
visibility: visible;
transform: translateY(0);
}
.subscribe-success-message.close {
.subscribe-failure .subscribe-failure-message {
visibility: visible;
transform: translateY(0);
}
.subscribe-notification.close {
visibility: hidden;
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(-175%);
}
.subscribe-success-message .subscribe-close-button {
.subscribe-notification .subscribe-close-button {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.subscribe-success-message .subscribe-close-button:before,
.subscribe-success-message .subscribe-close-button:after {
.subscribe-notification .subscribe-close-button:before,
.subscribe-notification .subscribe-close-button:after {
top: 31px;
right: 20px;
width: 18px;

View file

@ -42,10 +42,14 @@
{{!-- The big email subscribe modal content --}}
{{#if @labs.members}}
<div class="subscribe-success-message">
<div class="subscribe-notification subscribe-success-message">
<a class="subscribe-close-button" href="javascript:;"></a>
You've successfully subscribed to {{@site.title}}!
</div>
<div class="subscribe-notification subscribe-failure-message">
<a class="subscribe-close-button" href="javascript:;"></a>
Could not sign up! Invalid sign up link.
</div>
<div id="subscribe" class="subscribe-overlay">
<a class="subscribe-close-overlay" href="#"></a>
@ -102,14 +106,19 @@
// Give the parameter a variable name
var action = getParameterByName('action');
var success = getParameterByName('success');
$(document).ready(function () {
if (action == 'subscribe') {
$('body').addClass("subscribe-success");
if (action == 'subscribe' && (success === null || success === 'true')) {
$('body').addClass('subscribe-success');
}
$('.subscribe-success-message .subscribe-close-button').click(function () {
$('.subscribe-success-message').addClass('close');
if (action == 'subscribe' && success === 'false') {
$('body').addClass('subscribe-failure');
}
$('.subscribe-notification .subscribe-close-button').click(function () {
$('.subscribe-notification').addClass('close');
});
// Reset form on opening subscrion overlay