88 lines
3.8 KiB
HTML
88 lines
3.8 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block body %}
|
|
<style>
|
|
.newsletter-header {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.newsletter-header:hover {
|
|
background-color: rgba(0, 0, 0, 0.1)
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid bg-dark-primary">
|
|
<div class="container py-3">
|
|
{% if request.user.is_anonymous %}
|
|
<button class="btn btn-secondary mx-auto d-block mb-3" data-toggle="modal" data-target="#newsletter-modal">Subscribe To The Newsletter</button>
|
|
{% endif %}
|
|
{% for newsletter in newsletters %}
|
|
<div class="col-12 p-0 mb-3 bg-white newsletter">
|
|
<div class="p-3 newsletter-header" data-toggle="collapse" data-target="#newsletter-body-{{ newsletter.id }}" aria-expanded="false" aria-controls="newsletter-body-{{ newsletter.id }}">
|
|
<h2>{{ newsletter.subject }}</h2>
|
|
<span class="text-muted">By: {{ newsletter.creator }}</span>
|
|
<span class="text-muted float-right">{{ newsletter.publish }}</span>
|
|
</div>
|
|
<div id="newsletter-body-{{ newsletter.id }}" class="bg-light-blue collapse">
|
|
<div class="p-3" style="overflow:hidden;">
|
|
{{ newsletter.body | safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="newsletter-modal" class="modal fade">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<div class="col-12">
|
|
<h3 class="modal-title text-dark-primary"><i class="fa fa-envelope-o"></i> Newsletter Sign Up</h3>
|
|
<div class="my-3">
|
|
<p>
|
|
Want to keep up to date with all our latest news?
|
|
<br>
|
|
Enter your email below to be added to our mailing list.
|
|
</p>
|
|
<div id="emailInputGroup" class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
|
|
<input id="email" class="form-control" type="email">
|
|
</div>
|
|
</div>
|
|
<div class="float-right">
|
|
<button id="subscribe" type="button" class="btn btn-primary"><i class="fa fa-check-circle"></i> Subscribe</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$('#subscribe').click(function() {
|
|
var email = $('#email').val();
|
|
if(email && email.match(/.+@.+\..+/g)) {
|
|
var csrfToken = $("[name='csrfmiddlewaretoken']").val();
|
|
$.post('/newsletter/subscribe', {csrfmiddlewaretoken: csrfToken, email: email}, function(resp) {
|
|
if(resp.success) {
|
|
$('#email').val('');
|
|
$('#newsletter-modal').modal('hide');
|
|
} else {
|
|
$('#emailInputGroup').effect('shake')
|
|
}
|
|
}, 'json');
|
|
} else {
|
|
$('#emailInputGroup').effect('shake')
|
|
}
|
|
});
|
|
|
|
if(!sessionStorage.getItem('newsletter') && {% if request.user.is_anonymous %} true {% else %} false {% endif %}) {
|
|
$('#newsletter-modal').modal('show');
|
|
sessionStorage.setItem('newsletter', true);
|
|
}
|
|
</script>
|
|
{% endblock %} |