forked from DGNum/gestiojeux
Improve form error display & simplify button style
This commit is contained in:
Guillaume Bertholon
parent
d4a9faef3e
commit
ee364e2561
8 changed files with 191 additions and 130 deletions
|
|
@ -3,6 +3,8 @@ from .models import User
|
|||
|
||||
|
||||
class AccountSettingsForm(ModelForm):
|
||||
error_css_class = "errorfield"
|
||||
|
||||
class Meta:
|
||||
model = User
|
||||
fields = ["public_name"]
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -11,24 +11,22 @@
|
|||
|
||||
<hr/>
|
||||
|
||||
<div class="btn_row">
|
||||
<a 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" %}">
|
||||
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" %}">
|
||||
Liste alphabétique
|
||||
<p class="helptext">
|
||||
La liste complète des jeux de la ludothèque
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<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 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 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>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -3,21 +3,47 @@ form {
|
|||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
|
||||
.errorlist {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.7em;
|
||||
|
||||
li {
|
||||
@include error_box;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p {
|
||||
margin: 5px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0;
|
||||
width: 100%;
|
||||
button {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
@ -47,15 +83,15 @@ textarea {
|
|||
box-shadow: none;
|
||||
|
||||
&:optional {
|
||||
border-color: fade-out($help_text_color, .25);
|
||||
border-color: fade-out($help_text_color, .25);
|
||||
}
|
||||
&:focus {
|
||||
border-color: $header_bg_color;
|
||||
box-shadow: 0 0 1.5px 1px $header_bg_color;
|
||||
border-color: $header_bg_color;
|
||||
box-shadow: 0 0 1.5px 1px $header_bg_color;
|
||||
}
|
||||
&:-moz-ui-invalid {
|
||||
border-color: $error_box_border_color;
|
||||
box-shadow: 0 0 1.5px 1px $error_box_border_color;
|
||||
border-color: $error_box_border_color;
|
||||
box-shadow: 0 0 1.5px 1px $error_box_border_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,31 +116,32 @@ select {
|
|||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
@include button;
|
||||
width: 100%;
|
||||
font-size: 0.9em;
|
||||
margin: 0;
|
||||
padding: 5px 25px 5px 10px;
|
||||
text-align: left;
|
||||
&:not([multiple]) {
|
||||
@include button;
|
||||
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%;
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
&[multiple] {
|
||||
padding: 0;
|
||||
|
||||
.formfield {
|
||||
padding: 5px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.error_field {
|
||||
border-radius: 10px;
|
||||
background-color: rgba($error_box_color, .4);
|
||||
option {
|
||||
color: black;
|
||||
background-color: lighten($header_border_color, 50%);
|
||||
padding: 2px 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($header_border_color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.search {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
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;
|
||||
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 {
|
||||
background-color: #a9c6cd; }
|
||||
select: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); }
|
||||
appearance: none; }
|
||||
select:not([multiple]) {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: #250f2d;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #51808c;
|
||||
background-color: #c9dbe0;
|
||||
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:not([multiple]):hover {
|
||||
background-color: #a9c6cd; }
|
||||
select:not([multiple]):focus {
|
||||
background-color: #89b0ba;
|
||||
box-shadow: 0 0 1.5px 1px #6bb8c4; }
|
||||
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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue