HackENS/gestiojeux
5
0
Fork 0
forked from DGNum/gestiojeux
Code Pull requests 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): class AccountSettingsForm(ModelForm):
error_css_class = "errorfield"
class Meta: class Meta:
model = User model = User
fields = ["public_name"] fields = ["public_name"]

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

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

3
accounts/views.py
View file

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

38
inventory/templates/inventory/inventory.html
View file

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

117
website/scss/forms.scss
View file

@ -3,21 +3,47 @@ form {
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
.errorlist { p {
list-style-type: none; margin: 5px 0;
margin: 0; width: 100%;
padding: 0;
font-size: 0.7em;
li {
@include error_box;
margin-bottom: 10px;
}
} }
p { button {
margin: 5px 0; margin: 10px 0;
width: 100%; }
.errorlist {
list-style-type: none;
margin: 5px 0 0 0;
padding: 0;
font-size: 0.7em;
li {
@include error_box;
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;
}
}
}
.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; 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; display: block;
width: 100%; width: 100%;
font: inherit; font: inherit;
@ -39,6 +72,9 @@ input[type="text"],
input[type="email"], input[type="email"],
input[type="password"], input[type="password"],
input[type="search"], input[type="search"],
input[type="url"],
input[type="number"],
select[multiple],
textarea { textarea {
background-color: white; background-color: white;
border: solid 1px $help_text_color; border: solid 1px $help_text_color;
@ -47,15 +83,15 @@ textarea {
box-shadow: none; box-shadow: none;
&:optional { &:optional {
border-color: fade-out($help_text_color, .25); border-color: fade-out($help_text_color, .25);
} }
&:focus { &:focus {
border-color: $header_bg_color; border-color: $header_bg_color;
box-shadow: 0 0 1.5px 1px $header_bg_color; box-shadow: 0 0 1.5px 1px $header_bg_color;
} }
&:-moz-ui-invalid { &:-moz-ui-invalid {
border-color: $error_box_border_color; border-color: $error_box_border_color;
box-shadow: 0 0 1.5px 1px $error_box_border_color; box-shadow: 0 0 1.5px 1px $error_box_border_color;
} }
} }
@ -80,31 +116,32 @@ select {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
@include button; &:not([multiple]) {
width: 100%; @include button;
font-size: 0.9em; margin: 0;
margin: 0; padding: 5px 25px 5px 10px;
padding: 5px 25px 5px 10px; border-radius: 5px;
text-align: left; text-align: left;
&:-moz-focusring { background-image: url('/static/img/select_arrow.svg');
color: transparent; background-repeat: no-repeat;
text-shadow: 0 0 0 #000; background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
} }
background-image: url('/static/img/select_arrow.svg'); &[multiple] {
background-repeat: no-repeat; padding: 0;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
.formfield { option {
padding: 5px; color: black;
margin: 10px 0; background-color: lighten($header_border_color, 50%);
} padding: 2px 10px;
.error_field {
border-radius: 10px; &:hover {
background-color: rgba($error_box_color, .4); background-color: lighten($header_border_color, 30%);
}
}
}
} }
form.search { form.search {

1
website/scss/mixins.scss
View file

@ -21,7 +21,6 @@
display: block; display: block;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
font-size: 100%;
color: $page_text_color; color: $page_text_color;
@include box(lighten($header_border_color, 40%), $header_border_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; list-style-position: inside;
} }
.btn_row { button, .button {
display: flex;
align-items: stretch;
justify-content: space-evenly;
flex-direction: column;
}
button, .btn_row a {
@include button; @include button;
margin: 10px 0; font: inherit;
margin: 20px 0;
p { .helptext {
margin: 0; margin: 0;
} }
} }
@ -204,6 +198,7 @@ iframe {
#game_infos { #game_infos {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
gap: 20px; gap: 20px;
@media (max-width: 500px) { @media (max-width: 500px) {
@ -212,6 +207,9 @@ iframe {
img { img {
width: 50%; width: 50%;
max-height: 20em;
object-fit: contain;
background-color: white;
border: solid $indexbar_bg_color_1; border: solid $indexbar_bg_color_1;
border-radius: 10px; border-radius: 10px;

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

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