From 2665e3640e90ba62e50912a5e54b072490d08621 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 10 Sep 2021 14:19:57 -0700 Subject: [PATCH 1/7] CSS for half stars --- bookwyrm/static/css/bookwyrm.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index 324e7df2..41793cf5 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -170,6 +170,21 @@ body { content: '\e9d9'; /* icon-star-full */ } + +/* Icons directly following half star inputs are marked as half */ +.form-rate-stars input.half:checked ~ .icon::before { + content: '\e9d8'; /* icon-star-half */ +} + +/* Icons directly following half check inputs that follow the checked input are emptied. */ +.form-rate-stars input.half:checked + input + .icon ~ .icon::before { + content: '\e9d7'; /* icon-star-empty */ +} + +/* Icons directly following inputs that follow the checked input are emptied. */ +.form-rate-stars input:checked ~ input + .icon::before { + content: '\e9d7'; /* icon-star-empty */ +} /* Icons directly following inputs that follow the checked input are emptied. */ .form-rate-stars input:checked ~ input + .icon::before { content: '\e9d7'; /* icon-star-empty */ From 0be53f913330cd110ea47ddda383dc8e423b8cf1 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 10 Sep 2021 14:20:55 -0700 Subject: [PATCH 2/7] Adds half star markup --- .../templates/snippets/form_rate_stars.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/bookwyrm/templates/snippets/form_rate_stars.html b/bookwyrm/templates/snippets/form_rate_stars.html index fe2a2f03..dfd5a758 100644 --- a/bookwyrm/templates/snippets/form_rate_stars.html +++ b/bookwyrm/templates/snippets/form_rate_stars.html @@ -20,6 +20,24 @@ {% for i in '12345'|make_list %} + + {% blocktranslate trimmed count rating=forloop.counter %} From daf42a30dac35b9c8e34da6721c9697a41dd9d9a Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 10 Sep 2021 14:27:08 -0700 Subject: [PATCH 3/7] Adds javascript for half star ratings --- bookwyrm/static/js/status_cache.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/bookwyrm/static/js/status_cache.js b/bookwyrm/static/js/status_cache.js index 65901185..a6eaf034 100644 --- a/bookwyrm/static/js/status_cache.js +++ b/bookwyrm/static/js/status_cache.js @@ -14,6 +14,9 @@ let StatusCache = new class { 'submit', this.submitStatus.bind(this)) ); + + document.querySelectorAll('.form-rate-stars label.icon') + .forEach(button => button.addEventListener('click', this.toggleStar.bind(this))); } /** @@ -198,5 +201,24 @@ let StatusCache = new class { menu.click(); } } + + /** + * Reveal half-stars + * + * @param {Event} event + * @return {undefined} + */ + toggleStar(event) { + const label = event.currentTarget; + let wholeStar = document.getElementById(label.getAttribute("for")); + + if (wholeStar.checked) { + event.preventDefault(); + let halfStar = document.getElementById(label.dataset.forHalf); + + wholeStar.checked = null; + halfStar.checked = "checked"; + } + } }(); From 8840e09eacd5379d244e9127a7309c1b32fc8512 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 10 Sep 2021 14:41:55 -0700 Subject: [PATCH 4/7] Fixes labels --- bookwyrm/templates/snippets/form_rate_stars.html | 3 ++- bookwyrm/templatetags/stars.py | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 bookwyrm/templatetags/stars.py diff --git a/bookwyrm/templates/snippets/form_rate_stars.html b/bookwyrm/templates/snippets/form_rate_stars.html index dfd5a758..302f181e 100644 --- a/bookwyrm/templates/snippets/form_rate_stars.html +++ b/bookwyrm/templates/snippets/form_rate_stars.html @@ -1,5 +1,6 @@ {% spaceless %} {% load i18n %} +{% load stars %}
- {% blocktranslate trimmed count rating=forloop.counter0 with half_rating=forloop.counter0|add:""|add:"0.5" %} + {% blocktranslate trimmed count rating=forloop.counter0 with half_rating=forloop.counter0|half_star %} {{ half_rating }} star {% plural %} {{ half_rating }} stars diff --git a/bookwyrm/templatetags/stars.py b/bookwyrm/templatetags/stars.py new file mode 100644 index 00000000..d08dd8ef --- /dev/null +++ b/bookwyrm/templatetags/stars.py @@ -0,0 +1,11 @@ +""" template filters """ +from django import template + + +register = template.Library() + + +@register.filter(name="half_star") +def get_half_star(value): + """one of those things that's weirdly hard with templates""" + return f"{value}.5" From da5003c45e93ac9e531207e077eabddaba0ddd4e Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 10 Sep 2021 14:56:45 -0700 Subject: [PATCH 5/7] Fixes hover states --- bookwyrm/static/css/bookwyrm.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index 41793cf5..000ab6ca 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -170,33 +170,41 @@ body { content: '\e9d9'; /* icon-star-full */ } - /* Icons directly following half star inputs are marked as half */ .form-rate-stars input.half:checked ~ .icon::before { content: '\e9d8'; /* icon-star-half */ } +/* stylelint-disable no-descending-specificity */ +.form-rate-stars input.half:checked + input + .icon:hover::before { + content: '\e9d8' !important; /* icon-star-half */ +} + /* Icons directly following half check inputs that follow the checked input are emptied. */ .form-rate-stars input.half:checked + input + .icon ~ .icon::before { content: '\e9d7'; /* icon-star-empty */ } /* Icons directly following inputs that follow the checked input are emptied. */ +/* stylelint-disable no-descending-specificity */ .form-rate-stars input:checked ~ input + .icon::before { content: '\e9d7'; /* icon-star-empty */ } + /* Icons directly following inputs that follow the checked input are emptied. */ +/* stylelint-disable no-descending-specificity */ .form-rate-stars input:checked ~ input + .icon::before { content: '\e9d7'; /* icon-star-empty */ } /* When a label is hovered, repeat the fill-all-then-empty-following pattern. */ .form-rate-stars:hover .icon.icon::before { - content: '\e9d9'; /* icon-star-full */ + content: '\e9d9' !important; /* icon-star-full */ } +/* stylelint-disable no-descending-specificity */ .form-rate-stars .icon:hover ~ .icon::before { - content: '\e9d7'; /* icon-star-empty */ + content: '\e9d7' !important; /* icon-star-empty */ } /** Book covers From 3fdbd3035a428d90bd473957cb816bc513bb8254 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 10 Sep 2021 14:58:08 -0700 Subject: [PATCH 6/7] how to disable linter complaint?? --- bookwyrm/static/css/bookwyrm.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index 000ab6ca..b01cba5f 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -186,13 +186,11 @@ body { } /* Icons directly following inputs that follow the checked input are emptied. */ -/* stylelint-disable no-descending-specificity */ .form-rate-stars input:checked ~ input + .icon::before { content: '\e9d7'; /* icon-star-empty */ } /* Icons directly following inputs that follow the checked input are emptied. */ -/* stylelint-disable no-descending-specificity */ .form-rate-stars input:checked ~ input + .icon::before { content: '\e9d7'; /* icon-star-empty */ } @@ -202,7 +200,6 @@ body { content: '\e9d9' !important; /* icon-star-full */ } -/* stylelint-disable no-descending-specificity */ .form-rate-stars .icon:hover ~ .icon::before { content: '\e9d7' !important; /* icon-star-empty */ } From 926eb7646fd3f886f6b6602c713a372ebe4ee799 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 10 Sep 2021 15:03:01 -0700 Subject: [PATCH 7/7] Removes duplicate selector --- bookwyrm/static/css/bookwyrm.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index b01cba5f..872e89b1 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -190,11 +190,6 @@ body { content: '\e9d7'; /* icon-star-empty */ } -/* Icons directly following inputs that follow the checked input are emptied. */ -.form-rate-stars input:checked ~ input + .icon::before { - content: '\e9d7'; /* icon-star-empty */ -} - /* When a label is hovered, repeat the fill-all-then-empty-following pattern. */ .form-rate-stars:hover .icon.icon::before { content: '\e9d9' !important; /* icon-star-full */