CSS reorg and cleans up ui

Fixes #93

fedireads/templates/author.html

@@ -13,11 +13,16 @@
 
 <div class="content-container">
     <h2>Books by {{ author.name }}</h2>
-    {% for book in books %}
-    <div class="book-preview">
-        {% include 'snippets/book.html' with book=book size=large description=True %}
+    <div class="book-grid row shrink wrap">
+        {% for book in books %}
+        <div class="book-preview">
+            <a href="{{ book.absolute_id }}">
+            {% include 'snippets/book_cover.html' with book=book %}
+            </a>
+            {% include 'snippets/shelve_button.html' with book=book %}
+        </div>
+        {% endfor %}
     </div>
-    {% endfor %}
 </div>
 {% endblock %}
 

fedireads/templates/book.html

@@ -1,9 +1,9 @@
 {% extends 'layout.html' %}
 {% load fr_display %}
 {% block content %}
-<div class="content-container user-profile">
-    <h2><q>{{ book.title }}</q> by
-        {% include 'snippets/authors.html' with book=book %}
+<div class="content-container">
+    <h2>
+        {% include 'snippets/book_titleby.html' with book=book %}
 
         {% if request.user.is_authenticated %}
         <a href="{{ book.fedireads_key }}/edit" class="edit-link">edit
@@ -13,27 +13,14 @@
         </a>
         {% endif %}
     </h2>
-    <div>
-        <div class="book-preview">
 
+    <div class="row">
+
+        <div class="cover-container">
             {% include 'snippets/book_cover.html' with book=book size=large %}
-            <p>{{ active_tab }} rating: {{ rating | stars }}</p>
-            {% if book.parent_work.description %}
-            <blockquote>{{ book.parent_work.description | description }}</blockquote>
-            {% endif %}
-            <div>
-                <div id="tag-cloud">
-                    {% for tag in tags %}
-                    {% include 'snippets/tag.html' with tag=tag user=request.user user_tags=user_tag_names %}
-                    {% endfor %}
-                </div>
-            </div>
-            <p><a href="/editions/{{ book.parent_work.id }}">{{ book.parent_work.edition_set.count }} other editions</a></p>
 
             {% include 'snippets/shelve_button.html' %}
 
-        </div>
-        <div>
             {% if request.user.is_authenticated and not book.cover %}
             <form name="add-cover" method="POST" action="/upload_cover/{{book.id}}" enctype="multipart/form-data">
                 {% csrf_token %}
@@ -41,21 +28,48 @@
                 <button type="submit">Add cover</button>
             </form>
             {% endif %}
+
+            <dl>
+                {% for field in info_fields %}
+                {% if field.value %}
+                <dt>{{ field.name }}:</dt>
+                <dd>{{ field.value }}</dd>
+                {% endif %}
+                {% endfor %}
+            </dl>
         </div>
+
+        <div class="column">
+            <h3>{{ active_tab }} rating: {{ rating | stars }}</h3>
+
+            {% include 'snippets/book_description.html' %}
+
+            {% if book.parent_work.edition_set.count > 1 %}
+            <p><a href="/editions/{{ book.parent_work.id }}">{{ book.parent_work.edition_set.count }} editions</a></p>
+            {% endif %}
+
+            <div id="tag-cloud">
+                {% for tag in tags %}
+                {% include 'snippets/tag.html' with tag=tag user=request.user user_tags=user_tag_names %}
+                {% endfor %}
+            </div>
+
+            <div>
+                {% if request.user.is_authenticated %}
+                <h3>Leave a review</h3>
+                <form class="review-form" name="review" action="/review/" method="post">
+                    {% csrf_token %}
+                    <input type="hidden" name="book" value="{{ book.fedireads_key }}"></input>
+                    {{ review_form.as_p }}
+                    <button type="submit">Post review</button>
+                </form>
+                {% endif %}
+            </div>
     </div>
 </div>
 
-{% if request.user.is_authenticated %}
-<div class="content-container">
-    <h2>Leave a review</h2>
-    <form class="review-form" name="review" action="/review/" method="post">
-        {% csrf_token %}
-        <input type="hidden" name="book" value="{{ book.fedireads_key }}"></input>
-        {{ review_form.as_p }}
-        <button type="submit">Post review</button>
-    </form>
-</div>
 
+{% if request.user.is_authenticated %}
 <div class="content-container tabs">
     {% include 'snippets/tabs.html' with tabs=feed_tabs active_tab=active_tab path=path %}
 </div>

fedireads/templates/layout.html

@@ -22,10 +22,14 @@
 <body>
 
 <div id="top-bar">
-    <header>
-        <div id="branding"><a href="/"><img id="logo" src="/static/images/logo-small.png" alt="BookWyrm"></img></a></div>
+    <header class="row">
+        <div id="branding">
+            <a href="/">
+                <img id="logo" src="/static/images/logo-small.png" alt="BookWyrm"></img>
+            </a>
+        </div>
 
-        <ul class="menu">
+        <ul id="menu">
             {% if request.user.is_authenticated %}
             <li><a href="/user/{{request.user.localname}}/shelves">Your shelves</a></li>
             {% endif %}

fedireads/templates/snippets/book.html

@@ -1,18 +0,0 @@
-{% load fr_display %}
-{% include 'snippets/book_cover.html' with book=book %}
-<p class="title">
-    <a href="/book/{{ book.fedireads_key }}">{{ book.title }}</a>
-</p>
-<p>
-    by {% include 'snippets/authors.html' with book=book %}
-</p>
-
-{% if rating %}
-{{ rating | stars }} {{ rating }}
-{% endif %}
-
-{% if description %}
-<blockquote>{{ book.description | description }}</blockquote>
-{% endif %}
-
-{% include 'snippets/shelve_button.html' with book=book pulldown=shelf_pulldown %}

