From f12ba8609f1c1ef40b372d4cfb71dc86d5dd67c7 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 29 Dec 2021 16:40:19 +0100
Subject: [PATCH 01/10] Front-end: On book page, click on cover to show/add
 image

Closes #1009
---
 bookwyrm/static/css/bookwyrm.css              | 23 +++++++++++++
 bookwyrm/templates/book/book.html             | 34 ++++++++++++-------
 ...{cover_modal.html => cover_add_modal.html} |  0
 bookwyrm/templates/book/cover_show_modal.html | 17 ++++++++++
 bookwyrm/templates/snippets/book_cover.html   |  3 ++
 5 files changed, 65 insertions(+), 12 deletions(-)
 rename bookwyrm/templates/book/{cover_modal.html => cover_add_modal.html} (100%)
 create mode 100644 bookwyrm/templates/book/cover_show_modal.html

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index f8d3b531..098424cc 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/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,16 @@ button::-moz-focus-inner {
     display: inline !important;
 }
 
+img.is-fit-cover {
+    object-fit: cover;
+    object-position: center;
+}
+
+img.is-fit-contain {
+    object-fit: contain;
+    object-position: center;
+}
+
 /** File input styles
  ******************************************************************************/
 
@@ -429,6 +450,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;
 }
diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index 27d061a2..e6823812 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -61,24 +61,34 @@
 
     <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 %}
