peterstockings/bloodpressure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add alpine.js and make flashed messages dismissable

Browse Source
This commit is contained in:
Peter Stockings
2024-12-24 01:16:59 +11:00
parent 7c3499d07a
commit 5f61e1967b
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/templates/_layout.html
View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}BP Tracker{% endblock %}</title>
<script src="/static/js/tailwindcss@3.2.4.js"></script>
<script src="/static/js/alpine.min.js" defer></script>
</head>
<body class="bg-gray-100 text-gray-800">
@@ -29,10 +30,12 @@
{% with messages = get_flashed_messages(with_categories=True) %}
{% if messages %}
<div class="container mx-auto mt-4">
<div class="container mx-auto mt-4 space-y-4">
{% for category, message in messages %}
<div class="p-4 mb-4 rounded text-white bg-{{ 'red' if category == 'danger' else 'green' }}-500">
{{ message }}
<div class="flex items-center justify-between p-4 rounded-lg shadow text-white bg-{{ 'red' if category == 'danger' else 'green' }}-500"
x-data="{ visible: true }" x-show="visible" x-transition.duration.300ms>
<span>{{ message }}</span>
<button @click="visible = false" class="text-xl font-bold">&times;</button>
</div>
{% endfor %}
</div>