From 721d20efabf8cd6d95ae9e6a63353104e4f63f95 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sun, 3 Jan 2021 11:24:26 -0800
Subject: [PATCH] Creates snippets for discover preview boxes

---
 bookwyrm/static/css/format.css                |  5 ++-
 bookwyrm/templates/discover.html              | 39 +++----------------
 .../snippets/discover/large-book.html         | 14 +++++++
 .../snippets/discover/small-book.html         |  8 ++++
 4 files changed, 32 insertions(+), 34 deletions(-)
 create mode 100644 bookwyrm/templates/snippets/discover/large-book.html
 create mode 100644 bookwyrm/templates/snippets/discover/small-book.html

diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css
index 83dafc28..8867e7aa 100644
--- a/bookwyrm/static/css/format.css
+++ b/bookwyrm/static/css/format.css
@@ -68,9 +68,12 @@ input.toggle-control:checked ~ .modal.toggle-content {
     max-width: 250px;
 }
 .cover-container.is-large {
-    height: 500px;
+    height: max-content;
     max-width: 500px;
 }
+.cover-container.is-large img {
+    max-height: 500px;
+}
 .cover-container.is-medium {
     height: 200px;
 }
diff --git a/bookwyrm/templates/discover.html b/bookwyrm/templates/discover.html
index 855868de..41112d46 100644
--- a/bookwyrm/templates/discover.html
+++ b/bookwyrm/templates/discover.html
@@ -1,5 +1,4 @@
 {% extends 'layout.html' %}
-{% load bookwyrm_tags %}
 {% block content %}
 
 <div class="block">
@@ -31,31 +30,18 @@
     <div class="tile is-vertical">
         <div class="tile is-parent">
             <div class="tile is-child box has-background-white-ter">
-                <div class="columns">
-                    <div class="column is-narrow">
-                        {% include 'snippets/book_cover.html' with book=books.2 size="large" %}
-                        {% include 'snippets/stars.html' with rating=books.2.review__rating__avg %}
-                    </div>
-                    <div class="column">
-                        {% include 'snippets/book_titleby.html' with book=books.2 %}
-                        <blockquote class="content">{{ books.2|book_description|to_markdown|safe|truncatewords_html:50 }}</blockquote>
-                    </div>
-                </div>
+                {% include 'snippets/discover/large-book.html' with book=books.0 %}
             </div>
         </div>
         <div class="tile">
             <div class="tile is-parent is-6">
                 <div class="tile is-child box has-background-white-ter">
-                    {% include 'snippets/book_cover.html' with book=books.0 %}
-                    {% include 'snippets/book_titleby.html' with book=books.0 %}
-                    {% include 'snippets/stars.html' with rating=books.0.review__rating__avg %}
+                    {% include 'snippets/discover/small-book.html' with book=books.1 %}
                 </div>
             </div>
             <div class="tile is-parent is-6">
                 <div class="tile is-child box has-background-white-ter">
-                    {% include 'snippets/book_cover.html' with book=books.1 %}
-                    {% include 'snippets/book_titleby.html' with book=books.1 %}
-                    {% include 'snippets/stars.html' with rating=books.1.review__rating__avg %}
+                    {% include 'snippets/discover/small-book.html' with book=books.2 %}
                 </div>
             </div>
         </div>
@@ -64,31 +50,18 @@
         <div class="tile">
             <div class="tile is-parent is-6">
                 <div class="tile is-child box has-background-white-ter">
-                    {% include 'snippets/book_cover.html' with book=books.4 %}
-                    {% include 'snippets/book_titleby.html' with book=books.4 %}
-                    {% include 'snippets/stars.html' with rating=books.4.review__rating__avg %}
+                    {% include 'snippets/discover/small-book.html' with book=books.3 %}
                 </div>
             </div>
             <div class="tile is-parent is-6">
                 <div class="tile is-child box has-background-white-ter">
-                    {% include 'snippets/book_cover.html' with book=books.5 %}
-                    {% include 'snippets/book_titleby.html' with book=books.5 %}
-                    {% include 'snippets/stars.html' with rating=books.5.review__rating__avg %}
+                    {% include 'snippets/discover/small-book.html' with book=books.4 %}
                 </div>
             </div>
         </div>
         <div class="tile is-parent">
             <div class="tile is-child box has-background-white-ter">
-                <div class="columns">
-                    <div class="column is-narrow">
-                        {% include 'snippets/book_cover.html' with book=books.3 size="large" %}
-                        {% include 'snippets/stars.html' with rating=books.3.review__rating__avg %}
-                    </div>
-                    <div class="column">
-                        {% include 'snippets/book_titleby.html' with book=books.3 %}
-                        <blockquote class="content">{{ books.3|book_description|to_markdown|safe|truncatewords_html:50 }}</blockquote>
-                    </div>
-                </div>
+                {% include 'snippets/discover/large-book.html' with book=books.5 %}
             </div>
         </div>
     </div>
diff --git a/bookwyrm/templates/snippets/discover/large-book.html b/bookwyrm/templates/snippets/discover/large-book.html
new file mode 100644
index 00000000..9513ca80
--- /dev/null
+++ b/bookwyrm/templates/snippets/discover/large-book.html
@@ -0,0 +1,14 @@
+{% load bookwyrm_tags %}
+<div class="columns">
+    <div class="column is-narrow">
+        {% include 'snippets/book_cover.html' with book=book size="large" %}
+        {% include 'snippets/stars.html' with rating=book.review__rating__avg %}
+    </div>
+    <div class="column">
+        <h3 class="title is-5"><a href="/book/{{ book.id }}">{{ book.title }}</a></h3>
+        {% if book.authors %}
+        <p class="subtitle is-5">by {% include 'snippets/authors.html' with book=book %}</p>
+        {% endif %}
+        <blockquote class="content">{{ book|book_description|to_markdown|safe|truncatewords_html:50 }}</blockquote>
+    </div>
+</div>
diff --git a/bookwyrm/templates/snippets/discover/small-book.html b/bookwyrm/templates/snippets/discover/small-book.html
new file mode 100644
index 00000000..0c9898f8
--- /dev/null
+++ b/bookwyrm/templates/snippets/discover/small-book.html
@@ -0,0 +1,8 @@
+{% include 'snippets/book_cover.html' with book=book %}
+{% include 'snippets/stars.html' with rating=book.review__rating__avg %}
+
+<h3 class="title is-6"><a href="/book/{{ book.id }}">{{ book.title }}</a></h3>
+{% if book.authors %}
+<p class="subtitle is-6">by {% include 'snippets/authors.html' with book=book %}</p>
+{% endif %}
+