From a4796cf5c5d87207f83ef1d7230edb4701fb431f Mon Sep 17 00:00:00 2001
From: Joel Bradshaw <cincodenada@gmail.com>
Date: Sun, 17 Jan 2021 03:14:26 -0800
Subject: [PATCH] Make the switching work, wows

Layout's all wonky now, but hey
---
 .../templates/snippets/progress_update.html   | 51 ++++++++++++-------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/bookwyrm/templates/snippets/progress_update.html b/bookwyrm/templates/snippets/progress_update.html
index 6936429d..79cbf159 100644
--- a/bookwyrm/templates/snippets/progress_update.html
+++ b/bookwyrm/templates/snippets/progress_update.html
@@ -1,25 +1,40 @@
 <form class="field is-grouped is-small pl-2" action="/edit-readthrough" method="POST">
     {% csrf_token %}
     <input type="hidden" name="id" value="{{ readthrough.id }}"/>
-    <div class="control">
-        {% if readthrough.progress_mode == 'PG' %}
-        on page
-        {% else %}
-        currently at
-        {% endif %}
+
+    <div>
+        <input class="toggle-control" type="radio" name="progress-mode" id="progress-mode-page" {% if readthrough.progress_mode == 'PG' %}checked{% endif %}>
+        <div class="toggle-content hidden" role="tabpanel" id="progress-mode-page-panel">
+            <div class="control">
+                <label for="progress-mode-percent">on page</label>
+            </div>
+            <div class="control">
+                <input
+                 aria-label="Current page"
+                 class="input is-small" type="text"
+                 name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
+            </div>
+            {% if book.pages %}
+            <div class="control">
+                of {{ book.pages }}
+            </div>
+            {% endif %}
+        </div>
     </div>
-    <div class="control">
-        <input
-         aria-label="{% if readthrough.progress_mode == 'PG' %}Current page{% else %}Perent read{% endif%}"
-         class="input is-small" type="text"
-         name="progress" size="3" value="{{ readthrough.progress|default:"" }}">
-    </div>
-    <div class="control">
-        {% if readthrough.progress_mode == 'PG' and book.pages %}
-        of {{ book.pages }}
-        {% else %}
-        %
-        {% endif %}
+    <div>
+        <input class="toggle-control" type="radio" name="progress-mode" id="progress-mode-percent" {% if readthrough.progress_mode == 'PCT' %}checked{% endif %}>
+        <div class="toggle-content hidden" role="tabpanel" id="progress-mode-percent-panel">
+            <div class="control">
+                <label for="progress-mode-page">currently at</label>
+            </div>
+            <div class="control">
+                <input
+                 aria-label="Percent read"
+                 class="input is-small" type="text"
+                 name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
+                %
+            </div>
+        </div>
     </div>
     <div class="control">
         <button class="button is-small px-2" type="submit">Go</button>