filipriec/komp_ac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

toats notifications in the web

Browse Source
This commit is contained in:
Priec
2026-08-07 21:30:32 +02:00
parent 945dd811f4
commit 7cda7ea833
12 changed files with 102 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/templates/ui/base.html
View File

@@ -44,6 +44,25 @@
--color-onPrimary: #ffffff;
--color-danger: #9d342d;
--color-success: #21643a;
/*
The same palette again under the names penguinui-components/style.css
declares, for the component files this app includes from the library
unmodified rather than copying — currently the toast. The copies above
renamed these; a file used as the library ships it cannot be renamed,
so the theme answers to both spellings.
*/
--color-surface-alt: #f3f5f7;
--color-on-surface: #465267;
--color-on-surface-strong: #17202a;
--color-on-primary: #ffffff;
--color-info: #1d4e89;
--color-on-info: #ffffff;
--color-on-success: #ffffff;
--color-warning: #8a5a08;
--color-on-warning: #ffffff;
--color-on-danger: #ffffff;
--radius-radius: 6px;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3/dist/cdn.min.js"></script>
@@ -67,5 +86,18 @@
<body>
{% include "ui/navbar.html" %}
{% block content %}{% endblock %}
{#
Penguin UI's stacking toast notification, straight out of the library and
unmodified — askama.toml puts penguinui-components on the template path, so
this is the library's file, not a copy of it.
Mounted once per page and deliberately outside the block every fragment
swaps into: a success is announced by a fragment dispatching `notify` (see
ui/toast.html), and the toast showing it has to outlive the swap that
follows. The component file also ships the demo buttons that trigger it in
the library's own preview; `.penguin-toast > button` in static/app.css is
what keeps those off the page.
#}
<div class="penguin-toast">{% include "toast-notification/stacking-toast-notification.html" %}</div>
</body>
</html>