cover: Use book-cover as component:

- Avoid specifying context-dependent values in CSS for components. Those values can be defined by the context calling the component.
- Use `<figure>` with optional caption.
- Reduce redundant markup.
- Allow more variables to be passed to the book-cover (image path and class for the container).
- Hide the book cover to screen readers.

bookwyrm/static/css/bookwyrm.css

@@ -117,14 +117,14 @@ body {
 }
 
 /** Book covers
+ *
+ * The book cover takes the full width of its ancestor’s layout.
  ******************************************************************************/
-
 .cover-container {
-    height: 250px;
+    position: relative;
-    width: max-content;
-    max-width: 250px;
 }
 
+/*
 .cover-container.is-large {
     height: max-content;
     max-width: 330px;
@@ -153,26 +153,25 @@ body {
         height: 100px;
     }
 }
+*/
 
 .book-cover {
-    height: 100%;
+    display: block;
-    object-fit: scale-down;
+    width: 100%;
+
+    /* Usweful when stretching under-sized images. */
+    image-rendering: optimizeQuality;
 }
 
-.no-cover {
+.no-cover .cover_caption {
-    position: relative;
-    white-space: normal;
-}
-
-.no-cover div {
     position: absolute;
     padding: 1em;
     color: white;
     top: 0;
     left: 0;
-    text-align: center;
 }
 
+/*
 .cover-container.is-medium .no-cover div {
     font-size: 0.9em;
     padding: 0.3em;
@@ -182,6 +181,7 @@ body {
     font-size: 0.7em;
     padding: 0.1em;
 }
+*/
 
 /** Avatars
  ******************************************************************************/

bookwyrm/templates/discover/large-book.html

@@ -1,19 +1,36 @@
+
 {% load bookwyrm_tags %}
 {% load i18n %}
+
 {% if book %}
-<div class="columns">
+    {% with book=book %}
-    <div class="column is-narrow">
+        <div class="columns">
-        <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book size="large" %}</a>
+            <div class="column">
-        {% include 'snippets/stars.html' with rating=book|rating:request.user %}
+                <a
-    </div>
+                    href="{{ book.local_path }}"
-    <div class="column">
+                >{% include 'snippets/book_cover.html' with size="large" %}</a>
-        <h3 class="title is-5"><a href="/book/{{ book.id }}">{{ book.title }}</a></h3>
+
-        {% if book.authors %}
+                {% include 'snippets/stars.html' with rating=book|rating:request.user %}
-        <p class="subtitle is-5">{% trans "by" %} {% include 'snippets/authors.html' with book=book %}</p>
+            </div>
-        {% endif %}
+
-        {% if book|book_description %}
+            <div class="column">
-        <blockquote class="content">{{ book|book_description|to_markdown|safe|truncatewords_html:50 }}</blockquote>
+                <h3 class="title is-5">
-        {% endif %}
+                    <a href="/book/{{ book.id }}">{{ book.title }}</a>
-    </div>
+                </h3>
-</div>
+
+                {% if book.authors %}
+                    <p class="subtitle is-5">
+                        {% trans "by" %}
+                        {% include 'snippets/authors.html' %}
+                    </p>
+                {% endif %}
+
+                {% if book|book_description %}
+                    <blockquote class="content">
+                        {{ book|book_description|to_markdown|safe|truncatewords_html:50 }}
+                    </blockquote>
+                {% endif %}
+            </div>
+        </div>
+    {% endwith %}
 {% endif %}

bookwyrm/templates/discover/small-book.html

@@ -1,12 +1,24 @@
+
 {% load bookwyrm_tags %}
 {% load i18n %}
+
 {% if book %}
-<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book %}</a>
+    {% with book=book %}
-{% include 'snippets/stars.html' with rating=book|rating:request.user %}
+        <a
+            href="{{ book.local_path }}"
+        >{% include 'snippets/book_cover.html' with size="small" %}</a>
 
-<h3 class="title is-6"><a href="/book/{{ book.id }}">{{ book.title }}</a></h3>
+        {% include 'snippets/stars.html' with rating=book|rating:request.user %}
-{% if book.authors %}
-<p class="subtitle is-6">{% trans "by" %} {% include 'snippets/authors.html' with book=book %}</p>
-{% endif %}
 
+        <h3 class="title is-6">
+            <a href="/book/{{ book.id }}">{{ book.title }}</a>
+        </h3>
+
+        {% if book.authors %}
+            <p class="subtitle is-6">
+                {% trans "by" %}
+                {% include 'snippets/authors.html' %}
+            </p>
+        {% endif %}
+    {% endwith %}
 {% endif %}

bookwyrm/templates/snippets/book_cover.html

@@ -3,27 +3,48 @@
 {% load bookwyrm_tags %}
 {% load i18n %}
 
-<div class="cover-container is-{{ size }}">
+<figure
-    {% if book.cover %}
+    class="
-        <img
+        cover-container
-            class="book-cover"
+        is-flex
-            src="/images/{{ book.cover }}"
+        is-align-items-center
-            alt="{{ book.alt_text }}"
-            title="{{ book.alt_text }}"
-            itemprop="thumbnailUrl"
-        >
-    {% else %}
-        <div class="no-cover book-cover">
-            <img
-                class="book-cover"
-                src="/static/images/no_cover.jpg"
-                alt="{% trans "No cover" %}"
-            >
 
-            <div>
+        {% if not book.cover %}
-                <p>{{ book.alt_text }}</p>
+            no-cover
-            </div>
+        {% endif %}
-        </div>
+
+        {% if size %}
+            is-{{ size }}
+        {% endif %}
+
+        {% if container_class %}
+            {{ container_class }}
+        {% endif %}
+    "
+    aria-hidden="true"
+
+>
+    <img
+        class="book-cover"
+
+        {% if book.cover %}
+            src="{% if img_path is None %}/images/{% else %}{{ img_path }}{% endif %}{{ book.cover }}"
+            itemprop="thumbnailUrl"
+
+            {% if book.alt_text %}
+                alt="{{ book.alt_text }}"
+                title="{{ book.alt_text }}"
+            {% endif %}
+        {% else %}
+            src="/static/images/no_cover.jpg"
+            alt="{% trans "No cover" %}"
+        {% endif %}
+    >
+
+    {% if not book.cover and book.alt_text %}
+        <figcaption class="cover_caption">
+            <p>{{ book.alt_text }}</p>
+        </figcaption>
     {% endif %}
-</div>
+</figure>
 {% endspaceless %}