From 3dc43aa81c59ac26b81a2df1f403dcab4c91be74 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Tue, 29 Sep 2020 13:11:52 -0700
Subject: [PATCH] Book and editions page styles

---
 bookwyrm/static/css/format.css              |  7 +++--
 bookwyrm/templates/book.html                | 10 ++++---
 bookwyrm/templates/editions.html            | 31 ++++++++++++++-------
 bookwyrm/templates/feed.html                |  2 +-
 bookwyrm/templates/snippets/book_cover.html | 16 +++++++----
 bookwyrm/templates/snippets/status.html     |  2 +-
 6 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css
index b0e9ec2b..ab124038 100644
--- a/bookwyrm/static/css/format.css
+++ b/bookwyrm/static/css/format.css
@@ -79,9 +79,12 @@ input.toggle-control:checked ~ .toggle-content {
 
 
 /* --- BOOK COVERS --- */
+.cover-container {
+    height: 250px;
+}
 .book-cover {
-    width: 10em;
-    height: auto;
+    height: 100%
+    object-fit: scale-down;
 }
 .no-cover {
     position: relative;
diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html
index caa4167d..dc0500de 100644
--- a/bookwyrm/templates/book.html
+++ b/bookwyrm/templates/book.html
@@ -87,10 +87,12 @@
 </div>
 {% endif %}
 
-{% for review in reviews %}
-<div class="block">
-    {% include 'snippets/status.html' with status=review hide_book=True depth=1 %}
+<div>
+    {% for review in reviews %}
+    <div class="block">
+        {% include 'snippets/status.html' with status=review hide_book=True depth=1 %}
+    </div>
+    {% endfor %}
 </div>
-{% endfor %}
 {% endblock %}
 
diff --git a/bookwyrm/templates/editions.html b/bookwyrm/templates/editions.html
index 535e651e..40881a48 100644
--- a/bookwyrm/templates/editions.html
+++ b/bookwyrm/templates/editions.html
@@ -1,18 +1,29 @@
 {% extends 'layout.html' %}
 {% load fr_display %}
 {% block content %}
-<div class="content-container">
-    <h2>Editions of <a href="/book/{{ work.id }}">"{{ work.title }}"</a></h2>
-    <ol class="book-grid row wrap">
+<div class="block">
+    <h2 class="title">Editions of <a href="/book/{{ work.id }}">"{{ work.title }}"</a></h2>
+
+
+<div class="tile is-ancestor">
+    <div class="tile is-vertical">
+        <div class="tile">
         {% for book in editions %}
-        <li class="book-preview">
-            <a href="/book/{{ book.id }}">
-                {% include 'snippets/book_cover.html' with book=book %}
-            </a>
-            {% include 'snippets/shelve_button.html' with book=book %}
-        </li>
+        {% if forloop.counter0|divisibleby:"5" %}
+        </div>
+        <div class="tile">
+        {% endif %}
+            <div class="tile is-parent is-vertical">
+                <article class="tile is-child box">
+                    <a href="/book/{{ book.id }}">
+                        {% include 'snippets/book_cover.html' with book=book %}
+                    </a>
+                    {% include 'snippets/shelve_button.html' with book=book %}
+                </article>
+            </div>
         {% endfor %}
-    </ol>
+        </div>
+    </div>
 </div>
 {% endblock %}
 
diff --git a/bookwyrm/templates/feed.html b/bookwyrm/templates/feed.html
index 78832695..5c15c4f8 100644
--- a/bookwyrm/templates/feed.html
+++ b/bookwyrm/templates/feed.html
@@ -9,7 +9,7 @@
     </div>
     {% endfor %}
 
-    <div class="content-container pagination row">
+    <div class="">
         {% if prev %}
         <p>
             <a href="{{ prev }}">
diff --git a/bookwyrm/templates/snippets/book_cover.html b/bookwyrm/templates/snippets/book_cover.html
index 7a22c1b2..8a1d219c 100644
--- a/bookwyrm/templates/snippets/book_cover.html
+++ b/bookwyrm/templates/snippets/book_cover.html
@@ -1,12 +1,16 @@
 {% load fr_display %}
 {% if book.cover %}
-<img class="book-cover {{ size }}" src="/images/{{ book.cover }}" alt="{% include 'snippets/cover_alt.html' with book=book %}">
+<div class="cover-container">
+    <img class="book-cover {{ size }}" src="/images/{{ book.cover }}" alt="{% include 'snippets/cover_alt.html' with book=book %}">
+</div>
 {% else %}
-<div class="no-cover book-cover {{ size }}">
-    <img class="book-cover {{ size }}" src="/static/images/no_cover.jpg" alt="No cover">
-    <div>
-        <p>{{ book.title }}</p>
-        <p>({{ book|edition_info }})</p>
+<div class="cover-container">
+    <div class="no-cover book-cover {{ size }}">
+        <img class="book-cover {{ size }}" src="/static/images/no_cover.jpg" alt="No cover">
+        <div>
+            <p>{{ book.title }}</p>
+            <p>({{ book|edition_info }})</p>
+        </div>
     </div>
 </div>
 {% endif %}
diff --git a/bookwyrm/templates/snippets/status.html b/bookwyrm/templates/snippets/status.html
index ba7f5de2..d83c8693 100644
--- a/bookwyrm/templates/snippets/status.html
+++ b/bookwyrm/templates/snippets/status.html
@@ -1,7 +1,7 @@
 {% load humanize %}
 {% load fr_display %}
 
-<div class="card{% if depth %}depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}{% endif %}">
+<div class="card{% if depth %} depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}{% endif %}">
     <header class="card-header">
     {% include 'snippets/status_header.html' with status=status %}
     </header>