edpibu/nummi
edpibu/nummi
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Improve forms

Browse source 
Form errors displayed correctly (fix #30)
Fix #26
Close #20
This commit is contained in:
Edgar P. Burkhart 2025-01-03 15:21:06 +01:00
parent 5b49836bad
commit d8961c8198
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
3 changed files with 45 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

47
nummi/main/static/main/css/form.css
View file

@ -1,10 +1,3 @@
form ul.errorlist {
color: var(--red);
font-weight: 550;
list-style-type: "! ";
margin: 0;
}
form {
display: grid;
gap: 0.5rem;
@ -29,26 +22,43 @@ form {
border: none;
}
ul.errorlist {
color: var(--red);
font-weight: 550;
list-style: none;
padding: 0;
margin: 0;
}
.field {
display: grid;
grid-auto-rows: min-content;
align-items: center;
overflow: hidden;
column-gap: 0.5rem;
ul.errorlist {
font-size: 0.8rem;
}
&:has(> textarea) {
grid-template-rows: min-content 1fr;
}
&:has(input[type="checkbox"]) {
&:has(> input[type="checkbox"]) {
grid-template-columns: min-content 1fr;
> label {
font-size: inherit;
grid-row: 1;
grid-column: 2;
padding: 0.5rem;
line-height: initial;
}
> input {
grid-row: 1;
grid-column: 1;
margin: 0.5rem;
}
&:has(> :focus) {
background: var(--bg-01);
}
}
@ -64,13 +74,19 @@ form {
font: inherit;
line-height: initial;
border: none;
border: 1px solid transparent;
border-bottom: 1px solid var(--gray);
background: none;
z-index: 1;
padding: 0;
padding: 0.5rem;
&:has(~ ul.errorlist) {
border-color: var(--red);
}
&:not([type="checkbox"]) {
width: 100%;
margin: 0;
}
&[name*="value"] {
@ -95,6 +111,9 @@ form {
grid-template-columns: 1fr;
grid-auto-columns: max-content;
grid-auto-flow: column;
a {
padding: 0.5rem;
}
}
input[type="file"] {
@ -107,6 +126,14 @@ form {
display: grid;
grid-template-columns: min-content 1fr;
column-gap: 0.5rem;
align-items: center;
span[class|="ri"] {
padding: 0.5rem;
}
&:has(> :focus) {
background: var(--bg-01);
}
}
}
}

33
nummi/main/templates/main/form/fileinput.html
View file

@ -5,7 +5,7 @@
<div class="current">
<a href="{{ widget.value.url }}" target="_blank">{{ "file"|remix }}{% translate "File" %} [{{ widget.value|extension }}]</a>
{% if not widget.required %}
<span class="checkbox">
<span class="field checkbox">
<label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>
<input type="checkbox"
name="{{ widget.checkbox_name }}"
@ -19,34 +19,3 @@
name="{{ widget.name }}"
{% include "django/forms/widgets/attrs.html" %}>
</div>
{% comment %}
<table class="file-input">
{% if widget.is_initial %}
<tr>
<th>{{ widget.initial_text }}</th>
<td>
<a href="{{ widget.value.url }}">{% translate "File" %} [{{ widget.value|extension }}]</a>
</td>
</tr>
{% if not widget.required %}
<tr>
<th>
<label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>
</th>
<td>
<input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}" {% if widget.attrs.disabled %}disabled{% endif %}>
</td>
</tr>
{% endif %}
<tr>
<th>{{ widget.input_text }}</th>
<td>
{% else %}
<tr>
<td colspan="2">
{% endif %}
<input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %}>
</td>
</tr>
</table>
{% endcomment %}

8
nummi/main/templates/main/form/form_base.html
View file

@ -12,10 +12,16 @@
{% for fieldset in group %}
<div class="fieldset">
{% for field in fieldset %}
{% if field.errors %}<p class="error">{{ field.errors }}</p>{% endif %}
<div class="field">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
{% if field.errors %}
<ul class="errorlist">
{% for error in field.errors %}
<li class="wi">{{ "error-warning"|remix }}{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endfor %}
</div>