DGNum/annuaire-eleves
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style form errors.

Browse source
This commit is contained in:
Daru13 2020-09-24 21:18:27 +02:00
parent 99b7ee91f1
commit 46e71aeb0b
4 changed files with 110 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
fiches/static/fiches/css/annuaire.css
View file

@ -225,6 +225,32 @@ body {
background-color: #4e2d43;
}
#content-edit-profile form .form-entry > .errorlist.nonfield, #content-edit-profile form .form-sub-entry.erroneous {
padding: 10px;
background-color: #973232;
}
#content-edit-profile form .form-entry > .errorlist.nonfield, #content-edit-profile form .form-sub-entry .errorlist {
margin: 0;
padding: 0 0 10px 0;
list-style: none;
}
#content-edit-profile form .form-entry > .errorlist.nonfield li::before, #content-edit-profile form .form-sub-entry .errorlist li::before {
content: " ";
display: inline-block;
width: 24px;
height: 24px;
margin: -2px 0.5ex 0 0;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
vertical-align: middle;
}
#content-edit-profile form .form-entry > .errorlist.nonfield li:not(:last-child), #content-edit-profile form .form-sub-entry .errorlist li:not(:last-child) {
margin: 0 0 0.5ex 0;
}
#content-area {
color: #FFFFFF;
}
@ -384,21 +410,25 @@ body {
#content-edit-profile form .form-entry input, #content-edit-profile form .form-entry select {
width: 100%;
}
#content-edit-profile form .form-entry > .errorlist.nonfield {
padding: 10px;
margin: 10px 0;
}
#content-edit-profile form .form-sub-entry {
display: grid;
grid-template-rows: auto;
grid-template-rows: auto auto;
grid-template-columns: 2fr 3fr auto;
grid-template-areas: "type-input value-input remove-button";
grid-template-areas: "errors errors errors" "type-input value-input remove-button";
column-gap: 10px;
margin: 0 0 10px 0;
}
#content-edit-profile form .form-sub-entry.hidden {
display: none;
}
#content-edit-profile form .form-sub-entry :nth-child(1) {
#content-edit-profile form .form-sub-entry input:nth-child(1) {
grid-area: type-input;
}
#content-edit-profile form .form-sub-entry :nth-child(2) {
#content-edit-profile form .form-sub-entry input:nth-child(2) {
grid-area: value-input;
}
#content-edit-profile form .form-sub-entry .remove-button {
@ -417,6 +447,19 @@ body {
#content-edit-profile form .form-sub-entry input[type=checkbox] {
display: none;
}
#content-edit-profile form .form-sub-entry.erroneous input:nth-child(2) {
grid-area: type-input;
}
#content-edit-profile form .form-sub-entry.erroneous input:nth-child(3) {
grid-area: value-input;
}
#content-edit-profile form .form-sub-entry.erroneous .remove-button:hover,
#content-edit-profile form .form-sub-entry.erroneous .remove-button:active {
background-color: #7d2727;
}
#content-edit-profile form .form-sub-entry .errorlist {
grid-area: errors;
}
#content-edit-profile form .form-sub-entry-template {
display: none;
}

37
fiches/static/fiches/scss/_content.scss
View file

@ -1,5 +1,6 @@
@use "colors";
@use "buttons";
@use "errors";
#content-area {
color: colors.$content-text;
@ -210,13 +211,21 @@
input, select {
width: 100%;
}
> .errorlist.nonfield {
@extend %error-list-container;
@extend %error-list;
padding: 10px;
margin: 10px 0;
}
}
.form-sub-entry {
display: grid;
grid-template-rows: auto;
grid-template-rows: auto auto;
grid-template-columns: 2fr 3fr auto;
grid-template-areas:
"errors errors errors"
"type-input value-input remove-button";
column-gap: 10px;
margin: 0 0 10px 0;
@ -228,8 +237,8 @@
// Since the different labels and inputs are not obvious to identifiate using CSS selectors,
// they are selected one after the other using their natural order in the DOM
// TODO: make this more robust by giving proper class names to each sub-entry element
:nth-child(1) { grid-area: type-input; }
:nth-child(2) { grid-area: value-input; }
input:nth-child(1) { grid-area: type-input; }
input:nth-child(2) { grid-area: value-input; }
.remove-button {
grid-area: remove-button;
@ -249,6 +258,28 @@
input[type="checkbox"] {
display: none;
}
&.erroneous {
@extend %error-list-container;
// TODO: this is not robust and should be replaced by better selectors
// In case of error, increment the child indices
// to take the additional list of errors (.errorlist)
// prepended by Django to the sub-entry
input:nth-child(2) { grid-area: type-input; }
input:nth-child(3) { grid-area: value-input; }
// Use a darker red color when the sub-entry background is already red
.remove-button:hover,
.remove-button:active {
background-color: #7d2727;
}
}
.errorlist {
@extend %error-list;
grid-area: errors;
}
}
.form-sub-entry-template {

28
fiches/static/fiches/scss/_errors.scss Normal file
View file

@ -0,0 +1,28 @@
%error-list-container {
padding: 10px;
background-color: #973232;
}
%error-list {
margin: 0;
padding: 0 0 10px 0;
list-style: none;
li::before {
content: " ";
display: inline-block;
width: 24px;
height: 24px;
// A small top-margin is used to vertically center the icon with the text
margin: -2px 0.5ex 0 0;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
vertical-align: middle;
}
li:not(:last-child) {
margin: 0 0 0.5ex 0;
}
}

2
fiches/templates/fiches/multientry.html
View file

@ -2,7 +2,7 @@
{{ formset.management_form }}
{% for form in formset %}
{{ form.non_field_errors }}
<div class="form-sub-entry">
<div class="form-sub-entry {% if form.errors %}erroneous{% endif %}">
{% for field in form.visible_fields %}
{{field.errors}}
{{field}}