Rationalise behaviours of context, container and cover:

- Set minimum dimensions to avoid having to pass classes all over the place.
- Outline the container to show white on white covers properly.
- Remove extraneous code.
- Better size caption when no cover is available.
- Create Alignments, Positions and Spacings sections and move some existing dimensions.
- Update previous templates.

bookwyrm/static/css/bookwyrm.css

@@ -159,43 +159,47 @@ body {
 
 /** Book covers
  *
- * - take the full width of their ancestor’s layout.
- * - take whatever height they need.
- *
- * When assigning a height, add the `has-height` class.
+ * - The context gives the extrinsic dimensions.
+ * - .cover-container gives the intrinsic dimensions and position.
+ * - .book-cover is positioned and sized based on its container.
  ******************************************************************************/
+
 .cover-container {
+    display: flex;
     position: relative;
     overflow: hidden;
+    min-width: 80px;
+    min-height: 100px;
+    max-width: max-content;
+    outline: solid 1px #dbdbdb;
 }
 
 /* Book cover
  * -------------------------------------------------------------------------- */
+
 .book-cover {
     display: block;
-    width: auto;
+    max-width: 100%;
+    max-height: 100%;
 
     /* Useful when stretching under-sized images. */
     image-rendering: optimizeQuality;
     image-rendering: smooth;
 }
 
-/* `height: inherit` makes sure the height computed is not approximative,
-    without specifying a fixed height. */
-[class~="has-height"] .book-cover {
-    height: inherit;
-    max-height: 100%;
-}
-
 /* Cover caption
  * -------------------------------------------------------------------------- */
+
 .no-cover .cover_caption {
     position: absolute;
-    padding: 0.25em;
-    color: white;
     top: 0;
+    right: 0;
+    bottom: 0;
     left: 0;
+    padding: 0.25em;
     font-size: 0.75em;
+    color: white;
+    background-color: #002549;
 }
 
 /** Avatars
@@ -206,16 +210,6 @@ body {
     display: inline;
 }
 
-.is-32x32 {
-    min-width: 32px;
-    min-height: 32px;
-}
-
-.is-96x96 {
-    min-width: 96px;
-    min-height: 96px;
-}
-
 /** Statuses: Quotes
  *
  * \e906: icon-quote-open
@@ -274,6 +268,16 @@ body {
 /* Dimensions
  ******************************************************************************/
 
+.is-32x32 {
+    min-width: 32px !important;
+    min-height: 32px !important;
+}
+
+.is-96x96 {
+    min-width: 96px !important;
+    min-height: 96px !important;
+}
+
 .is-h-small {
     height: 100px !important;
 }
@@ -283,15 +287,54 @@ body {
 }
 
 @media only screen and (max-width: 768px) {
-    .is-h-small-mobile {
-        height: 100px !important;
-    }
-
     .is-h-medium-mobile {
         height: 150px;
     }
 }
 
+.is-min-w-none {
+    min-width: auto !important;
+}
+
+/* Alignments
+ ******************************************************************************/
+
+/* Flex item position
+ *
+ * This is for a default `flex-direction: row`.
+ * -------------------------------------------------------------------------- */
+
+.align-r {
+    justify-content: flex-end;
+}
+
+@media screen and (min-width: 769px) {
+    .align-r-tablet {
+        justify-content: flex-end;
+    }
+}
+
+/* Spacings
+ ******************************************************************************/
+
+@media screen and (max-width: 768px) {
+    .my-3-mobile {
+        margin-top: 0.75rem !important;
+        margin-bottom: 0.75rem !important;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .ml-3-tablet {
+        margin-left: 0.75rem !important;
+    }
+
+    .mx-3-tablet {
+        margin-right: 0.75rem !important;
+        margin-left: 0.75rem !important;
+    }
+}
+
 /* Book preview table
  ******************************************************************************/
 

bookwyrm/templates/book/book.html

@@ -48,7 +48,7 @@
 
     <div class="columns">
         <div class="column is-one-fifth">
-            {% include 'snippets/book_cover.html' with book=book cover_class='has-height is-h-medium-mobile' %}
+            {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium-mobile' %}
             {% include 'snippets/rate_action.html' with user=request.user book=book %}
 
             <div class="mb-3">

bookwyrm/templates/book/editions.html

@@ -13,32 +13,32 @@
 
 <div class="block">
     {% for book in editions %}
-    <div class="columns">
-        <div class="column is-2">
-            <a href="/book/{{ book.id }}">
-                {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
-            </a>
+    <div class="columns is-gapless mb-6">
+        <div class="column is-2 is-flex align-r-tablet">
+            {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
         </div>
-        <div class="column is-7">
-            <h2 class="title is-5">
+
+        <div class="column is-flex-grow-1 my-3-mobile mx-3-tablet">
+            <h2 class="title is-5 mb-1">
                 <a href="/book/{{ book.id }}" class="has-text-black">
                     {{ book.title }}
                 </a>
             </h2>
 
             {% with book=book %}
-                <div class="columns is-multiline">
+                <div class="columns is-multiline is-gapless">
                     <div class="column is-half">
                         {% include 'book/publisher_info.html' %}
                     </div>
 
-                    <div class="column is-half ">
+                    <div class="column ml-3-tablet">
                         {% include 'book/book_identifiers.html' %}
                     </div>
                 </div>
             {% endwith %}
         </div>
-        <div class="column is-3">
+
+        <div class="column is-narrow">
             {% include 'snippets/shelve_button/shelve_button.html' with book=book switch_mode=True %}
         </div>
     </div>

bookwyrm/templates/lists/list_items.html

@@ -14,7 +14,7 @@
                     <div class="card-image columns is-mobile is-gapless is-clipped">
                         {% for book in list_books %}
                             <a class="column is-narrow" href="{{ book.book.local_path }}">
-                                {% include 'snippets/book_cover.html' with book=book.book cover_class='has-height is-h-small' aria='show' %}
+                                {% include 'snippets/book_cover.html' with book=book.book cover_class='is-min-w-none is-h-small' aria='show' %}
                             </a>
                         {% endfor %}
                     </div>