Cleans up status display

bookwyrm/static/css/format.css

@@ -53,3 +53,32 @@ input.toggle-control:checked ~ .toggle-content {
 .rate-stars form:hover ~ form .icon:before{
     content: '\e9d7';
 }
+
+
+/* --- BOOK COVERS --- */
+.book-cover {
+    width: 10em;
+    height: auto;
+}
+.no-cover {
+    position: relative;
+}
+.no-cover div {
+    position: absolute;
+    padding: 1em;
+    color: white;
+    top: 0;
+    left: 0;
+    text-align: center;
+}
+.no-cover .title {
+    text-transform: uppercase;
+    margin-bottom: 1em;
+}
+
+
+/* --- AVATAR --- */
+.avatar {
+    vertical-align: middle;
+    display: inline;
+}

bookwyrm/templates/feed.html

@@ -2,8 +2,8 @@
 {% load fr_display %}
 {% block content %}
 
-<section class="section" id="feed">
+<section class="section">
-    <div class="container">
+    <div>
         {% for activity in activities %}
         <div class="block">
         {% include 'snippets/status.html' with status=activity %}

bookwyrm/templates/snippets/avatar.html

@@ -1,2 +1,2 @@
-<img class="image {% if large %}is-96x96{% else %}is-32x32{% endif %}" src="{% if user.avatar %}/images/{{ user.avatar }}{% else %}/static/images/default_avi.jpg{% endif %}">
+<img class="avatar image {% if large %}is-96x96{% else %}is-32x32{% endif %}" src="{% if user.avatar %}/images/{{ user.avatar }}{% else %}/static/images/default_avi.jpg{% endif %}">
 

bookwyrm/templates/snippets/book_cover.html

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

bookwyrm/templates/snippets/covers_shelf.html

@@ -1,49 +1,23 @@
 {% load fr_display %}
 
-<div class="all-shelves content-container">
-    {% for shelf in shelves %}
-    {% if shelf.books %}
-    <div>
-        <h2>{{ shelf.name }}
-            {% if shelf.size > shelf.books|length %}
-            <small>(<a href="/shelf/{{ user | username }}/{{ shelf.identifier }}">See all {{ shelf.size }}</a>)</small>
-            {% endif %}
-        </h2>
-        <div class="covers-shelf {{ shelf.identifier }} ">
-            {% for book in shelf.books %}
-            <div class="cover-container">
-                <label for="book-{{ book.id }}-radio">
-                    {% include 'snippets/book_cover.html' with book=book %}
-                </label>
-            {% include 'snippets/shelve_button.html' with book=book hide_pulldown=True %}
-            </div>
-            {% endfor %}
-        </div>
-    </div>
-    {% endif %}
-    {% endfor %}
-</div>
-
 {% for shelf in shelves %}
-    {% for book in shelf.books %}
+{% if shelf.books %}
-<div class="compose-popout toggle-content hidden">
+<div class="container">
-    <input class="toggle-control" name="book-popout" type="radio" id="book-{{ book.id }}-radio">
+    <h2>{{ shelf.name }}
-    <div class="compose compose-suggestion" id="compose-book-{{ book.id }}">
+        {% if shelf.size > shelf.books|length %}
-        <label class="close icon icon-close" for="book-{{ book.id }}-radio-close" onclick="hide_element(this)">
+        <small>(<a href="/shelf/{{ user | username }}/{{ shelf.identifier }}">See all {{ shelf.size }}</a>)</small>
-            <span class="hidden-text">Close</span>
+        {% endif %}
-        </label>
+    </h2>
-        <input name="book-popout" type="radio" id="book-{{ book.id }}-radio-close">
+    <div>
-        <div class="content-container">
+        {% for book in shelf.books %}
-            <h2>
+        <div>
-                {% include 'snippets/avatar.html' with user=user %}
+            <label for="book-{{ book.id }}-radio">
-                Your thoughts on
+                {% include 'snippets/book_cover.html' with book=book %}
-            a   <a href="/book/{{ book.id }}">{{ book.title }}</a>
+            </label>
-                by {% include 'snippets/authors.html' with book=book %}
+        {% include 'snippets/shelve_button.html' with book=book hide_pulldown=True %}
-            </h2>
-
-            {% include 'snippets/create_status.html' with book=book user=request.user %}
         </div>
+        {% endfor %}
     </div>
 </div>
-{% endfor %}
+{% endif %}
 {% endfor %}

bookwyrm/templates/snippets/interaction.html

@@ -63,9 +63,3 @@
     </a>
     {% endif %}
 </div>
-
-<div class="card-footer-item">
-    <span class="icon icon-public">
-        <span class="hidden-text">Public post</span>
-    </span>
-</div>

bookwyrm/templates/snippets/shelf.html

@@ -1,7 +1,7 @@
 {% load humanize %}
 {% load fr_display %}
 {% if shelf.books %}
-<table>
+<table class="table">
 <tr class="book-preview">
     <th>
         Cover

bookwyrm/templates/snippets/shelve_button.html

@@ -6,11 +6,11 @@
     {% csrf_token %}
     <input type="hidden" name="book" value="{{ book.id }}">
     <input type="hidden" name="shelf" value="{% shelve_button_identifier book %}">
-    <button class="button" type="submit" style="">{% shelve_button_text book %}</button>
+    <button class="button is-small" type="submit" style="">{% shelve_button_text book %}</button>
 </form>
 <div class="dropdown is-hoverable">
     {% if not hide_pulldown %}
-    <div class="button dropdown-trigger" >
+    <div class="button dropdown-trigger is-small" >
         <span class="icon icon-arrow-down"><span class="hidden-text">More shelves</span></span>
     </div>
 
@@ -21,7 +21,7 @@
                 <input type="hidden" name="book" value="{{ book.id }}">
                 {% for shelf in request.user.shelf_set.all %}
                 <li>
-                <button name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>{{ shelf.name }} {% if shelf in book.shelf_set.all %} ✓ {% endif %}</button>
+                <button class="is-small" name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>{{ shelf.name }} {% if shelf in book.shelf_set.all %} ✓ {% endif %}</button>
                 </li>
                 {% endfor %}
             </form>

bookwyrm/templates/snippets/status.html

@@ -1,8 +1,8 @@
+{% load humanize %}
 {% load fr_display %}
 
-
 <div class="card{% if depth %}depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}{% endif %}">
-    <header class="card-header level">
+    <header class="card-header">
     {% include 'snippets/status_header.html' with status=status %}
     </header>
 
@@ -20,5 +20,12 @@
         {% else %}
         {% include 'snippets/interaction.html' with activity=status %}
         {% endif %}
+
+        <div class="card-footer-item">
+            <span class="icon icon-public">
+                <span class="hidden-text">Public post</span>
+            </span>
+            <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
+        </div>
     </footer>
 </div>

bookwyrm/templates/snippets/status_header.html

@@ -1,6 +1,5 @@
-{% load humanize %}
 {% load fr_display %}
-<div class="level-left card-header-title">
+<div class="card-header-title">
     <p>
         {% include 'snippets/avatar.html' with user=status.user %}
 
@@ -24,8 +23,3 @@
         {% endif %}
     </p>
 </div>
-<div class="level-right card-header-title">
-    <p>
-        <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
-    </p>
-</div>