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 %}
 
-{% for review in reviews %}
+<div>
-<div class="block">
+    {% for review in reviews %}
-    {% include 'snippets/status.html' with status=review hide_book=True depth=1 %}
+    <div class="block">
+        {% include 'snippets/status.html' with status=review hide_book=True depth=1 %}
+    </div>
+    {% endfor %}
 </div>
-{% endfor %}
 {% 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" %}
-            <a href="/book/{{ book.id }}">
+        </div>
-                {% include 'snippets/book_cover.html' with book=book %}
+        <div class="tile">
-            </a>
+        {% endif %}
-            {% include 'snippets/shelve_button.html' with book=book %}
+            <div class="tile is-parent is-vertical">
-        </li>
+                <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 %}
 

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,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 }}">
+<div class="cover-container">
-    <img class="book-cover {{ size }}" src="/static/images/no_cover.jpg" alt="No cover">
+    <div class="no-cover book-cover {{ size }}">
-    <div>
+        <img class="book-cover {{ size }}" src="/static/images/no_cover.jpg" alt="No cover">
-        <p>{{ book.title }}</p>
+        <div>
-        <p>({{ book|edition_info }})</p>
+            <p>{{ book.title }}</p>
+            <p>({{ book|edition_info }})</p>
+        </div>
     </div>
 </div>
 {% endif %}

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>