diff --git a/frontend/src/main.less b/frontend/src/main.less
index 966bf21fdf405d3ba15668e8397d989ad43d8a92..56468733ef5fce78e6445e901caaf24e5691c9d4 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -51,6 +51,16 @@ body, @{inputs}, @{buttons} {
@{inputs} {
padding: .2rem .3rem;
+ &.error {
+ border-color: red;
+ }
+}
+
+.input-error {
+ width: 100%;
+ font-size: .875em;
+ color: red;
+ grid-column-start: 2;
}
@{buttons} {
@@ -287,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 b27020f841287ef6c6904d240eb6aebbb6aff584..6e6816345ce79a21870d967f99181e60fceffb1c 100644
--- a/schilder2000/templates/_base.html.j2
+++ b/schilder2000/templates/_base.html.j2
@@ -5,6 +5,32 @@
href="{{ url_for(where) }}"
{%- endmacro -%}
+{%- macro render_field(field, class="") -%}
+ {% if field.type == "CSRFTokenField" -%}
+ {{ field }}
+ {%- else -%}
+ <div class="box">
+ {%- set error = ' error' if field.errors else '' -%}
+ {{ field.label(class="for-text"+error) }}
+ {{ field(class=class+error) }}
+ {%- for err in field.errors -%}
+ <div class="input-error">{{ err|e }}</div>
+ {%- endfor -%}
+ </div>
+ {%- 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>
@@ -40,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 615a8781823de4c567601591b6f50f8a4939d252..1b256f4ee465e90c5ab2eede3da0bd9f0d7d4d2d 100644
--- a/schilder2000/templates/schild.html.j2
+++ b/schilder2000/templates/schild.html.j2
@@ -1,24 +1,5 @@
{% extends "_base.html.j2" %}
-{% macro render_field(field, class="") -%}
- {% if field.type == "CSRFTokenField" -%}
- {{ field }}
- {%- else -%}
- <div class="box">
- {%- set error = ' error' if field.errors else '' -%}
- {{ field.label(class="for-text"+error) }}
- {{ field(class=class+error) }}
- {%- if field.errors -%}
- <ul class="errors">
- {%- for err in field.errors -%}
- <li>{{ err|e }}</li>
- {%- endfor -%}
- </ul>
- {%- endif -%}
- </div>
- {%- endif -%}
-{%- endmacro %}
-
{% block title -%}
{%- if schild -%}
{{ schild.title }}
@@ -29,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 }}