fedireads/templates/snippets/book_description.html

@@ -0,0 +1,7 @@
+{% load fr_display %}
+{% if book.description %}
+<blockquote>{{ book.description | description }}</blockquote>
+{% elif book.parent_work.description %}
+<blockquote>{{ book.parent_work.description | description }}</blockquote>
+{% endif %}
+

fedireads/templates/snippets/book_titleby.html

@@ -0,0 +1,9 @@
+<span class="title">
+    <a href="/book/{{ book.fedireads_key }}">{{ book.title }}</a>
+</span>
+{% if book.authors %}
+<span class="author">
+    by {% include 'snippets/authors.html' with book=book %}
+</span>
+{% endif %}
+

fedireads/templates/snippets/covers_shelf.html

@@ -9,11 +9,15 @@
             <small>(<a href="/shelf/{{ user | username }}/{{ shelf.identifier }}">See all {{ shelf.size }}</a>)</small>
             {% endif %}
         </h2>
-        <div class="covers-shelf {{ shelf.identifier }}">
+        <div class="covers-shelf {{ shelf.identifier }} ">
             {% for book in shelf.books %}
-            <div class="book-preview" onclick="show_compose(this, event)" id="book-{{ book.id }}">
-                <a href="{{ book.absolute_id }}">{% include 'snippets/book_cover.html' with book=book %}</a>
-                {% include 'snippets/shelve_button.html' with book=book %}
+            <div class="cover-container">
+            <div >
+                <a href="{{ book.absolute_id }}" onclick="show_compose(this, event)" id="book-{{ book.id }}">
+                    {% include 'snippets/book_cover.html' with book=book %}
+                </a>
+            </div>
+            {% include 'snippets/shelve_button.html' with book=book %}
             </div>
             {% endfor %}
         </div>

fedireads/templates/snippets/status.html

@@ -11,7 +11,9 @@
     {% endif %}
     </h2>
 
-    {% include 'snippets/status_content.html' with status=status %}
+    <div class="status-content">
+        {% include 'snippets/status_content.html' with status=status %}
+    </div>
 
 </div>
 {% if status.status_type == 'Boost' %}

fedireads/templates/snippets/status_content.html

@@ -1,36 +1,52 @@
 {% load fr_display %}
 
 {% if not hide_book and status.mention_books.count %}
-<div class="row book-row">
-{% for book in status.mention_books.all|slice:"0:3" %}
-<div class="book-preview">
-    {% if status.status_type == 'Review' %}
-        {% include 'snippets/book.html' with book=book %}
-    {% else %}
-        {% include 'snippets/book.html' with book=book description=True %}
-    {% endif %}
-</div>
-{% endfor %}
-</div>
+    <div class="row">
+    {% for book in status.mention_books.all|slice:"0:4" %}
+        <div class="row">
+            <div class="cover-container">
+                {% include 'snippets/book_cover.html' with book=book %}
+                {% if status.mention_books.count > 1 %}
+                <p>{% include 'snippets/book_titleby.html' with book=book %}</p>
+                {% endif %}
+                {% include 'snippets/shelve_button.html' with book=book %}
+            </div>
+            {% if status.mention_books.count == 1 %}
+            <div>
+                <p>{% include 'snippets/book_titleby.html' with book=book %}</p>
+                {% include 'snippets/book_description.html' with book=book %}
+            </div>
+            {% endif %}
+        </div>
+    {% endfor %}
+    </div>
 {% endif %}
 
-{% if not hide_book and status.book%}
-<div class="book-preview">
-    {% if status.status_type == 'Review' %}
-        {% include 'snippets/book.html' with book=status.book %}
-    {% else %}
-        {% include 'snippets/book.html' with book=status.book description=True %}
+<div class="row">
+    {% if not hide_book and status.book %}
+    <div class="cover-container">
+        {% include 'snippets/book_cover.html' with book=status.book %}
+        {% include 'snippets/shelve_button.html' with book=status.book %}
+    </div>
     {% endif %}
-</div>
-{% endif %}
-{% if status.status_type == 'Review' %}<h4>{{ status.name }}
-    <small>{{ status.rating | stars }} stars, by {% include 'snippets/username.html' with user=status.user %}</small>
-</h4>{% endif %}
-{% if status.status_type != 'Update' and status.status_type != 'Boost' %}
-<blockquote>{{ status.content | safe }}</blockquote>
-{% endif %}
-{% if status.status_type == 'Boost' %}
-    {% include 'snippets/status_content.html' with status=status|boosted_status %}
-{% endif %}
-{% if not max_depth and status.reply_parent or status|replies %}<p><a href="{{ status.absolute_id }}">Thread</a>{% endif %}
+
+    <div>
+        {% if status.status_type == 'Review' %}
+        <h3>
+            {{ status.name }}<br>
+            {{ status.rating | stars }}
+        </h3>
+        {% endif %}
+
+        {% if status.status_type != 'Update' and status.status_type != 'Boost' %}
+            <blockquote>{{ status.content | safe }}</blockquote>
+        {% endif %}
+
+        {% if status.status_type == 'Boost' %}
+            {% include 'snippets/status_content.html' with status=status|boosted_status %}
+        {% endif %}
+
+        {% if not max_depth and status.reply_parent or status|replies %}<p><a href="{{ status.absolute_id }}">Thread</a>{% endif %}
+    </div>
+</div>