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
+14 -5
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;
+14 -5
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