Book and editions page styles

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: 100%
-    height: auto;
+    object-fit: scale-down;
 }
 .no-cover {
     position: relative;

bookwyrm/templates/book.html

@@ -87,10 +87,12 @@
 </div>
 {% endif %}
 
+<div>
     {% for review in reviews %}
     <div class="block">
         {% include 'snippets/status.html' with status=review hide_book=True depth=1 %}
     </div>
     {% endfor %}
+</div>
 {% endblock %}
 

bookwyrm/templates/editions.html

@@ -1,18 +1,29 @@
 {% extends 'layout.html' %}
 {% load fr_display %}
 {% block content %}
-<div class="content-container">
+<div class="block">
-    <h2>Editions of <a href="/book/{{ work.id }}">"{{ work.title }}"</a></h2>
+    <h2 class="title">Editions of <a href="/book/{{ work.id }}">"{{ work.title }}"</a></h2>
-    <ol class="book-grid row wrap">
+
+
+<div class="tile is-ancestor">
+    <div class="tile is-vertical">
+        <div class="tile">
         {% for book in editions %}
-        <li class="book-preview">
+        {% 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 %}
-        </li>
+                </article>
+            </div>
         {% endfor %}
-    </ol>
+        </div>
+    </div>
 </div>
 {% endblock %}
 

bookwyrm/templates/feed.html

@@ -9,7 +9,7 @@
     </div>
     {% endfor %}
 
-    <div class="content-container pagination row">
+    <div class="">
         {% if prev %}
         <p>
             <a href="{{ prev }}">

bookwyrm/templates/snippets/book_cover.html

@@ -1,7 +1,10 @@
 {% load fr_display %}
 {% if book.cover %}
+<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="cover-container">
     <div class="no-cover book-cover {{ size }}">
         <img class="book-cover {{ size }}" src="/static/images/no_cover.jpg" alt="No cover">
         <div>
@@ -9,4 +12,5 @@
             <p>({{ book|edition_info }})</p>
         </div>
     </div>
+</div>
 {% endif %}