From 50f2f4788e3d83c208312dd219c4f7963877f422 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Tue, 29 Sep 2020 17:43:30 -0700
Subject: [PATCH] Adds review box to main page layout

---
 bookwyrm/static/css/format.css                | 16 +++--
 bookwyrm/static/js/shared.js                  |  2 +-
 bookwyrm/templates/feed.html                  | 70 +++++++++++++------
 bookwyrm/templates/snippets/covers_shelf.html |  6 +-
 .../templates/snippets/create_status.html     | 56 +++++++--------
 bookwyrm/views.py                             | 27 -------
 6 files changed, 89 insertions(+), 88 deletions(-)

diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css
index aacb12c09..51aea3571 100644
--- a/bookwyrm/static/css/format.css
+++ b/bookwyrm/static/css/format.css
@@ -81,15 +81,27 @@ input.toggle-control:checked ~ .toggle-content {
 .cover-container {
     height: 250px;
 }
+.cover-container.is-medium {
+    height: 150px;
+}
+.cover-container.is-medium .no-cover div {
+    font-size: 0.9em;
+    padding: 0.3em;
+}
 .cover-container.is-small {
     height: 100px;
 }
+.cover-container.is-small .no-cover div {
+    font-size: 0.7em;
+    padding: 0.1em;
+}
 .book-cover {
     height: 100%;
     object-fit: scale-down;
 }
 .no-cover {
     position: relative;
+    white-space: normal;
 }
 .no-cover div {
     position: absolute;
@@ -99,10 +111,6 @@ input.toggle-control:checked ~ .toggle-content {
     left: 0;
     text-align: center;
 }
-.is-small .no-cover div {
-    font-size: 0.7em;
-    padding: 0.1em;
-}
 
 
 /* --- AVATAR --- */
diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index 6ed72a4a7..9b16174e7 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -32,7 +32,7 @@ function rate_stars(e) {
 }
 
 function tabChange(e) {
-    var target = e.target.parentElement.parentElement;
+    var target = e.target.closest('li')
     var identifier = target.getAttribute('data-id');
 
     var tabs = target.parentElement.children;
diff --git a/bookwyrm/templates/feed.html b/bookwyrm/templates/feed.html
index 4499ea09e..2c3766d2b 100644
--- a/bookwyrm/templates/feed.html
+++ b/bookwyrm/templates/feed.html
@@ -2,31 +2,55 @@
 {% load fr_display %}
 {% block content %}
 
-<div>
-    {% for activity in activities %}
-    <div class="block">
-    {% include 'snippets/status.html' with status=activity %}
+<div class="columns">
+    <div class="column">
+        <h2 class="title is-3">Recent Books</h2>
+        <div class="tabs is-small is-toggle">
+            <ul>
+                {% for book in user_books|slice:3 %}
+                <li class="{% if forloop.first %}is-active{% endif %}" data-id="tab-book-{{ book.id }}">
+                    <label for="book-{{ book.id }}" onclick="tabChange(event)"><a>{% include 'snippets/book_cover.html' with book=book size="medium" %}</a></label>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+        {% for book in user_books|slice:3 %}
+        <div>
+            <input class="toggle-control" type="radio" name="recent-books" id="book-{{ book.id }}" {% if forloop.first %}checked{% endif %}>
+            <div class="toggle-content hidden">
+                {% include 'snippets/create_status.html' with book=book %}
+            </div>
+        </div>
+        {% endfor %}
     </div>
-    {% endfor %}
 
-    <nav class="pagination" role="navigation" aria-label="pagination">
-        {% if prev %}
-        <p class="pagination-previous">
-            <a href="{{ prev }}">
-                <span class="icon icon-arrow-left"></span>
-                Previous
-            </a>
-        </p>
-        {% endif %}
+    <div class="column is-two-thirds">
+        <h2 class="title is-3">Updates</h2>
+        {% for activity in activities %}
+        <div class="block">
+        {% include 'snippets/status.html' with status=activity %}
+        </div>
+        {% endfor %}
 
-        {% if next %}
-        <p class="pagination-next">
-            <a href="{{ next }}">
-                Next
-                <span class="icon icon-arrow-right"></span>
-            </a>
-        </p>
-        {% endif %}
-    </nav>
+        <nav class="pagination" role="navigation" aria-label="pagination">
+            {% if prev %}
+            <p class="pagination-previous">
+                <a href="{{ prev }}">
+                    <span class="icon icon-arrow-left"></span>
+                    Previous
+                </a>
+            </p>
+            {% endif %}
+
+            {% if next %}
+            <p class="pagination-next">
+                <a href="{{ next }}">
+                    Next
+                    <span class="icon icon-arrow-right"></span>
+                </a>
+            </p>
+            {% endif %}
+        </nav>
+    </div>
 </div>
 {% endblock %}
diff --git a/bookwyrm/templates/snippets/covers_shelf.html b/bookwyrm/templates/snippets/covers_shelf.html
index 7e38f9e62..69b8114f1 100644
--- a/bookwyrm/templates/snippets/covers_shelf.html
+++ b/bookwyrm/templates/snippets/covers_shelf.html
@@ -1,14 +1,15 @@
 {% load fr_display %}
 
+<div class="level is-mobile">
 {% for shelf in shelves %}
 {% if shelf.books %}
-<div class="container">
+<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>
+    <div class="level is-mobile">
         {% for book in shelf.books %}
         <div>
             <label for="book-{{ book.id }}-radio">
@@ -21,3 +22,4 @@
 </div>
 {% endif %}
 {% endfor %}
+</div>
diff --git a/bookwyrm/templates/snippets/create_status.html b/bookwyrm/templates/snippets/create_status.html
index 3ab7fbeb8..1a6438872 100644
--- a/bookwyrm/templates/snippets/create_status.html
+++ b/bookwyrm/templates/snippets/create_status.html
@@ -1,71 +1,65 @@
 {% load humanize %}
 {% load fr_display %}
 
-<div class="tabs is-boxed">
-    <ul>
-        <li class="is-active" data-id="tab-review-{{ book.id }}" data-category="tab-option-{{ book.id }}">
-            <label for="review-{{ book.id }}" onclick="tabChange(event)"><a>Review</a></label>
-        </li>
-        <li data-id="tab-comment-{{ book.id }}" data-category="tab-option-{{ book.id }}">
-            <label for="comment-{{ book.id}}" onclick="tabChange(event)"><a>Comment</a></label>
-        </li>
-        <li data-id="tab-quotation-{{ book.id }}" data-category="tab-option-{{ book.id }}">
-            <label for="quote-{{ book.id }}" onclick="tabChange(event)"><a>Quote</a></label>
-        </li>
-    </ul>
-</div>
-
 <div class="columns">
-    {% if not hide_cover %}
-    <div class="column is-narrow">
-        {% include 'snippets/book_cover.html' with book=book %}
-    </div>
-    {% endif %}
-
     <div class="column">
+        <div class="tabs is-boxed">
+            <ul>
+                <li class="is-active" data-id="tab-review-{{ book.id }}" data-category="tab-option-{{ book.id }}">
+                    <label for="review-{{ book.id }}" onclick="tabChange(event)"><a>Review</a></label>
+                </li>
+                <li data-id="tab-comment-{{ book.id }}" data-category="tab-option-{{ book.id }}">
+                    <label for="comment-{{ book.id}}" onclick="tabChange(event)"><a>Comment</a></label>
+                </li>
+                <li data-id="tab-quotation-{{ book.id }}" data-category="tab-option-{{ book.id }}">
+                    <label for="quote-{{ book.id }}" onclick="tabChange(event)"><a>Quote</a></label>
+                </li>
+            </ul>
+        </div>
+
         <div>
-            <input class="toggle-control" type="radio" name="status-tabs" id="review-{{ book.id }}" checked>
+            <input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="review-{{ book.id }}" checked>
             <form class="toggle-content hidden tab-option-{{ book.id }}" name="review" action="/review/" method="post" id="tab-review-{{ book.id }}">
                 {% csrf_token %}
-                <input type="hidden" name="book" value="{{ book.id }}">
+                <input type="hidden" name="book-{{ book.id }}" value="{{ book.id }}">
                 <div class="control">
                     <label class="label" for="id_name">Title:</label>
-                    {{ review_form.name }}
+                    <input type="text" name="name" maxlength="255" class="input" required="" id="id_name" placeholder="My review of '{{ book.title }}'">
                 </div>
                 <div class="control">
                     <label class="label" for="id_content">Review:</label>
                     {% include 'snippets/rate_form.html' with book=book %}
-                    {{ review_form.content }}
+                    <textarea name="content" class="textarea" id="id_content"></textarea>
                 </div>
                 <button class="button is-primary" type="submit">post review</button>
             </form>
         </div>
 
         <div>
-            <input class="toggle-control" type="radio" name="status-tabs" id="comment-{{ book.id }}">
+            <input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="comment-{{ book.id }}">
             <form class="toggle-content hidden tab-option-{{ book.id }}" name="comment" action="/comment/" method="post" id="tab-comment-{{ book.id }}">
                 {% csrf_token %}
-                <input type="hidden" name="book" value="{{ book.id }}">
+                <input type="hidden" name="book-{{ book.id }}" value="{{ book.id }}">
                 <div class="control">
                     <label class="label" for="id_content">Comment:</label>
-                    {{ comment_form.content }}
+                    <textarea name="content" class="textarea" id="id_content" placeholder="Some thoughts on '{{ book.title }}'"></textarea>
                 </div>
                 <button class="button is-primary" type="submit">post comment</button>
             </form>
         </div>
 
         <div>
-            <input class="toggle-control" type="radio" name="status-tabs" id="quote-{{ book.id }}">
+            <input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="quote-{{ book.id }}">
             <form class="toggle-content hidden tab-option-{{ book.id }}" name="quotation" action="/quotate/" method="post" id="tab-quotation-{{ book.id }}">
                 {% csrf_token %}
-                <input type="hidden" name="book" value="{{ book.id }}">
+                <input type="hidden" name="book-{{ book.id }}" value="{{ book.id }}">
                 <div class="control">
                     <label class="label" for="id_quote">Quote:</label>
-                    {{ quotation_form.quote }}
+                    <textarea name="quote" class="textarea" required="" id="id_quote" placeholder="An except from '{{ book.title }}'"></textarea>
                 </div>
                 <div class="control">
                     <label class="label" for="id_content">Comment:</label>
-                    {{ quotation_form.content }}
+                    <textarea name="content" class="textarea is-small" id="id_content"></textarea>
                 </div>
                 <button class="button is-primary" type="submit">post quote</button>
             </form>
diff --git a/bookwyrm/views.py b/bookwyrm/views.py
index 654dd26e3..85a9e0237 100644
--- a/bookwyrm/views.py
+++ b/bookwyrm/views.py
@@ -56,26 +56,6 @@ def home_tab(request, tab):
     except ValueError:
         page = 1
 
-    shelves = []
-    shelves = get_user_shelf_preview(
-        request.user,
-        [('reading', 3), ('read', 1), ('to-read', 3)]
-    )
-    size = sum(len(s['books']) for s in shelves)
-    # books new to the instance, for discovery
-    if size < 6:
-        recent_books = models.Work.objects.order_by(
-            '-created_date'
-        )[:6 - size]
-        recent_books = [b.default_edition for b in recent_books]
-        shelves.append({
-            'name': 'Recently added',
-            'identifier': None,
-            'books': recent_books,
-            'count': 6 - size,
-        })
-
-
     # allows us to check if a user has shelved a book
     user_books = models.Edition.objects.filter(shelves__user=request.user).all()
 
@@ -88,15 +68,8 @@ def home_tab(request, tab):
     prev_page = '/?page=%d' % (page - 1)
     data = {
         'user': request.user,
-        'shelves': shelves,
         'user_books': user_books,
         'activities': activities,
-        'feed_tabs': [
-            {'id': 'home', 'display': 'Home'},
-            {'id': 'local', 'display': 'Local'},
-            {'id': 'federated', 'display': 'Federated'}
-        ],
-        'active_tab': tab,
         'review_form': forms.ReviewForm(),
         'quotation_form': forms.QuotationForm(),
         'comment_form': forms.CommentForm(),