mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-11-13 12:23:44 +01:00
Herculino Trotta
03f2b0aeb4
Lay the alert out as an icon | text | button grid so the close button gets a consistent gap from the message and the same visual inset as the icon. Long messages now wrap instead of pushing the button, and the aria-label is quoted.
24 lines
909 B
HTML
24 lines
909 B
HTML
{% load i18n %}
|
|
{% load toast_bg %}
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="toasty alert alert-{{ message.tags | toast_bg }} grid-cols-[auto_1fr_auto] items-start gap-3 pe-2"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true">
|
|
<i class="{{ message.tags | toast_icon }} fa-fw mt-1"></i>
|
|
<div class="min-w-0 break-words">
|
|
<strong>{{ message.tags | toast_title }}</strong>
|
|
<div>{{ message }}</div>
|
|
</div>
|
|
{# -mt-1 centers the 2rem button on the 1.5rem title line #}
|
|
<button type="button"
|
|
class="btn btn-ghost btn-sm btn-square -mt-1"
|
|
_="on click remove closest .toasty"
|
|
aria-label="{% translate 'Close' %}">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|