From ee364e2561290c9a800d57466f95da58739c25b7 Mon Sep 17 00:00:00 2001 From: Guillaume Bertholon Date: Tue, 29 Dec 2020 20:22:36 +0100 Subject: [PATCH] Improve form error display & simplify button style --- accounts/forms.py | 2 + .../templates/registration/login_switch.html | 7 +- accounts/views.py | 3 + inventory/templates/inventory/inventory.html | 38 +++-- website/scss/forms.scss | 117 +++++++++------ website/scss/mixins.scss | 1 - website/scss/style.scss | 18 ++- website/static/css/style.css | 135 +++++++++++------- 8 files changed, 191 insertions(+), 130 deletions(-) diff --git a/accounts/forms.py b/accounts/forms.py index ed4fc98..e33b693 100644 --- a/accounts/forms.py +++ b/accounts/forms.py @@ -3,6 +3,8 @@ from .models import User class AccountSettingsForm(ModelForm): + error_css_class = "errorfield" + class Meta: model = User fields = ["public_name"] diff --git a/accounts/templates/registration/login_switch.html b/accounts/templates/registration/login_switch.html index 3f154d5..0fd7dac 100644 --- a/accounts/templates/registration/login_switch.html +++ b/accounts/templates/registration/login_switch.html @@ -3,15 +3,12 @@ {% block "content" %}

Mode de connexion

-
- + Compte clipper - - + Mot de passe -

Si vous êtes exté·e et que vous n'avez pas encore de compte, demandez en un.

{% endblock %} diff --git a/accounts/views.py b/accounts/views.py index 7520d4c..277fd11 100644 --- a/accounts/views.py +++ b/accounts/views.py @@ -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") diff --git a/inventory/templates/inventory/inventory.html b/inventory/templates/inventory/inventory.html index 02e2e9a..f1129fc 100644 --- a/inventory/templates/inventory/inventory.html +++ b/inventory/templates/inventory/inventory.html @@ -11,24 +11,22 @@
-
- - Liste des catégories -

- Chaque jeu est rangé dans une unique catégorie comme en salle Jeux -

- - - Liste des tags -

- Chaque jeu est marqué par tous les tags qui lui correspondent -

- - - Liste alphabétique -

- La liste complète des jeux de la ludothèque -

- -
+ + Liste des catégories +

+ Chaque jeu est rangé dans une unique catégorie comme en salle Jeux +

+ + + Liste des tags +

+ Chaque jeu est marqué par tous les tags qui lui correspondent +

+ + + Liste alphabétique +

+ La liste complète des jeux de la ludothèque +

+ {% endblock %} diff --git a/website/scss/forms.scss b/website/scss/forms.scss index 642bfa0..a941b37 100644 --- a/website/scss/forms.scss +++ b/website/scss/forms.scss @@ -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 { diff --git a/website/scss/mixins.scss b/website/scss/mixins.scss index 36750d7..5b7ce7a 100644 --- a/website/scss/mixins.scss +++ b/website/scss/mixins.scss @@ -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); diff --git a/website/scss/style.scss b/website/scss/style.scss index e49d915..5ae4aec 100644 --- a/website/scss/style.scss +++ b/website/scss/style.scss @@ -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; diff --git a/website/static/css/style.css b/website/static/css/style.css index 5850af4..ac99256 100644 --- a/website/static/css/style.css +++ b/website/static/css/style.css @@ -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) {