35 lines
1.6 KiB
HTML
35 lines
1.6 KiB
HTML
{#
|
|
Inline status blocks — Penguin UI's "alert" component
|
|
(https://www.penguinui.com/components/alert, modern style, with icon), minus
|
|
the dark variants because the app has no dark theme. The colours come from
|
|
the @theme block in ui/base.html.
|
|
|
|
Failures only: a success is ui/toast.html, which says its piece and then
|
|
removes itself rather than staying in the layout. An error has to stay until
|
|
it is read, so it is this.
|
|
|
|
Imported wherever a form reports a failure:
|
|
|
|
{% import "ui/alert.html" as alert %}
|
|
{% call alert::error("Could not create the table", message) %}{% endcall %}
|
|
|
|
An error is normally paired with ui/dialog.html, which is what actually puts
|
|
the message in front of someone who has scrolled away from the top of a form.
|
|
#}
|
|
{% macro error(title, message) %}
|
|
<div class="relative mt-4 w-full overflow-hidden rounded-md border border-danger bg-surface text-onSurface" role="alert">
|
|
<div class="flex items-center gap-2 bg-danger/10 p-4">
|
|
<div class="shrink-0 rounded-full bg-danger/15 p-1 text-danger">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6" aria-hidden="true">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-2">
|
|
<h3 class="text-sm font-semibold text-danger">{{ title }}</h3>
|
|
<p class="text-sm font-medium whitespace-pre-wrap">{{ message }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|