From 485b0fa0f316de04a23ec3a749272dca02bc41b9 Mon Sep 17 00:00:00 2001 From: Fabien Basmaison Date: Sun, 4 Apr 2021 15:08:42 +0200 Subject: [PATCH] Simplify rating form: - Create a snippet to regroup similar code. - Reduce and document tricky logic of CSS. - Add i18n strings. --- bookwyrm/static/css/format.css | 50 ++---- .../snippets/create_status_form.html | 12 +- .../templates/snippets/form_rate_stars.html | 54 ++++++ bookwyrm/templates/snippets/rate_action.html | 12 +- bookwyrm/templates/snippets/stars.html | 25 ++- locale/fr_FR/LC_MESSAGES/django.mo | Bin 24275 -> 24395 bytes locale/fr_FR/LC_MESSAGES/django.po | 168 ++++++++++-------- 7 files changed, 189 insertions(+), 132 deletions(-) create mode 100644 bookwyrm/templates/snippets/form_rate_stars.html diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css index e3ae1ce79..ccd7277de 100644 --- a/bookwyrm/static/css/format.css +++ b/bookwyrm/static/css/format.css @@ -80,52 +80,34 @@ html { } } -/* --- STARS --- */ -.rate-stars button.icon { - background: none; - border: none; - padding: 0; - margin: 0; - display: inline; +/** Stars in a review form + * + * Specificity makes hovering taking over checked inputs. + * + * \e9d9: filled star + * \e9d7: empty star; + ******************************************************************************/ + +.form-rate-stars { + width: max-content; } -.rate-stars:hover .icon::before { +/* All stars are visually filled by default. */ +.form-rate-stars .icon::before { content: '\e9d9'; } -.rate-stars form:hover ~ form .icon::before { +/* Icons directly following inputs that follow the checked input are emptied. */ +.form-rate-stars input:checked ~ input + .icon::before { content: '\e9d7'; } -/** stars in a review form - * - * @todo Simplify the logic for those icons. - */ -.form-rate-stars input + .icon.icon::before { - content: '\e9d9'; -} - +/* When a label is hovered, repeat the fill-all-then-empty-following pattern. */ .form-rate-stars:hover .icon.icon::before { content: '\e9d9'; } -.form-rate-stars input:checked + .icon.icon::before { - content: '\e9d9'; -} - -.form-rate-stars input:checked + * ~ .icon.icon::before { - content: '\e9d7'; -} - -.form-rate-stars:hover label.icon.icon::before { - content: '\e9d9'; -} - -.form-rate-stars label.icon:hover::before { - content: '\e9d9'; -} - -.form-rate-stars label.icon:hover ~ label.icon.icon::before { +.form-rate-stars .icon:hover ~ .icon::before { content: '\e9d7'; } diff --git a/bookwyrm/templates/snippets/create_status_form.html b/bookwyrm/templates/snippets/create_status_form.html index c70a0e58b..091a2c6b7 100644 --- a/bookwyrm/templates/snippets/create_status_form.html +++ b/bookwyrm/templates/snippets/create_status_form.html @@ -27,16 +27,8 @@ {% if type == 'review' %}
{% trans "Rating" %} -
- - - {% for i in '12345'|make_list %} - - - {% endfor %} -
+ + {% include 'snippets/form_rate_stars.html' with book=book type=type|default:'summary' %}
{% endif %} diff --git a/bookwyrm/templates/snippets/form_rate_stars.html b/bookwyrm/templates/snippets/form_rate_stars.html new file mode 100644 index 000000000..25544739e --- /dev/null +++ b/bookwyrm/templates/snippets/form_rate_stars.html @@ -0,0 +1,54 @@ +{% spaceless %} +{% load i18n %} +{% load bookwyrm_tags %} + +
+ + + + + {% for i in '12345'|make_list %} + + + + {% endfor %} +
+{% endspaceless %} diff --git a/bookwyrm/templates/snippets/rate_action.html b/bookwyrm/templates/snippets/rate_action.html index 447a1c9ba..47662147f 100644 --- a/bookwyrm/templates/snippets/rate_action.html +++ b/bookwyrm/templates/snippets/rate_action.html @@ -8,18 +8,8 @@ - -
- - - {% for i in '12345'|make_list %} - - - {% endfor %} -
+ {% include 'snippets/form_rate_stars.html' with book=book classes='mb-1 has-text-warning-dark' %}