moviewyrm/bookwyrm/templates/components/modal.html

33 lines
1.3 KiB
HTML
Raw Normal View History

{% load i18n %}
<div
role="dialog"
2021-06-08 18:23:53 +00:00
class="modal {% if active %}is-active{% else %}is-hidden{% endif %}"
id="{{ controls_text }}_{{ controls_uid }}"
aria-labelledby="modal_card_title_{{ controls_text }}_{{ controls_uid }}"
aria-modal="true"
>
{# @todo Implement focus traps to prevent tabbing out of the modal. #}
2021-01-17 18:10:59 +00:00
<div class="modal-background"></div>
{% trans "Close" as label %}
2021-01-17 18:10:59 +00:00
<div class="modal-card">
<header class="modal-card-head" tabindex="0" id="modal_title_{{ controls_text }}_{{ controls_uid }}">
<h2 class="modal-card-title is-flex-shrink-1" id="modal_card_title_{{ controls_text }}_{{ controls_uid }}">
2021-01-17 18:10:59 +00:00
{% block modal-title %}{% endblock %}
</h2>
{% include 'snippets/toggle/toggle_button.html' with label=label class="delete" nonbutton=True %}
2021-01-17 18:10:59 +00:00
</header>
{% block modal-form-open %}{% endblock %}
{% if not no_body %}
<section class="modal-card-body">
{% block modal-body %}{% endblock %}
</section>
{% endif %}
2021-01-17 18:10:59 +00:00
<footer class="modal-card-foot">
{% block modal-footer %}{% endblock %}
</footer>
{% block modal-form-close %}{% endblock %}
</div>
{% include 'snippets/toggle/toggle_button.html' with label=label class="modal-close is-large" nonbutton=True %}
2021-01-17 18:10:59 +00:00
</div>