feat: add dismiss button and improve hiding for htmx-error-handler

This commit is contained in:
Herculino Trotta
2024-10-17 11:07:30 -03:00
parent 4885d11043
commit 255fe6f771
2 changed files with 6 additions and 4 deletions

View File

@@ -1,7 +1,8 @@
<script type="text/hyperscript">
behavior htmx_error_handler
on htmx:responseError or htmx:afterRequest[detail.failed] remove .invisible .visually-hidden .swing-in-top-fwd from
on htmx:responseError or htmx:afterRequest[detail.failed] remove .tw-hidden from
#loading-error then log event
on htmx:afterRequest[detail.successful] add .invisible .visually-hidden .swing-in-top-fwd to #loading-error
on htmx:afterRequest[detail.successful] add .tw-hidden to #loading-error
on click from #loading-error-close add .tw-hidden to #loading-error
end
</script>

View File

@@ -27,9 +27,10 @@
{% block body_hyperscript %}{% endblock %}">
{% include 'includes/navbar.html' %}
<div class="container invisible visually-hidden" id="loading-error">
<div class="alert alert-danger m-3" role="alert">
<div class="container tw-hidden" id="loading-error">
<div class="alert alert-danger m-3 alert-dismissible swing-in-top-fwd" role="alert">
{% translate 'Something went wrong loading your data. Try reloading the page or check the console for more information.' %}
<button type="button" class="btn-close" aria-label="Close" id="loading-error-close"></button>
</div>
</div>