From 25562b338c143790c18a16a5acee518178152b36 Mon Sep 17 00:00:00 2001
From: Thomas Schneider <thomas@fsmpi.rwth-aachen.de>
Date: Thu, 12 Sep 2024 16:53:37 +0200
Subject: [PATCH] Nicer display for flashes; show them on every page
---
frontend/src/main.less | 36 +++++++++++++++++++++++++++
schilder2000/templates/_base.html.j2 | 15 +++++++++++
schilder2000/templates/schild.html.j2 | 12 ---------
3 files changed, 51 insertions(+), 12 deletions(-)
diff --git a/frontend/src/main.less b/frontend/src/main.less
index a28a990..5646873 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -297,3 +297,39 @@ main {
display: none;
}
}
+
+.flash {
+ border: 1px solid transparent;
+ border-radius: 4px;
+ padding: 0.5rem 1rem;
+
+ position: relative;
+
+ .flash-background {
+ opacity: 0.5;
+ z-index: -1;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+
+ &.flash-error {
+ border-color: red;
+ .flash-background {
+ background-color: red;
+ }
+ }
+
+ &.flash-message {
+ border-color: var(--accent2);
+ .flash-background {
+ background-color: var(--accent2);
+ }
+ }
+
+ & > div {
+ opacity: 1;
+ }
+}
diff --git a/schilder2000/templates/_base.html.j2 b/schilder2000/templates/_base.html.j2
index 70954c5..6e68163 100644
--- a/schilder2000/templates/_base.html.j2
+++ b/schilder2000/templates/_base.html.j2
@@ -20,6 +20,17 @@
{%- endif -%}
{%- endmacro -%}
+{%- macro flashes() -%}
+ {%- with messages = get_flashed_messages(with_categories=true) -%}
+ {%- for category, m in messages -%}
+ <div class="flash flash-{{ category }}">
+ <div>{{ m }}</div>
+ <div class="flash-background"></div>
+ </div>
+ {%- endfor -%}
+ {%- endwith -%}
+{%- endmacro -%}
+
<!DOCTYPE HTML>
<html lang="{{ lang|default('de') }}">
<head>
@@ -55,6 +66,10 @@
{%- endblock nav -%}
<main>
+ <div class="flashes">
+ {{ flashes() }}
+ </div>
+
{%- block main -%}
{%- endblock main -%}
</main>
diff --git a/schilder2000/templates/schild.html.j2 b/schilder2000/templates/schild.html.j2
index d4bfa05..1b256f4 100644
--- a/schilder2000/templates/schild.html.j2
+++ b/schilder2000/templates/schild.html.j2
@@ -10,18 +10,6 @@
{% block main -%}
<div class="section-container">
- <div class="section">
- {%- with messages = get_flashed_messages() -%}
- {%- if messages -%}
- <ul class="flashes">
- {%- for m in messages -%}
- <li>{{ m }}</li>
- {%- endfor -%}
- </ul>
- {%- endif -%}
- {%- endwith -%}
- </div>
-
<div class="section">
<form method="post" action="">
{{ form.csrf_token }}
--
GitLab