moviewyrm/bookwyrm/templates/components/modal.html
Fabien Basmaison a05b14c338 [profile] Various HTML fixes:
- Wrap block level elements within block level elements, not inline.
- Avoid empty blocks.
- Change `<hr>` in lists into allowed type of children.
- Fix duplicated ID (some change that was not propagated across the template?).
- Make the anchor optional in the navbar (interactive elements (`a`, `input`, `button`…) should not appear into other interactive elements).
- Remove redundant `role` on main navigation.
- Make the modal a modal with `role="dialog".
- Use `button` instead of form-less `label`.
2021-03-03 20:10:09 +01:00

29 lines
1.2 KiB
HTML

<div
role="dialog"
class="modal hidden"
id="{{ controls_text }}-{{ controls_uid }}"
aria-labelledby="modal-card-title-{{ controls_uid }}"
>
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head" tabindex="0" id="modal-title-{{ controls_text }}-{{ controls_uid }}">
<h2 class="modal-card-title" id="modal-card-title-{{ controls_uid }}">
{% block modal-title %}{% endblock %}
</h2>
{% include 'snippets/toggle/toggle_button.html' with label="close" class="delete" nonbutton=True %}
</header>
{% block modal-form-open %}{% endblock %}
{% if not no_body %}
<section class="modal-card-body">
{% block modal-body %}{% endblock %}
</section>
{% endif %}
<footer class="modal-card-foot">
{% block modal-footer %}{% endblock %}
</footer>
{% block modal-form-close %}{% endblock %}
</div>
<button class="modal-close is-large" aria-label="close"></button>
{% include 'snippets/toggle/toggle_button.html' with label="close" class="modal-close is-large" nonbutton=True %}
</div>