From 129ca0352fd325004c16253471077d8c64c8525e Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Fri, 22 Jan 2021 13:00:20 -0800
Subject: [PATCH] Consistent progress type form element

---
 .../templates/snippets/readthrough_form.html  | 30 +++++++------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/bookwyrm/templates/snippets/readthrough_form.html b/bookwyrm/templates/snippets/readthrough_form.html
index a0502b7b9..21d0a8098 100644
--- a/bookwyrm/templates/snippets/readthrough_form.html
+++ b/bookwyrm/templates/snippets/readthrough_form.html
@@ -9,26 +9,18 @@
 </div>
 {# Only show progress for editing existing readthroughs #}
 {% if readthrough.id and not readthrough.finish_date %}
-<div class="columns">
-    <div class="column">
-        <div class="field">
-            <label class="label">
-                Progress
-                <input type="number" name="progress" class="input" id="id_progress-{{ readthrough.id }}" value="{{ readthrough.progress }}">
-            </label>
-        </div>
+<label class="label" for="id_progress-{{ readthrough.id }}">
+    Progress
+</label>
+<div class="field has-addons">
+    <div class="control">
+        <input type="number" name="progress" class="input" id="id_progress-{{ readthrough.id }}" value="{{ readthrough.progress }}">
     </div>
-    <div class="column">
-        <div class="control mt-5">
-            <label class="radio">
-                <input type="radio" name="progress_mode" id="id_progress_mode-{{ readthrough.id }}" value="PG" {% if readthrough.progress_mode == 'PG' %}checked{% endif %}>
-                pages
-            </label>
-            <label class="radio">
-                <input type="radio" name="progress_mode" id="id_progress_mode-{{ readthrough.id }}" value="PCT" {% if readthrough.progress_mode == 'PCT' %}checked{% endif %}>
-                percent
-            </label>
-        </div>
+    <div class="control select">
+        <select name="progress_mode" aria-label="Progress mode">
+            <option value="PG" {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>pages</option>
+            <option value="PCT" {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>percent</option>
+        </select>
     </div>
 </div>
 {% endif %}