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

bookwyrm/static/css/bookwyrm/components/_stars.scss

@@ -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.

bookwyrm/templates/book/book.html

@@ -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 %}
+                        {% blocktrans count counter=review_count trimmed %}
-                        ({{ review_count }} review)
+                            ({{ review_count }} review)
-                    {% plural %}
+                        {% plural %}
-                        ({{ review_count }} reviews)
+                            ({{ review_count }} reviews)
-                    {% endblocktrans %}
+                        {% endblocktrans %}
+                    </span>
                 </div>
 
                 {% with full=book|book_description itemprop='abstract' %}

bookwyrm/templates/snippets/stars.html

@@ -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 %}
+        </span>
-            {% trans "No rating" %}
+        {% for i in '12345'|make_list %}
-        {% endif %}
+            <span
-    </span>
+                class="
-
+                    icon is-small mr-1
-    {% for i in '12345'|make_list %}
+                    icon-star-{% if rating >= forloop.counter %}full{% elif rating|floatformat:0 >= forloop.counter|floatformat:0 %}half{% else %}empty{% endif %}
-        <span
+                "
-            class="
+                aria-hidden="true"
-                icon is-small mr-1
+            ></span>
-                icon-star-{% if rating >= forloop.counter %}full{% elif rating|floatformat:0 >= forloop.counter|floatformat:0 %}half{% else %}empty{% endif %}
+        {% endfor %}
-            "
+    {% else %}
-            aria-hidden="true"
+        <span class="no-rating">{% trans "No rating" %}</span>
-        ></span>
+    {% endif %}
-    {% endfor %}
 </span>
 {% endspaceless %}