From 9b2e63fdbb02a0bcd75f4f9e1ceba527a51216de Mon Sep 17 00:00:00 2001
From: Thomas Schneider <thomas@fsmpi.rwth-aachen.de>
Date: Thu, 12 Sep 2024 16:52:59 +0200
Subject: [PATCH] Nicer display for input validation errors
---
frontend/src/main.less | 10 ++++++++++
schilder2000/templates/_base.html.j2 | 10 +++-------
2 files changed, 13 insertions(+), 7 deletions(-)
diff --git a/frontend/src/main.less b/frontend/src/main.less
index 966bf21..a28a990 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} {
diff --git a/schilder2000/templates/_base.html.j2 b/schilder2000/templates/_base.html.j2
index 1f45b6d..70954c5 100644
--- a/schilder2000/templates/_base.html.j2
+++ b/schilder2000/templates/_base.html.j2
@@ -13,13 +13,9 @@
{%- 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 -%}
+ {%- for err in field.errors -%}
+ <div class="input-error">{{ err|e }}</div>
+ {%- endfor -%}
</div>
{%- endif -%}
{%- endmacro -%}
--
GitLab