Fix toast styling

This commit is contained in:
Jeremy Stretch 2024-01-04 15:31:47 -05:00
parent 62626bb0e9
commit 910d79d830
5 changed files with 18 additions and 28 deletions

Binary file not shown.

Binary file not shown.

View File

@ -5,7 +5,7 @@ import { Toast } from 'bootstrap';
*/
export function initMessages(): void {
const elements = document.querySelectorAll<HTMLDivElement>(
'body > div#django-messages > div.django-message.toast',
'body > div#django-messages > div.toast',
);
for (const element of elements) {
if (element !== null) {

View File

@ -1,39 +1,17 @@
{% load helpers %}
<div id="django-messages" class="toast-container">
<div id="django-messages" class="toast-container position-fixed bottom-0 end-0 p-3">
{# Non-Field Form Errors #}
{% if form and form.non_field_errors %}
{% for error in form.non_field_errors.get_json_data %}
<div class="django-message toast align-items-center border-0 bg-danger" data-django-type="non-field-error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
<div class="d-flex">
<div class="toast-body">
<i class="mdi mdi-{{ "danger"|icon_from_status }} me-1"></i>
{{ error.message }}
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
{% include 'inc/toast.html' with status="danger" title="Error" message=error.message %}
{% endfor %}
{% endif %}
{# Django Messages #}
{% if messages %}
{% for message in messages %}
{% with message.level_tag|status_from_tag as status %}
{% with status|icon_from_status as icon %}
<div class="django-message toast align-items-center border-0 bg-{{ status }}" data-django-type="message" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
<div class="d-flex">
<div class="toast-body">
<i class="mdi mdi-{{ icon }} me-1"></i>
{{ message }}
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
{% endwith %}
{% endwith %}
{% endfor %}
{% endif %}
{% for message in messages %}
{% include 'inc/toast.html' with status=message.level_tag|status_from_tag %}
{% endfor %}
</div>

View File

@ -0,0 +1,12 @@
{% load helpers %}
<div class="toast shadow-sm" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
<div class="toast-header text-bg-{{ status }}">
<i class="mdi mdi-{{ status|icon_from_status }} me-1"></i>
{{ title }}
<button type="button" class="btn-close me-0 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
{{ message }}
</div>
</div>