48 lines
2.3 KiB
HTML
48 lines
2.3 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.
|
|
|
|
Imported wherever a form reports its outcome:
|
|
|
|
{% 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 %}
|
|
|
|
{% macro success(title, message) %}
|
|
<div class="relative mt-4 w-full overflow-hidden rounded-md border border-success bg-surface text-onSurface" role="alert">
|
|
<div class="flex items-center gap-2 bg-success/10 p-4">
|
|
<div class="shrink-0 rounded-full bg-success/15 p-1 text-success">
|
|
<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="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-2">
|
|
<h3 class="text-sm font-semibold text-success">{{ title }}</h3>
|
|
<p class="text-sm font-medium whitespace-pre-wrap">{{ message }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|