oacpl/newsletters/templates/newsletters.html
2018-02-26 18:13:02 -05:00

84 lines
3.9 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="#subscribeModal">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" style="overflow:hidden" data-toggle="collapse"
data-target="#newsletter-body-{{ newsletter.id }}" aria-expanded="false"
aria-controls="newsletter-body-{{ newsletter.id }}">
<h2 class="float-left">{{ newsletter.subject }}</h2>
<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>
{% if newsletter.attachments.all %}
<div class="px-3 pb-3">
<u>
<i class="fa fa-paperclip"></i> Attachments
</u>
<br>
{% for attachment in newsletter.attachments.all %}
{{ attachment.name }}
<a class="inline" href="/media/{{ attachment }}" target="_blank">view</a> |
<a class="inline" href="/media/{{ attachment }}" target="_blank" download>download</a>
<br>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
<div id="subscribeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-dark-primary">Newsletter Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Want to keep up to date with all our latest news?
<br>
Enter your email below to be added to our mailing list.
<form id="subscribeForm" method="post">
{% csrf_token %}
<div class="input-group pt-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope-o"></i></span>
</div>
<input name="email" class="form-control" type="email">
</div>
</form>
</div>
<div class="modal-footer">
<button id="subscribe" type="submit" form="subscribeForm" class="btn btn-primary">Subscribe</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endblock %}