From 69c5bf71ed7ca81b0241cb041c1069af99c69126 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Fri, 22 Jan 2021 12:51:23 -0800
Subject: [PATCH] Uses javascript show/hide for reading progress updates

---
 bookwyrm/templates/snippets/readthrough.html | 104 ++++++++-----------
 1 file changed, 46 insertions(+), 58 deletions(-)

diff --git a/bookwyrm/templates/snippets/readthrough.html b/bookwyrm/templates/snippets/readthrough.html
index 79248891..618433b5 100644
--- a/bookwyrm/templates/snippets/readthrough.html
+++ b/bookwyrm/templates/snippets/readthrough.html
@@ -1,67 +1,55 @@
 {% load humanize %}
 <div class="content block">
     <div id="hide-edit-readthrough-{{ readthrough.id }}">
-        <dl class="mb-1">
-            {% if readthrough.start_date %}
-            <div class="is-flex">
-                <dt>Started reading:</dt>
-                <dd>{{ readthrough.start_date | naturalday }}</dd>
+        <div class="columns">
+            <div class="column">
+                Progress Updates:
+                </dl>
+                <ul>
+                    {% if readthrough.finish_date %}
+                    <li>{{ readthrough.start_date | naturalday }}: finished</li>
+                    {% endif %}
+                    {% if readthrough.progress %}
+                    <li>{% if readthrough.progress_mode == 'PG' %}on page {{ readthrough.progress }}{% if book.pages %} of {{ book.pages }}{% endif %}
+                        {% else %}{{ readthrough.progress }}%{% endif %}
+                    {% include 'snippets/toggle/toggle_button.html' with text="Show all updates" controls_text="updates" controls_uid=readthrough.id class="is-small" %}
+                        <ul id="updates-{{ readthrough.id }}" class="hidden">
+                            {% for progress_update in readthrough.progress_updates %}
+                            <li>
+                                <form name="delete-update" action="/delete-progressupdate" method="POST">
+                                    {% csrf_token %}
+                                    {{ progress_update.created_date | naturalday }}:
+                                    {% if progress_update.mode == 'PG' %}
+                                    page {{ progress_update.progress }} of {{ book.pages }}
+                                    {% else %}
+                                    {{ progress_update.progress }}%
+                                    {% endif %}
+                                    <input type="hidden" name="id" value="{{ progress_update.id }}"/>
+                                    <button type="submit" class="button is-small" for="delete-progressupdate-{{ progress_update.id }}" role="button" tabindex="0">
+                                        <span class="icon icon-x" title="Delete this progress update">
+                                            <span class="is-sr-only">Delete this progress update</span>
+                                        </span>
+                                    </button>
+                                </form>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    {% endif %}
+                    <li>{{ readthrough.start_date | naturalday }}: started</li>
+                </ul>
             </div>
-            {% endif %}
-            {% if readthrough.finish_date %}
-            <div class="is-flex">
-                <dt>Finished reading:</dt>
-                <dd>{{ readthrough.finish_date | naturalday }}</dd>
-            </div>
-            {% elif readthrough.progress %}
-            <div class="is-flex">
-                <dt>Progress:</dt>
-                {% if readthrough.progress_mode == 'PG' %}
-                <dd>on page {{ readthrough.progress }} of {{ book.pages }}</dd>
-                {% else %}
-                <dd>{{ readthrough.progress }}%</dd>
-                {% endif %}
-            </div>
-            {% endif %}
-        </dl>
-        <div class="field has-addons">
-            <div class="control">
-                {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id focus="edit-readthrough" %}
-            </div>
-            <div class="control">
-                {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id focus="modal-title-delete-readthrough" %}
+            <div class="column is-narrow">
+                <div class="field has-addons">
+                    <div class="control">
+                        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id focus="edit-readthrough" %}
+                    </div>
+                    <div class="control">
+                        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id focus="modal-title-delete-readthrough" %}
+                    </div>
+                </div>
             </div>
         </div>
-        {% if show_progress %}
-        Progress Updates:
-        <ul>
-            {% if readthrough.finish_date %}
-            <li>{{ readthrough.start_date | naturalday }}: finished</li>
-            {% endif %}
-            {% for progress_update in readthrough.progress_updates %}
-            <li>
-                <form name="delete-update" action="/delete-progressupdate" method="POST">
-                    {% csrf_token %}
-                    {{ progress_update.created_date | naturalday }}:
-                    {% if progress_update.mode == 'PG' %}
-                    page {{ progress_update.progress }} of {{ book.pages }}
-                    {% else %}
-                    {{ progress_update.progress }}%
-                    {% endif %}
-                    <input type="hidden" name="id" value="{{ progress_update.id }}"/>
-                    <button type="submit" class="button is-small" for="delete-progressupdate-{{ progress_update.id }}" role="button" tabindex="0">
-                        <span class="icon icon-x">
-                            <span class="is-sr-only">Delete this progress update</span>
-                        </span>
-                    </button>
-                </form>
-            </li>
-            {% endfor %}
-            <li>{{ readthrough.start_date | naturalday }}: started</li>
-        </ul>
-        {% elif readthrough.progress_updates|length %}
-        <a href="?showprogress">Show {{ readthrough.progress_updates|length }} Progress Updates</a>
-        {% endif %}
     </div>
 </div>