From dbc6fb1d1856bf51fb927b163a0bab8a420e065b Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Tue, 29 Sep 2020 11:48:03 -0700
Subject: [PATCH] Status form in book page

---
 bookwyrm/static/js/shared.js                  | 12 +--
 .../templates/snippets/create_status.html     | 77 ++++++++++++-------
 bookwyrm/views.py                             |  2 +
 3 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index 41d2e703..6ed72a4a 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -32,18 +32,9 @@ function rate_stars(e) {
 }
 
 function tabChange(e) {
-    e.preventDefault();
-    var target = e.target.parentElement;
+    var target = e.target.parentElement.parentElement;
     var identifier = target.getAttribute('data-id');
 
-    var options_class = target.getAttribute('data-category');
-    var options = document.getElementsByClassName(options_class);
-    for (var i = 0; i < options.length; i++) {
-        if (!options[i].className.includes('hidden')) {
-            options[i].className += ' hidden';
-        }
-    }
-
     var tabs = target.parentElement.children;
     for (i = 0; i < tabs.length; i++) {
         if (tabs[i].getAttribute('data-id') == identifier) {
@@ -54,7 +45,6 @@ function tabChange(e) {
     }
 
     var el = document.getElementById(identifier);
-    el.className = el.className.replace('hidden', '');
 }
 
 function ajaxPost(form) {
diff --git a/bookwyrm/templates/snippets/create_status.html b/bookwyrm/templates/snippets/create_status.html
index ca68a26a..3ab7fbeb 100644
--- a/bookwyrm/templates/snippets/create_status.html
+++ b/bookwyrm/templates/snippets/create_status.html
@@ -4,13 +4,13 @@
 <div class="tabs is-boxed">
     <ul>
         <li class="is-active" data-id="tab-review-{{ book.id }}" data-category="tab-option-{{ book.id }}">
-            <a href="/book/{{ book.id }}/review" onclick="tabChange(event)">Review</a>
+            <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 }}">
-            <a href="/book/{{ book.id }}/comment" onclick="tabChange(event)">Comment</a>
+            <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 }}">
-            <a href="/book/{{ book.id }}/quotation" onclick="tabChange(event)">Quote</a>
+            <label for="quote-{{ book.id }}" onclick="tabChange(event)"><a>Quote</a></label>
         </li>
     </ul>
 </div>
@@ -22,32 +22,53 @@
     </div>
     {% endif %}
 
-    <form class="tab-option-{{ book.id }} column" name="review" action="/review/" method="post" id="tab-review-{{ book.id }}">
-        {% csrf_token %}
-        <input type="hidden" name="book" value="{{ book.id }}">
-	<div class="control">
-            <label class="label" for="id_name">Title:</label>
-            {{ review_form.name }}
+    <div class="column">
+        <div>
+            <input class="toggle-control" type="radio" name="status-tabs" 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 }}">
+                <div class="control">
+                    <label class="label" for="id_name">Title:</label>
+                    {{ review_form.name }}
+                </div>
+                <div class="control">
+                    <label class="label" for="id_content">Review:</label>
+                    {% include 'snippets/rate_form.html' with book=book %}
+                    {{ review_form.content }}
+                </div>
+                <button class="button is-primary" type="submit">post review</button>
+            </form>
         </div>
-	<div class="control">
-            <label class="label" for="id_content">Review:</label>
-            {% include 'snippets/rate_form.html' with book=book %}
-            {{ review_form.content }}
+
+        <div>
+            <input class="toggle-control" type="radio" name="status-tabs" 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 }}">
+                <div class="control">
+                    <label class="label" for="id_content">Comment:</label>
+                    {{ comment_form.content }}
+                </div>
+                <button class="button is-primary" type="submit">post comment</button>
+            </form>
         </div>
-        <button class="button is-primary" type="submit">post review</button>
-    </form>
 
-    <form class="hidden tab-option-{{ book.id }} column" name="comment" action="/comment/" method="post" id="tab-comment-{{ book.id }}">
-        {% csrf_token %}
-        <input type="hidden" name="book" value="{{ book.id }}">
-        {{ comment_form.as_p }}
-        <button class="button is-primary" type="submit">post comment</button>
-    </form>
-
-    <form class="hidden tab-option-{{ book.id }} column" name="quotation" action="/quotate/" method="post" id="tab-quotation-{{ book.id }}">
-        {% csrf_token %}
-        <input type="hidden" name="book" value="{{ book.id }}">
-        {{ quotation_form.as_p }}
-        <button class="button is-primary" type="submit">post quote</button>
-    </form>
+        <div>
+            <input class="toggle-control" type="radio" name="status-tabs" 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 }}">
+                <div class="control">
+                    <label class="label" for="id_quote">Quote:</label>
+                    {{ quotation_form.quote }}
+                </div>
+                <div class="control">
+                    <label class="label" for="id_content">Comment:</label>
+                    {{ quotation_form.content }}
+                </div>
+                <button class="button is-primary" type="submit">post quote</button>
+            </form>
+        </div>
+    </div>
 </div>
diff --git a/bookwyrm/views.py b/bookwyrm/views.py
index c5a42616..654dd26e 100644
--- a/bookwyrm/views.py
+++ b/bookwyrm/views.py
@@ -467,6 +467,8 @@ def book_page(request, book_id, tab='friends'):
         'tags': tags,
         'user_tags': user_tags,
         'review_form': forms.ReviewForm(),
+        'quotation_form': forms.QuotationForm(),
+        'comment_form': forms.CommentForm(),
         'tag_form': forms.TagForm(),
         'feed_tabs': [
             {'id': 'friends', 'display': 'Friends'},