From 603b2d95023081a16eb2d4df4dd1d47ec68d7613 Mon Sep 17 00:00:00 2001
From: Neil Roberts <bpeeluk@yahoo.co.uk>
Date: Mon, 22 May 2023 14:54:10 +0200
Subject: [PATCH] =?UTF-8?q?Show=20=E2=80=9Cno=20rating=E2=80=9D=20instead?=
 =?UTF-8?q?=20of=20stars=20if=20the=20review=20has=20no=20rating?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../css/bookwyrm/components/_stars.scss       |  4 +++
 bookwyrm/templates/book/book.html             | 14 +++++----
 bookwyrm/templates/snippets/stars.html        | 31 +++++++++----------
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm/components/_stars.scss b/bookwyrm/static/css/bookwyrm/components/_stars.scss
index 1a8e3680f..db2772dc0 100644
--- a/bookwyrm/static/css/bookwyrm/components/_stars.scss
+++ b/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.
diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index e24f81d79..6dc53fba9 100644
--- a/bookwyrm/templates/book/book.html
+++ b/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 %}
-                        ({{ 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' %}
diff --git a/bookwyrm/templates/snippets/stars.html b/bookwyrm/templates/snippets/stars.html
index ffe4835f0..991110151 100644
--- a/bookwyrm/templates/snippets/stars.html
+++ b/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 %}
-            {% 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 %}