Remove comments
This commit is contained in:
1 parent
872175153a
commit
057b4be7d7
18 files changed
+66
-1350
No files matched your search
@@ -1,29 +1,3 @@
|
||||
{# One confirmation: something the reader just did, said once and then gone.
|
||||
|
||||
Bootstrap's custom-content shape -- a flex row of body and close button,
|
||||
with no toast-header above it. The header carries a title, an icon and a
|
||||
timestamp, which is what a notification arriving from elsewhere needs; this
|
||||
is the answer to a button pressed a second ago, and the sentence is the
|
||||
whole of it.
|
||||
|
||||
Context: text, bad (it did not happen), oob.
|
||||
|
||||
Two ways in, the same element either way. api/toast renders it alone and
|
||||
htmx appends it to the container; the bookmark write renders it with oob
|
||||
set and it rides along on the answer that updates the navbar slot -- one
|
||||
response, both halves of the page, the way the modal's status line used to.
|
||||
The wrapper is how an out-of-band element with no id of its own says where
|
||||
it goes: htmx appends the wrapper's children to the named container and
|
||||
drops the wrapper itself.
|
||||
|
||||
It shows itself on arrival and removes itself once it has gone. hx-on::load
|
||||
is htmx's own event, fired on content it has just inserted and processed,
|
||||
so it covers both ways in -- and it is the same move base.njk makes to open
|
||||
the dialog: the arrival of the content is the signal to show it. Bootstrap
|
||||
owns the timer, the fade, the close button and Escape from there. Removing
|
||||
the element on hidden.bs.toast is what keeps the container from filling up
|
||||
with dead markup: a toast that has been read is not history, and nothing
|
||||
here ever looks at it again. #}
|
||||
{% if oob %}<div hx-swap-oob="beforeend:#toasts">{% endif %}
|
||||
<div class="toast align-items-center{% if bad %} text-bg-danger{% endif %}"
|
||||
role="alert" aria-live="assertive" aria-atomic="true"
|
||||
@@ -31,9 +5,6 @@
|
||||
hx-on:hidden.bs.toast="this.remove();">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">{{ text }}</div>
|
||||
{# me-2 m-auto, not ms-auto: the row is body then button, and the body is
|
||||
what grows -- the button only has to sit centred against however many
|
||||
lines it turns out to be. #}
|
||||
<button type="button"
|
||||
class="btn-close{% if bad %} btn-close-white{% endif %} me-2 m-auto"
|
||||
data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
|
||||
Reference in new issue
Block a user