Show “no rating” instead of stars if the review has no rating

The stars.html template now outputs a span containing “no rating” when
the stars represent a non-existent or zero rating. This text is already
translated because it was previously added as a invisible text only for
screen readers. The span is given a special CSS class so that it can be
styled as italic in the stylesheet.

There is now also an extra span in book.html to group the stars with the
“(2 reviews)” text. This is needed because the outer div is using a flex
layout and it eats the spacing between the two parts otherwise.

Fixes #2856
This commit is contained in:
Neil Roberts 2023-05-22 14:54:10 +02:00
parent ee1dd612fb
commit 603b2d9502
3 changed files with 27 additions and 22 deletions

View file

@ -5,6 +5,10 @@
white-space: nowrap;
}
.stars .no-rating {
font-style: italic;
}
/** Stars in a review form
*
* Specificity makes hovering taking over checked inputs.

View file

@ -190,13 +190,15 @@
<meta itemprop="bestRating" content="5">
<meta itemprop="reviewCount" content="{{ review_count }}">
{% include 'snippets/stars.html' with rating=rating %}
<span>
{% include 'snippets/stars.html' with rating=rating %}
{% blocktrans count counter=review_count trimmed %}
({{ review_count }} review)
{% plural %}
({{ review_count }} reviews)
{% endblocktrans %}
{% blocktrans count counter=review_count trimmed %}
({{ review_count }} review)
{% plural %}
({{ review_count }} reviews)
{% endblocktrans %}
</span>
</div>
{% with full=book|book_description itemprop='abstract' %}

View file

@ -2,26 +2,25 @@
{% load i18n %}
<span class="stars">
<span class="is-sr-only">
{% if rating %}
{% if rating %}
<span class="is-sr-only">
{% blocktranslate trimmed with rating=rating|floatformat:0 count counter=rating|floatformat:0|add:0 %}
{{ rating }} star
{% plural %}
{{ rating }} stars
{% endblocktranslate %}
{% else %}
{% trans "No rating" %}
{% endif %}
</span>
{% for i in '12345'|make_list %}
<span
class="
icon is-small mr-1
icon-star-{% if rating >= forloop.counter %}full{% elif rating|floatformat:0 >= forloop.counter|floatformat:0 %}half{% else %}empty{% endif %}
"
aria-hidden="true"
></span>
{% endfor %}
</span>
{% for i in '12345'|make_list %}
<span
class="
icon is-small mr-1
icon-star-{% if rating >= forloop.counter %}full{% elif rating|floatformat:0 >= forloop.counter|floatformat:0 %}half{% else %}empty{% endif %}
"
aria-hidden="true"
></span>
{% endfor %}
{% else %}
<span class="no-rating">{% trans "No rating" %}</span>
{% endif %}
</span>
{% endspaceless %}