From ff743ed9d6d5ae6056356a56ad8d7a525b0d416e Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sun, 17 Jan 2021 10:38:34 -0800
Subject: [PATCH] Javascript button for reply form

---
 bookwyrm/static/css/format.css                     |  2 +-
 .../templates/snippets/create_status_form.html     |  8 ++++----
 bookwyrm/templates/snippets/status_body.html       |  5 ++---
 bookwyrm/templates/snippets/trimmed_text.html      | 14 ++++++--------
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css
index 69ac202db..7a513a655 100644
--- a/bookwyrm/static/css/format.css
+++ b/bookwyrm/static/css/format.css
@@ -18,7 +18,7 @@
     background-color: hsl(171, 100%, 41%);
     color: white;
 }
-.hide-active[aria-pressed=true], .hide-active {
+.hide-active[aria-pressed=true], .hide-inactive[aria-pressed=false] {
     display: none;
 }
 
diff --git a/bookwyrm/templates/snippets/create_status_form.html b/bookwyrm/templates/snippets/create_status_form.html
index 22872c05c..d1d998170 100644
--- a/bookwyrm/templates/snippets/create_status_form.html
+++ b/bookwyrm/templates/snippets/create_status_form.html
@@ -34,14 +34,14 @@
         <textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
         {% else %}
         {% include 'snippets/content_warning_field.html' with parent_status=status %}
-        <textarea name="content" class="textarea" id="id_content_{{ book.id }}{{reply_parent.id}}{{ uuid }}_{{ type }}" placeholder="{{ placeholder }}" {% if type == 'reply' %} aria-label="Reply"{% endif %} required></textarea>
+        <textarea name="content" class="textarea" id="id_content_{{ type }}-{{ book.id }}{{reply_parent.id}}" placeholder="{{ placeholder }}" {% if type == 'reply' %} aria-label="Reply"{% endif %} required></textarea>
         {% endif %}
     </div>
     {% if type == 'quotation' %}
     <div class="control">
-        <label class="label" for="id_content_{{ book.id }}_quote">Comment:</label>
+        <label class="label" for="id_content_quote-{{ book.id }}">Comment:</label>
         {% include 'snippets/content_warning_field.html' with parent_status=status %}
-        <textarea name="content" class="textarea is-small" id="id_content_{{ book.id }}_quote"></textarea>
+        <textarea name="content" class="textarea is-small" id="id_content_quote-{{ book.id }}"></textarea>
     </div>
     {% endif %}
     <input type="checkbox" class="hidden" name="sensitive" id="id_show_spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %} aria-hidden="true">
@@ -56,7 +56,7 @@
             </div>
         </div>
         <div class="column is-narrow">
-            <button class="button is-link" type="submit">post</button>
+            <button class="button is-link" type="submit">Post</button>
         </div>
     </div>
 </form>
diff --git a/bookwyrm/templates/snippets/status_body.html b/bookwyrm/templates/snippets/status_body.html
index 893632dc2..b7b4e07c1 100644
--- a/bookwyrm/templates/snippets/status_body.html
+++ b/bookwyrm/templates/snippets/status_body.html
@@ -18,7 +18,7 @@
 {% block card-footer %}
 <div class="card-footer-item">
     {% if request.user.is_authenticated %}
-    {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text="Reply" icon='comment' small=True %}
+    {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text="Reply" icon="comment" class="is-small" focus="id_content_reply" %}
     {% include 'snippets/boost_button.html' with status=status %}
     {% include 'snippets/fav_button.html' with status=status %}
 
@@ -57,8 +57,7 @@
 {% block card-bonus %}
 {% if request.user.is_authenticated %}
 {% with status.id|uuid as uuid %}
-<input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}" data-focus-target="id_content_{{ status.id }}{{ uuid }}_reply">
-<section class="toggle-content hidden">
+<section class="hidden" id="show-comment-{{ status.id }}">
     <div class="card-footer">
         <div class="card-footer-item">
             {% include 'snippets/create_status_form.html' with reply_parent=status type="reply" %}
diff --git a/bookwyrm/templates/snippets/trimmed_text.html b/bookwyrm/templates/snippets/trimmed_text.html
index 069a57e47..b83019774 100644
--- a/bookwyrm/templates/snippets/trimmed_text.html
+++ b/bookwyrm/templates/snippets/trimmed_text.html
@@ -4,16 +4,14 @@
 
 {% with full|truncatewords_html:60 as trimmed %}
 {% if trimmed != full %}
-<div>
-    <input type="radio" name="show-hide-{{ uuid }}" id="show-{{ uuid }}" class="toggle-control" checked>
-    <blockquote class="content toggle-content hidden"><span dir="auto">{{ trimmed | to_markdown | safe }}</span>
-        {% include 'snippets/toggle/toggle_button.html' with text="show more" controls_text="hide" controls_uid=uuid class="has-text-link is-clickable" %}
+<div id="hide-full-{{ uuid }}">
+    <blockquote class="content" id="trimmed-{{ uuid }}"><span dir="auto">{{ trimmed | to_markdown | safe }}</span>
+        {% include 'snippets/toggle/open_button.html' with text="show more" controls_text="full" controls_uid=uuid class="is-small" %}
     </blockquote>
 </div>
-<div>
-    <input type="radio" name="show-hide-{{ uuid }}" id="hide-{{ uuid }}" class="toggle-control">
-    <blockquote class="content toggle-content hidden"><span dir="auto">{{ full | to_markdown | safe }}</span>
-        {% include 'snippets/toggle/toggle_button.html' with text="show less" controls_text="show" controls_uid=uuid class="has-text-link is-clickable" %}
+<div id="full-{{ uuid }}" class="hidden">
+    <blockquote class="content"><span dir="auto">{{ full | to_markdown | safe }}</span>
+        {% include 'snippets/toggle/close_button.html' with text="show less" controls_text="full" controls_uid=uuid class="is-small" %}
     </blockquote>
 </div>
 {% else %}