DGNum/gestiojeux
15
0
Fork 1
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity

Improve form error display & simplify button style

Browse source
This commit is contained in:
Guillaume Bertholon 2020-12-29 20:22:36 +01:00
parent d4a9faef3e
commit ee364e2561
8 changed files with 191 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
accounts/forms.py
View file

@ -3,6 +3,8 @@ from .models import User
class AccountSettingsForm(ModelForm):
error_css_class = "errorfield"
class Meta:
model = User
fields = ["public_name"]

7
accounts/templates/registration/login_switch.html
View file

@ -3,15 +3,12 @@
{% block "content" %}
<h1>Mode de connexion</h1>
<div class="btn_row">
<a href="{{ cas_url }}">
<a class="button" href="{{ cas_url }}">
Compte clipper
</a>
<a href="{{ pass_url }}">
<a class="button" href="{{ pass_url }}">
Mot de passe
</a>
</div>
<p>Si vous êtes exté·e et que vous n'avez pas encore de compte, demandez en un.</p>
{% endblock %}

3
accounts/views.py
View file

@ -85,6 +85,9 @@ def on_login_failed(request, **kwargs):
class PasswordChangeView(PasswordChangeView):
template_name = "registration/change_password.html"
def __init__(self):
self.form_class.error_css_class = "errorfield"
def get_success_url(self):
messages.info(self.request, "Mot de passe mis à jour")
return reverse("accounts:account_settings")

8
inventory/templates/inventory/inventory.html
View file

@ -11,24 +11,22 @@
<hr/>
<div class="btn_row">
<a href="{% url "inventory:category_list" %}">
<a class="button" href="{% url "inventory:category_list" %}">
Liste des catégories
<p class="helptext">
Chaque jeu est rangé dans une unique catégorie comme en salle Jeux
</p>
</a>
<a href="{% url "inventory:tag_list" %}">
<a class="button" href="{% url "inventory:tag_list" %}">
Liste des tags
<p class="helptext">
Chaque jeu est marqué par tous les tags qui lui correspondent
</p>
</a>
<a href="{% url "inventory:game_list" %}">
<a class="button" href="{% url "inventory:game_list" %}">
Liste alphabétique
<p class="helptext">
La liste complète des jeux de la ludothèque
</p>
</a>
</div>
{% endblock %}

79
website/scss/forms.scss
View file

