diff --git a/frontend/src/main.less b/frontend/src/main.less index a28a9902d019e90964d806ab755ecb322e06ad10..56468733ef5fce78e6445e901caaf24e5691c9d4 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 70954c51f7adc66b1e4fb92e0a4e25565903952a..6e6816345ce79a21870d967f99181e60fceffb1c 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 d4bfa058320bf36d6abc886a3da7e139f28c468b..1b256f4ee465e90c5ab2eede3da0bd9f0d7d4d2d 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 }}