From 9ef63fff4a4a98571bdbfdd52fd9f1947daca281 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Fri, 6 Nov 2020 13:03:54 -0800
Subject: [PATCH] More formatting for editing readthrough

---
 bookwyrm/templates/book.html                  | 44 ++++++++++---------
 .../templates/snippets/shelve_button.html     |  4 +-
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html
index 9a0ad1e4..af79f57f 100644
--- a/bookwyrm/templates/book.html
+++ b/bookwyrm/templates/book.html
@@ -79,41 +79,43 @@
                     <div class="field is-grouped">
                         <label class="button is-small" for="edit-readthrough-{{ readthrough.id }}">
                             <span class="icon icon-pencil">
-                                <span class="is-sr-only">Edit readthrough dates</span>
+                                <span class="is-sr-only">Edit read-through dates</span>
                             </span>
                         </label>
                         <label class="button is-small" for="delete-readthrough-{{ readthrough.id }}">
                             <span class="icon icon-x">
-                                <span class="is-sr-only">Delete this readthrough</span>
+                                <span class="is-sr-only">Delete this read-through</span>
                             </span>
                         </label>
                     </div>
                 </div>
             </div>
 
-            <div>
+            <div class="block">
                 <input class="toggle-control" type="radio" name="show-edit-readthrough" id="edit-readthrough-{{ readthrough.id }}">
                 <div class="toggle-content hidden">
-                    <form name="edit-readthrough" action="/edit-readthrough" method="post">
+                    <div class="box">
+                        <form name="edit-readthrough" action="/edit-readthrough" method="post">
                         {% csrf_token %}
                         <input type="hidden" name="id" value="{{ readthrough.id }}">
-                        <div class="field">
-                            <label class="label" for="start_date">
-                                Started reading
-                                <input type="date" name="start_date" class="input" id="id_start_date-{{ readthrough.id }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
-                            </label>
-                        </div>
-                        <div class="field">
-                            <label class="label" for="finish_date">
-                                Finished reading
-                                <input type="date" name="finish_date" class="input" id="id_finish_date-{{ readthrough.id }}" value="{{ readthrough.finish_date | date:"Y-m-d" }}">
-                            </label>
-                        </div>
-                        <div class="field is-grouped">
-                            <button class="button is-small" type="submit">Save</button>
-                            <label class="button is-small" for="show-readthrough-{{ readthrough.id }}">Cancel</label>
-                        </div>
-                    </form>
+                            <div class="field">
+                                <label class="label" for="start_date">
+                                    Started reading
+                                    <input type="date" name="start_date" class="input" id="id_start_date-{{ readthrough.id }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
+                                </label>
+                            </div>
+                            <div class="field">
+                                <label class="label" for="finish_date">
+                                    Finished reading
+                                    <input type="date" name="finish_date" class="input" id="id_finish_date-{{ readthrough.id }}" value="{{ readthrough.finish_date | date:"Y-m-d" }}">
+                                </label>
+                            </div>
+                            <div class="field is-grouped">
+                                <button class="button is-primary" type="submit">Save</button>
+                                <label class="button" for="show-readthrough-{{ readthrough.id }}">Cancel</label>
+                            </div>
+                        </form>
+                    </div>
                 </div>
             </div>
 
diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index eee89728..84c560d7 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -63,7 +63,7 @@
         <div class="modal-background"></div>
         <div class="modal-card">
             <header class="modal-card-head">
-                <p class="modal-card-title">Started "{{ book.title }}"</p>
+                <p class="modal-card-title">Start "{{ book.title }}"</p>
                 <label class="delete" for="start-reading-{{ uuid }}" aria-label="close"></label>
             </header>
             <form name="start-reading" action="/start-reading" method="post">
@@ -104,7 +104,7 @@
         <div class="modal-background"></div>
         <div class="modal-card">
             <header class="modal-card-head">
-                <p class="modal-card-title">Finished "{{ book.title }}"</p>
+                <p class="modal-card-title">Finish "{{ book.title }}"</p>
                 <label class="delete" for="finish-reading-{{ uuid }}" aria-label="close"></label>
             </header>
             {% active_read_through book user as readthrough %}