@ -3,21 +3,47 @@ form {
align-items: stretch;
flex-direction: column;
p {
margin: 5px 0;
width: 100%;
}
button {
margin: 10px 0;
}
.errorlist {
list-style-type: none;
margin: 0;
margin: 5px 0 0 0;
padding: 0;
font-size: 0.7em;
li {
@include error_box;
margin-bottom: 10px;
border-bottom: none;
border-radius: 0;
}
:first-child {
border-radius: 10px 10px 0 0;
}
&.nonfield {
margin: 0 0 10px;
:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom: 1px solid $error_box_border_color;
}
}
}
p {
margin: 5px 0;
width: 100%;
.errorfield {
padding: 10px;
border: solid 1px $error_box_border_color;
border-radius: 0 0 10px 10px;
margin-top: 0;
}
}
@ -27,7 +53,14 @@ form {
color: $help_text_color;
}
input, textarea {
.requiredfield label::after {
content: " *";
color: $header_border_color;
vertical-align: text-top;
font-size: 0.7em;
}
input, select, textarea {
display: block;
width: 100%;
font: inherit;
@ -39,6 +72,9 @@ input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
select[multiple],
textarea {
background-color: white;
border: solid 1px $help_text_color;
@ -80,31 +116,32 @@ select {
-webkit-appearance: none;
appearance: none;
&:not([multiple]) {
@include button;
width: 100%;
font-size: 0.9em;
margin: 0;
padding: 5px 25px 5px 10px;
border-radius: 5px;
text-align: left;
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
background-image: url('/static/img/select_arrow.svg');
background-repeat: no-repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
}
.formfield {
padding: 5px;
margin: 10px 0;
}
.error_field {
border-radius: 10px;
background-color: rgba($error_box_color, .4);
&[multiple] {
padding: 0;
option {
color: black;
background-color: lighten($header_border_color, 50%);
padding: 2px 10px;
&:hover {
background-color: lighten($header_border_color, 30%);
}
}
}
}
form.search {

1
website/scss/mixins.scss
View file

@ -21,7 +21,6 @@
display: block;
text-decoration: none;
text-align: center;
font-size: 100%;
color: $page_text_color;
@include box(lighten($header_border_color, 40%), $header_border_color);

18
website/scss/style.scss
View file

@ -103,18 +103,12 @@ ul, ol {
list-style-position: inside;
}
.btn_row {
display: flex;
align-items: stretch;
justify-content: space-evenly;
flex-direction: column;
}
button, .btn_row a {
button, .button {
@include button;
margin: 10px 0;
font: inherit;
margin: 20px 0;
p {
.helptext {
margin: 0;
}
}
@ -204,6 +198,7 @@ iframe {
#game_infos {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
@media (max-width: 500px) {
@ -212,6 +207,9 @@ iframe {
img {
width: 50%;
max-height: 20em;
object-fit: contain;
background-color: white;
border: solid $indexbar_bg_color_1;
border-radius: 10px;

99
website/static/css/style.css
View file

@ -76,9 +76,14 @@ form {
display: flex;
align-items: stretch;
flex-direction: column; }
form p {
margin: 5px 0;
width: 100%; }
form button {
margin: 10px 0; }
form .errorlist {
list-style-type: none;
margin: 0;
margin: 5px 0 0 0;
padding: 0;
font-size: 0.7em; }
form .errorlist li {
@ -86,17 +91,34 @@ form {
padding: 10px;
border: 1px solid #ff79a3;
background-color: #ffdfe9;
margin-bottom: 10px; }
form p {
margin: 5px 0;
width: 100%; }
border-bottom: none;
border-radius: 0; }
form .errorlist :first-child {
border-radius: 10px 10px 0 0; }
form .errorlist.nonfield {
margin: 0 0 10px; }
form .errorlist.nonfield :last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom: 1px solid #ff79a3; }
form .errorfield {
padding: 10px;
border: solid 1px #ff79a3;
border-radius: 0 0 10px 10px;
margin-top: 0; }
.helptext {
display: block;
font-size: 0.7em;
color: rgba(37, 15, 45, 0.65); }
input, textarea {
.requiredfield label::after {
content: " *";
color: #51808c;
vertical-align: text-top;
font-size: 0.7em; }
input, select, textarea {
display: block;
width: 100%;
font: inherit;
@ -107,6 +129,9 @@ input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
select[multiple],
textarea {
background-color: white;
border: solid 1px rgba(37, 15, 45, 0.65);
@ -117,12 +142,18 @@ textarea {
input[type="email"]:optional,
input[type="password"]:optional,
input[type="search"]:optional,
input[type="url"]:optional,
input[type="number"]:optional,
select[multiple]:optional,
textarea:optional {
border-color: rgba(37, 15, 45, 0.4); }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select[multiple]:focus,
textarea:focus {
border-color: #6bb8c4;
box-shadow: 0 0 1.5px 1px #6bb8c4; }
@ -130,6 +161,9 @@ textarea {
input[type="email"]:-moz-ui-invalid,
input[type="password"]:-moz-ui-invalid,
input[type="search"]:-moz-ui-invalid,
input[type="url"]:-moz-ui-invalid,
input[type="number"]:-moz-ui-invalid,
select[multiple]:-moz-ui-invalid,
textarea:-moz-ui-invalid {
border-color: #ff79a3;
box-shadow: 0 0 1.5px 1px #ff79a3; }
@ -149,7 +183,6 @@ input[type="submit"] {
display: block;
text-decoration: none;
text-align: center;
font-size: 100%;
color: #250f2d;
border-radius: 10px;
padding: 10px;
@ -163,41 +196,37 @@ input[type="submit"] {
select {
-webkit-appearance: none;
appearance: none;
appearance: none; }
select:not([multiple]) {
display: block;
text-decoration: none;
text-align: center;
font-size: 100%;
color: #250f2d;
border-radius: 10px;
padding: 10px;
border: 1px solid #51808c;
background-color: #c9dbe0;
width: 100%;
font-size: 0.9em;
margin: 0;
padding: 5px 25px 5px 10px;
border-radius: 5px;
text-align: left;
background-image: url("/static/img/select_arrow.svg");
background-repeat: no-repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%; }
select:hover {
select:not([multiple]):hover {
background-color: #a9c6cd; }
select:focus {
select:not([multiple]):focus {
background-color: #89b0ba;
box-shadow: 0 0 1.5px 1px #6bb8c4; }
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000; }
.formfield {
padding: 5px;
margin: 10px 0; }
.error_field {
border-radius: 10px;
background-color: rgba(255, 223, 233, 0.4); }
select[multiple] {
padding: 0; }
select[multiple] option {
color: black;
background-color: #e9f1f3;
padding: 2px 10px; }
select[multiple] option:hover {
background-color: #a9c6cd; }
form.search {
flex-direction: row; }
@ -306,29 +335,23 @@ ul, ol {
padding: 0;
list-style-position: inside; }
.btn_row {
display: flex;
align-items: stretch;
justify-content: space-evenly;
flex-direction: column; }
button, .btn_row a {
button, .button {
display: block;
text-decoration: none;
text-align: center;
font-size: 100%;
color: #250f2d;
border-radius: 10px;
padding: 10px;
border: 1px solid #51808c;
background-color: #c9dbe0;
margin: 10px 0; }
button:hover, .btn_row a:hover {
font: inherit;
margin: 20px 0; }
button:hover, .button:hover {
background-color: #a9c6cd; }
button:focus, .btn_row a:focus {
button:focus, .button:focus {
background-color: #89b0ba;
box-shadow: 0 0 1.5px 1px #6bb8c4; }
button p, .btn_row a p {
button .helptext, .button .helptext {
margin: 0; }
.messages {
@ -424,12 +447,16 @@ iframe {
#game_infos {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px; }
@media (max-width: 500px) {
#game_infos {
flex-direction: column; } }
#game_infos img {
width: 50%;
max-height: 20em;
object-fit: contain;
background-color: white;
border: solid rgba(107, 184, 196, 0.75);
border-radius: 10px; }
@media (max-width: 500px) {