diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css index e3ae1ce7..ccd7277d 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 c70a0e58..091a2c6b 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 00000000..25544739 --- /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 447a1c9b..47662147 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' %}