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

View file

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