Merge branch 'main' into production

bookwyrm/static/css/bookwyrm.css

@@ -30,6 +30,9 @@ button {
 
     /* Corrects inability to style clickable `input` types in iOS */
     -webkit-appearance: none;
+
+    /* Generalizes pointer cursor */
+    cursor: pointer;
 }
 
 button::-moz-focus-inner {
@@ -64,6 +67,14 @@ button::-moz-focus-inner {
     overflow-x: auto;
 }
 
+.modal-card {
+    pointer-events: none;
+}
+
+.modal-card > * {
+    pointer-events: all;
+}
+
 /* stylelint-disable no-descending-specificity */
 .modal-card:focus {
     outline-style: auto;
@@ -148,6 +159,30 @@ button::-moz-focus-inner {
     display: inline !important;
 }
 
+button .button-invisible-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.66);
+    color: white;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+button:hover .button-invisible-overlay,
+button:active .button-invisible-overlay,
+button:focus-visible .button-invisible-overlay {
+    opacity: 1;
+}
+
 /** File input styles
  ******************************************************************************/
 
@@ -429,6 +464,8 @@ details.dropdown .dropdown-menu a:focus-visible {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
+    gap: 1em;
     white-space: initial;
     text-align: center;
 }
@@ -695,11 +732,7 @@ ol.ordered-list li::before {
 @media only screen and (min-width: 769px) {
     .books-grid {
         gap: 1.5rem;
-        grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
-    }
-
-    .books-grid > .is-big {
-        padding: 1.5rem 1.5rem 0;
+        grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
     }
 }
 

bookwyrm/templates/annual_summary/layout.html

@@ -249,7 +249,7 @@
         <div class="column is-10 is-offset-1">
             <div class="books-grid">
                 {% for book in books %}
-                {% if book.id in best_ratings_books_ids %}
+                {% if books_total > 12 and book.id in best_ratings_books_ids %}
                 <a href="{{ book.local_path }}" class="has-text-centered is-big has-text-success-dark">
                     {% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto' size='xxlarge' %}
                     <span class="book-title is-serif is-size-5">

bookwyrm/templates/book/book.html

@@ -61,24 +61,48 @@
 
     <div class="columns">
         <div class="column is-one-fifth">
-            {% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
+            {% if not book.cover %}
+                {% if user_authenticated %}
+                    <button type="button" data-controls="add_cover_{{ book.id }}" data-focus-target="modal_title_add_cover_{{ book.id }}" aria-pressed="false" class="cover-container no-cover is-h-m-mobile">
+                        <img
+                            class="book-cover"
+                            src="{% static "images/no_cover.jpg" %}"
+                            alt=""
+                            aria-hidden="true"
+                        >
+                        <span class="cover-caption">
+                            <span>{{ book.alt_text }}</span>
+                            <span>{% trans "Click to add cover" %}</span>
+                        </span>
+                        <span class="button-invisible-overlay has-text-centered">
+                            {% trans "Click to add cover" %}
+                        </span>
+                    </button>
+                    {% include 'book/cover_add_modal.html' with book=book controls_text="add_cover" controls_uid=book.id %}
+                    {% if request.GET.cover_error %}
+                    <p class="help is-danger">{% trans "Failed to load cover" %}</p>
+                    {% endif %}
+                {% else %}
+                    {% include 'snippets/book_cover.html' with book=book cover_class='is-h-m-mobile' %}
+                {% endif %}
+            {% endif %}
+
+            {% if book.cover %}
+                <button type="button" data-modal-open="cover_show_modal" class="cover-container is-h-m-mobile is-relative">
+                {% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
+                    <span class="button-invisible-overlay has-text-centered">
+                        {% trans "Click to enlarge" %}
+                    </span>
+                </button>
+                {% include 'book/cover_show_modal.html' with book=book id="cover_show_modal" %}
+            {% endif %}
+
             {% include 'snippets/rate_action.html' with user=request.user book=book %}
 
             <div class="mb-3">
                 {% include 'snippets/shelve_button/shelve_button.html' %}
             </div>
 
-            {% if user_authenticated and not book.cover %}
-            <div class="block">
-                {% trans "Add cover" as button_text %}
-                {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="add_cover" controls_uid=book.id focus="modal_title_add_cover" class="is-small" %}
-                {% include 'book/cover_modal.html' with book=book controls_text="add_cover" controls_uid=book.id %}
-                {% if request.GET.cover_error %}
-                <p class="help is-danger">{% trans "Failed to load cover" %}</p>
-                {% endif %}
-            </div>
-            {% endif %}
-
             <section class="is-clipped">
                 {% with book=book %}
                     <div class="content">

bookwyrm/templates/book/cover_show_modal.html

@@ -0,0 +1,12 @@
+{% load i18n %}
+{% load static %}
+
+<div class="modal" id="{{ id }}">
+    <div class="modal-background" data-modal-close></div><!-- modal background -->
+    <div class="modal-card is-align-items-center" role="dialog" aria-modal="true" tabindex="-1" aria-label="{% trans 'Book cover preview' %}">
+        <div class="cover-container">
+            <img class="book-cover" src="{% get_media_prefix %}{{ book.cover }}" itemprop="thumbnailUrl" alt="">
+        </div>
+    </div>
+    <button type="button" data-modal-close class="modal-close is-large" aria-label="{% trans 'Close' %}"></button>
+</div>