cover: Change the logic again:

- Work on feeds.
- Add `.is-cover` to modify the behaviours of columns.
- Only apply logic for dimensions on the cover container; too many contextual side effects otherwise.
- Add classes to dimension and align, including auto margins for flex.
- Rename classes in templates accordingly.

bookwyrm/static/css/bookwyrm.css

@@ -159,19 +159,33 @@ body {
 
 /** Book covers
  *
- * - The context gives the extrinsic dimensions.
+ * - .is-cover gives the behaviour of the cover and its surrounding.
- * - .cover-container gives the intrinsic dimensions and position.
+ * - .cover-container gives the dimensions and position (for borders, image and other elements).
  * - .book-cover is positioned and sized based on its container.
+ *
+ * To have the cover with specific dimensions, specify a width or height for
+ * standard bulma’s named breapoints:
+ *
+ * is-[w|h]-[xs|s|m|l|xl]-[mobile|tablet|desktop]
  ******************************************************************************/
 
+.column.is-cover {
+    flex-grow: 0 !important;
+}
+
+.column.is-cover,
+.column.is-cover + .column {
+    flex-basis: auto !important;
+}
+
 .cover-container {
     display: flex;
+    justify-content: center;
+    align-items: center;
     position: relative;
+    width: max-content;
+    max-width: 100%;
     overflow: hidden;
-    min-width: 80px;
-    min-height: 100px;
-    max-width: max-content;
-    outline: solid 1px #dbdbdb;
 }
 
 /* Book cover
@@ -278,46 +292,231 @@ body {
     min-height: 96px !important;
 }
 
-.is-h-small {
+.is-w-auto {
+    width: auto !important;
+}
+
+.is-w-xs {
+    width: 80px !important;
+}
+
+.is-w-s {
+    width: 100px !important;
+}
+
+.is-w-m {
+    width: 150px !important;
+}
+
+.is-w-l {
+    width: 200px !important;
+}
+
+.is-h-xs {
+    height: 80px !important;
+}
+
+.is-h-s {
     height: 100px !important;
 }
 
-.is-h-medium {
+.is-h-m {
     height: 150px !important;
 }
 
+.is-h-l {
+    height: 200px !important;
+}
+
 @media only screen and (max-width: 768px) {
-    .is-h-medium-mobile {
+    .is-w-auto-mobile {
-        height: 150px;
+        width: auto !important;
+    }
+
+    .is-w-xs-mobile {
+        width: 80px !important;
+    }
+
+    .is-w-s-mobile {
+        width: 100px !important;
+    }
+
+    .is-w-m-mobile {
+        width: 150px !important;
+    }
+
+    .is-w-l-mobile {
+        width: 200px !important;
+    }
+
+    .is-h-xs-mobile {
+        height: 80px !important;
+    }
+
+    .is-h-s-mobile {
+        height: 100px !important;
+    }
+
+    .is-h-m-mobile {
+        height: 150px !important;
+    }
+
+    .is-h-l-mobile {
+        height: 200px !important;
     }
 }
 
-.is-min-w-none {
+@media only screen and (min-width: 769px) {
-    min-width: auto !important;
+    .is-w-auto-tablet {
+        width: auto !important;
+    }
+
+    .is-w-xs-tablet {
+        width: 80px !important;
+    }
+
+    .is-w-s-tablet {
+        width: 100px !important;
+    }
+
+    .is-w-m-tablet {
+        width: 150px !important;
+    }
+
+    .is-w-l-tablet {
+        width: 200px !important;
+    }
+
+    .is-h-xs-tablet {
+        height: 80px !important;
+    }
+
+    .is-h-s-tablet {
+        height: 100px !important;
+    }
+
+    .is-h-m-tablet {
+        height: 150px !important;
+    }
+
+    .is-h-l-tablet {
+        height: 200px !important;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    .is-w-auto-desktop {
+        width: auto !important;
+    }
+
+    .is-w-xs-desktop {
+        width: 80px !important;
+    }
+
+    .is-w-s-desktop {
+        width: 100px !important;
+    }
+
+    .is-w-m-desktop {
+        width: 150px !important;
+    }
+
+    .is-w-l-desktop {
+        width: 200px !important;
+    }
+
+    .is-h-xs-desktop {
+        height: 80px !important;
+    }
+
+    .is-h-s-desktop {
+        height: 100px !important;
+    }
+
+    .is-h-m-desktop {
+        height: 150px !important;
+    }
+
+    .is-h-l-desktop {
+        height: 200px !important;
+    }
 }
 
 /* Alignments
  ******************************************************************************/
 
 /* Flex item position
- *
- * This is for a default `flex-direction: row`.
  * -------------------------------------------------------------------------- */
 
-.align-r {
+.align {
-    justify-content: flex-end;
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.align.to-c {
+    justify-content: center !important;
+}
+
+.align.to-r {
+    justify-content: flex-end !important;
+}
+
+.align.to-l {
+    justify-content: flex-start !important;
+}
+
+@media screen and (max-width: 768px) {
+    .align.to-c-mobile {
+        justify-content: center !important;
+    }
+
+    .align.to-r-mobile {
+        justify-content: flex-end !important;
+    }
+
+    .align.to-l-mobile {
+        justify-content: flex-start !important;
+    }
 }
 
 @media screen and (min-width: 769px) {
-    .align-r-tablet {
+    .align.to-c-tablet {
-        justify-content: flex-end;
+        justify-content: center !important;
+    }
+
+    .align.to-r-tablet {
+        justify-content: flex-end !important;
+    }
+
+    .align.to-l-tablet {
+        justify-content: flex-start !important;
     }
 }
 
 /* Spacings
  ******************************************************************************/
 
+.mr-auto {
+    margin-right: auto !important;
+}
+
+.ml-auto {
+    margin-left: auto !important;
+}
+
 @media screen and (max-width: 768px) {
+    .mr-auto-mobile {
+        margin-right: auto !important;
+    }
+
+    .ml-auto-mobile {
+        margin-left: auto !important;
+    }
+
+    .ml-3-mobile {
+        margin-left: 0.75rem !important;
+    }
+
     .my-3-mobile {
         margin-top: 0.75rem !important;
         margin-bottom: 0.75rem !important;
@@ -325,6 +524,14 @@ body {
 }
 
 @media screen and (min-width: 769px) {
+    .mr-auto-tablet {
+        margin-right: auto !important;
+    }
+
+    .ml-auto-tablet {
+        margin-left: auto !important;
+    }
+
     .ml-3-tablet {
         margin-left: 0.75rem !important;
     }

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='is-h-medium-mobile' %}
+            {% include 'snippets/book_cover.html' with book=book cover_class='is-h-m-mobile' %}
             {% include 'snippets/rate_action.html' with user=request.user book=book %}
 
             <div class="mb-3">

bookwyrm/templates/book/edit_book.html

@@ -170,7 +170,7 @@
             <h2 class="title is-4">{% trans "Cover" %}</h2>
             <div class="columns">
                 <div class="column is-narrow">
-                    {% include 'snippets/book_cover.html' with book=book cover_class='is-h-small' %}
+                    {% include 'snippets/book_cover.html' with book=book cover_class='is-h-s' %}
                 </div>
                 <div class="column is-narrow">
                     <div class="block">

bookwyrm/templates/book/editions.html

@@ -14,11 +14,11 @@
 <div class="block">
     {% for book in editions %}
     <div class="columns is-gapless mb-6">
-        <div class="column is-2 is-flex align-r-tablet">
+        <div class="column is-cover">
-            {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
+            {% include 'snippets/book_cover.html' with book=book cover_class='is-w-m is-h-m align to-l-mobile' %}
         </div>
 
-        <div class="column is-flex-grow-1 my-3-mobile mx-3-tablet">
+        <div class="column my-3-mobile ml-3-tablet mr-auto">
             <h2 class="title is-5 mb-1">
                 <a href="/book/{{ book.id }}" class="has-text-black">
                     {{ book.title }}
@@ -26,7 +26,7 @@
             </h2>
 
             {% with book=book %}
-                <div class="columns is-multiline is-gapless">
+                <div class="columns is-multiline is-gapless ml-3-tablet">
                     <div class="column is-half">
                         {% include 'book/publisher_info.html' %}
                     </div>

bookwyrm/templates/discover/small-book.html

@@ -6,7 +6,7 @@
     {% with book=book %}
         <a
             href="{{ book.local_path }}"
-        >{% include 'snippets/book_cover.html' with cover_class='is-h-small' %}</a>
+        >{% include 'snippets/book_cover.html' with cover_class='is-h-s' %}</a>
 
         {% include 'snippets/stars.html' with rating=book|rating:request.user %}
 

bookwyrm/templates/feed/feed_layout.html

@@ -37,7 +37,7 @@
                                         aria-label="{{ book.title }}"
                                         aria-selected="{% if active_book == book.id|stringformat:'d' %}true{% elif shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}"
                                         aria-controls="book-{{ book.id }}">
-                                        {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
+                                        {% include 'snippets/book_cover.html' with book=book cover_class='is-h-m' %}
                                     </a>
                                 </li>
                                 {% endfor %}

bookwyrm/templates/import_status.html

@@ -125,7 +125,7 @@
             <td>
                 {% if item.book %}
                 <a href="/book/{{ item.book.id }}">
-                {% include 'snippets/book_cover.html' with book=item.book cover_class='is-h-small' %}
+                {% include 'snippets/book_cover.html' with book=item.book cover_class='is-h-s' %}
                 </a>
                 {% endif %}
             </td>

bookwyrm/templates/lists/curate.html

@@ -25,23 +25,23 @@
                         mb-6
                     "
                 >
-                    <dt class="column is-5-tablet is-6-desktop">
+                    <dt class="column mr-auto">
                         <div class="columns is-mobile is-gapless is-vcentered">
                             <a
-                                class="column"
+                                class="column is-cover"
                                 href="{{ book.local_path }}"
                                 aria-hidden="true"
                             >
-                                {% include 'snippets/book_cover.html' %}
+                                {% include 'snippets/book_cover.html' with cover_class='is-w-xs-mobile is-w-s is-h-xs-mobile is-h-s' %}
                             </a>
 
-                            <div class="column is-10-mobile is-10-tablet ml-3">
+                            <div class="column ml-3">
                                 {% include 'snippets/book_titleby.html' %}
                             </div>
                         </div>
                     </dt>
 
-                    <dd class="column is-3-tablet is-3-desktop my-3">
+                    <dd class="column is-4-tablet mx-3-tablet my-3-mobile">
                         {% trans "Suggested by" %}
 
                         <a href="{{ item.user.local_path }}">

bookwyrm/templates/lists/list.html

@@ -37,13 +37,13 @@
                                 columns is-mobile is-gapless
                             "
                         >
-                            <div class="column">
+                            <div class="column is-2-mobile is-cover">
                                 <a href="{{ item.book.local_path }}" aria-hidden="true">
-                                    {% include 'snippets/book_cover.html' %}
+                                    {% include 'snippets/book_cover.html' with cover_class='is-w-auto is-h-m is-h-s-mobile' %}
                                 </a>
                             </div>
 
-                            <div class="column is-9-mobile is-10-tablet ml-3">
+                            <div class="column ml-3">
                                 <span>{% include 'snippets/book_titleby.html' %}</span>
                                 {% include 'snippets/stars.html' with rating=item.book|rating:request.user %}
                                 {% include 'snippets/shelve_button/shelve_button.html' %}
@@ -133,11 +133,15 @@
         {% if suggested_books|length > 0 %}
             {% for book in suggested_books %}
                 <div class="columns is-mobile is-gapless">
-                    <a class="column" href="{{ book.local_path }}" aria-hidden="true">
+                    <a
-                        {% include 'snippets/book_cover.html' with book=book %}
+                        class="column is-cover align to-c"
+                        href="{{ book.local_path }}"
+                        aria-hidden="true"
+                    >
+                        {% include 'snippets/book_cover.html' with book=book cover_class='is-w-s-tablet is-h-xs is-h-s-mobile' %}
                     </a>
 
-                    <div class="column is-9-mobile is-8-tablet ml-3">
+                    <div class="column ml-3">
                         <p>{% include 'snippets/book_titleby.html' with book=book %}</p>
 
                         <form class="mt-1" name="add-book" method="post" action="{% url 'list-add-book' %}">

bookwyrm/templates/lists/list_items.html

@@ -13,8 +13,8 @@
                 {% if list_books %}
                     <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 }}">
+                            <a class="column is-cover" href="{{ book.book.local_path }}">
-                                {% include 'snippets/book_cover.html' with book=book.book cover_class='is-min-w-none is-h-small' aria='show' %}
+                                {% include 'snippets/book_cover.html' with book=book.book cover_class='is-h-s' aria='show' %}
                             </a>
                         {% endfor %}
                     </div>

bookwyrm/templates/snippets/search_result_text.html

@@ -1,6 +1,8 @@
 {% load i18n %}
 <div class="columns is-mobile is-gapless">
-    {% include 'snippets/book_cover.html' with book=result cover_class='column' img_path=false %}
+    <div class="column is-cover">
+        {% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' img_path=false %}
+    </div>
 
     <div class="column is-10 ml-3">
         <p>

bookwyrm/templates/snippets/status/content_status.html

@@ -10,18 +10,21 @@
     {% endif %}
 >
 
-    <div class="columns">
+    <div class="columns is-gapless">
         {% if not hide_book %}
             {% with book=status.book|default:status.mention_books.first %}
                 {% if book %}
-        <div class="column is-narrow">
+                    <div class="column is-cover">
-            <div class="columns is-mobile">
+                        <div class="columns is-mobile is-gapless">
-                <div class="column is-narrow">
+                            <div class="column is-cover">
-                    <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book %}</a>
+                                <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-h-xs is-h-l-tablet' %}</a>
+
                                 {% include 'snippets/stars.html' with rating=book|rating:request.user %}
+
                                 {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
                             </div>
-                <div class="column is-hidden-tablet">
+
+                            <div class="column ml-3-mobile is-hidden-tablet">
                                 <p>{{ book|book_description|to_markdown|default:""|safe|truncatewords_html:15 }}</p>
                             </div>
                         </div>
@@ -30,7 +33,7 @@
             {% endwith %}
         {% endif %}
 
-        <article class="column">
+        <article class="column ml-3-tablet my-3-mobile">
             {% if status_type == 'Review' %}
             <header class="mb-2">
                 <h3

bookwyrm/templates/snippets/status/generated_status.html

@@ -4,20 +4,25 @@
 {% load i18n %}
 
 {% if not hide_book %}
-{% with book=status.book|default:status.mention_books.first %}
+    {% with book=status.book|default:status.mention_books.first %}
-<div class="columns is-mobile">
+        <div class="columns is-mobile is-gapless">
-    <div class="column is-narrow">
+            <a class="column is-cover is-narrow" href="{{ book.local_path }}">
-        <div>
+                {% include 'snippets/book_cover.html' with book=book cover_class='is-h-xs is-h-s-tablet' %}
-            <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-h-small' %}</a>
+            </a>
-        </div>
+
-    </div>
+            <div class="column ml-3">
-    <div class="column">
+                <h3 class="title is-6 mb-1">
-        <h3 class="title is-6 mb-1">{% include 'snippets/book_titleby.html' with book=book %}</h3>
+                    {% include 'snippets/book_titleby.html' with book=book %}
-        <p>{{ book|book_description|to_markdown|default:""|safe|truncatewords_html:20 }}</p>
+                </h3>
+
+                <p>
+                    {{ book|book_description|to_markdown|default:""|safe|truncatewords_html:20 }}
+                </p>
+
                 {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
             </div>
-</div>
+        </div>
-{% endwith %}
+    {% endwith %}
 {% endif %}
 
 {% endspaceless %}

bookwyrm/templates/user/user.html

@@ -36,7 +36,7 @@
             {% for book in shelf.books %}
             <div class="control">
                 <a href="{{ book.local_path }}">
-                {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
+                {% include 'snippets/book_cover.html' with book=book cover_class='is-h-m' %}
                 </a>
             </div>
             {% endfor %}