+                    {% trans "Click to add cover" as button_text %}
+                    <button type="button" data-controls="add_cover_{{ book.id }}" data-focus-target="modal_title_add_cover_{{ book.id }}" aria-pressed="false">
+                        {% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' text_append=button_text %}
+                    </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 size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
+                {% endif %}
+            {% endif %}
+
+            {% if book.cover %}
+                <button type="button" data-modal-open="cover_show_modal" aria-haspopup="dialog"class="cover-container is-h-m-mobile">
+                {% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
+                </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">
diff --git a/bookwyrm/templates/book/cover_modal.html b/bookwyrm/templates/book/cover_add_modal.html
similarity index 100%
rename from bookwyrm/templates/book/cover_modal.html
rename to bookwyrm/templates/book/cover_add_modal.html
diff --git a/bookwyrm/templates/book/cover_show_modal.html b/bookwyrm/templates/book/cover_show_modal.html
new file mode 100644
index 00000000..8625962a
--- /dev/null
+++ b/bookwyrm/templates/book/cover_show_modal.html
@@ -0,0 +1,17 @@
+{% 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>
\ No newline at end of file
diff --git a/bookwyrm/templates/snippets/book_cover.html b/bookwyrm/templates/snippets/book_cover.html
index 0f684482..829fbb65 100644
--- a/bookwyrm/templates/snippets/book_cover.html
+++ b/bookwyrm/templates/snippets/book_cover.html
@@ -62,6 +62,9 @@
         >
         <figcaption class="cover-caption">
             <p>{{ book.alt_text }}</p>
+            {% if text_append %}
+                <p>{{ text_append }}</p>
+            {% endif %}
         </figcaption>
     </figure>
 {% endif %}

From e5bca3873c1d065ad4056453716968475841f190 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 29 Dec 2021 16:41:14 +0100
Subject: [PATCH 02/10] Remove useless additoins

---
 bookwyrm/static/css/bookwyrm.css | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 098424cc..24043028 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -159,16 +159,6 @@ button::-moz-focus-inner {
     display: inline !important;
 }
 
-img.is-fit-cover {
-    object-fit: cover;
-    object-position: center;
-}
-
-img.is-fit-contain {
-    object-fit: contain;
-    object-position: center;
-}
-
 /** File input styles
  ******************************************************************************/
 

From 87ab6655836b4ea227781d29afea6b821e188c0d Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 29 Dec 2021 16:43:38 +0100
Subject: [PATCH 03/10] fix for editorConfig linting

---
 bookwyrm/templates/book/cover_show_modal.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bookwyrm/templates/book/cover_show_modal.html b/bookwyrm/templates/book/cover_show_modal.html
index 8625962a..4ec5c4eb 100644
--- a/bookwyrm/templates/book/cover_show_modal.html
+++ b/bookwyrm/templates/book/cover_show_modal.html
@@ -14,4 +14,4 @@
         </div>
     </div>
     <button type="button" data-modal-close class="modal-close is-large" aria-label="{% trans 'Close' %}"></button>
-</div>
\ No newline at end of file
+</div>

From 3de2396cb86fe1c4ee5a9d2c0ba25b0feca8d34f Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 29 Dec 2021 16:45:36 +0100
Subject: [PATCH 04/10] Update cover_show_modal.html

---
 bookwyrm/templates/book/cover_show_modal.html | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/bookwyrm/templates/book/cover_show_modal.html b/bookwyrm/templates/book/cover_show_modal.html
index 4ec5c4eb..f244aa53 100644
--- a/bookwyrm/templates/book/cover_show_modal.html
+++ b/bookwyrm/templates/book/cover_show_modal.html
@@ -5,12 +5,7 @@
     <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=""
-            />
+            <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>

From e5f3e9cd2c16e820e2f3f342d7b744c6ecc32980 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 29 Dec 2021 17:00:40 +0100
Subject: [PATCH 05/10] fix curlylint issue

---
 bookwyrm/templates/book/book.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index e6823812..79acffc4 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -77,7 +77,7 @@
             {% endif %}
 
             {% if book.cover %}
-                <button type="button" data-modal-open="cover_show_modal" aria-haspopup="dialog"class="cover-container is-h-m-mobile">
+                <button type="button" data-modal-open="cover_show_modal" class="cover-container is-h-m-mobile">
                 {% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
                 </button>
                 {% include 'book/cover_show_modal.html' with book=book id="cover_show_modal" %}

From 6952ab008154f36933af23d44661cf42a744e055 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 29 Dec 2021 17:10:44 +0100
Subject: [PATCH 06/10] Solve markup validation issues

---
 bookwyrm/templates/book/book.html           | 16 ++++++++++++----
 bookwyrm/templates/snippets/book_cover.html |  3 ---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index 79acffc4..5fba69b0 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -63,16 +63,24 @@
         <div class="column is-one-fifth">
             {% if not book.cover %}
                 {% if user_authenticated %}
-                    {% trans "Click to add cover" as button_text %}
-                    <button type="button" data-controls="add_cover_{{ book.id }}" data-focus-target="modal_title_add_cover_{{ book.id }}" aria-pressed="false">
-                        {% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' text_append=button_text %}
+                    <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>
                     </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 size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
+                    {% include 'snippets/book_cover.html' with book=book cover_class='is-h-m-mobile' %}
                 {% endif %}
             {% endif %}
 
diff --git a/bookwyrm/templates/snippets/book_cover.html b/bookwyrm/templates/snippets/book_cover.html
index 829fbb65..0f684482 100644
--- a/bookwyrm/templates/snippets/book_cover.html
+++ b/bookwyrm/templates/snippets/book_cover.html
@@ -62,9 +62,6 @@
         >
         <figcaption class="cover-caption">
             <p>{{ book.alt_text }}</p>
-            {% if text_append %}
-                <p>{{ text_append }}</p>
-            {% endif %}
         </figcaption>
     </figure>
 {% endif %}

From 3b0096caf0482e49e57fdaa72001c61ebf7275db Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 29 Dec 2021 18:55:02 +0100
Subject: [PATCH 07/10] Add button overlay

---
 bookwyrm/static/css/bookwyrm.css  | 27 +++++++++++++++++++++++++++
 bookwyrm/templates/book/book.html |  5 ++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 24043028..647232d3 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -159,6 +159,33 @@ 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 .button-invisible-overlay {
+    opacity: 1;
+}
+
 /** File input styles
  ******************************************************************************/
 
diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index 5fba69b0..bdca078a 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -85,8 +85,11 @@
             {% endif %}
 
             {% if book.cover %}
-                <button type="button" data-modal-open="cover_show_modal" class="cover-container is-h-m-mobile">
+                <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">
+                        {% trans "Click to enlarge" %}
+                    </span>
                 </button>
                 {% include 'book/cover_show_modal.html' with book=book id="cover_show_modal" %}
             {% endif %}

From faa52503a39c057d12cbb7d24b3c92bca5add5d8 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 29 Dec 2021 18:57:45 +0100
Subject: [PATCH 08/10] Update bookwyrm.css

---
 bookwyrm/static/css/bookwyrm.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 647232d3..6f6a9f26 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -167,15 +167,12 @@ button .button-invisible-overlay {
     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;
 }

From cd89271724023913733b013dc18943025cc7a052 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Thu, 30 Dec 2021 10:43:23 +0100
Subject: [PATCH 09/10] Apply review suggestions

---
 bookwyrm/static/css/bookwyrm.css  | 2 +-
 bookwyrm/templates/book/book.html | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 6f6a9f26..13402313 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -179,7 +179,7 @@ button .button-invisible-overlay {
 
 button:hover .button-invisible-overlay,
 button:active .button-invisible-overlay,
-button:focus .button-invisible-overlay {
+button:focus-visible .button-invisible-overlay {
     opacity: 1;
 }
 
diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index bdca078a..4903da87 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -74,6 +74,9 @@
                             <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 %}
@@ -87,7 +90,7 @@
             {% 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">
+                    <span class="button-invisible-overlay has-text-centered">
                         {% trans "Click to enlarge" %}
                     </span>
                 </button>

From dabd1e919d73da5f377e6514bd292c64c4d4ac80 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Thu, 30 Dec 2021 12:01:28 +0100
Subject: [PATCH 10/10] Fix: Display a denser summary book grid and limit big
 books

Closes #1731
---
 bookwyrm/static/css/bookwyrm.css              | 6 +-----
 bookwyrm/templates/annual_summary/layout.html | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index f8d3b531..83b7a4a0 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -695,11 +695,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));
     }
 }
 
diff --git a/bookwyrm/templates/annual_summary/layout.html b/bookwyrm/templates/annual_summary/layout.html
index 6a4ec574..b5ba9cc7 100644
--- a/bookwyrm/templates/annual_summary/layout.html
+++ b/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">