From aa7320ffe069eb38bb998bb0cf1a433c314c8041 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 14:00:05 -0800
Subject: [PATCH] Using toggle button snippets on shelf page

---
 bookwyrm/templates/shelf.html | 60 +++++++++++++++--------------------
 1 file changed, 25 insertions(+), 35 deletions(-)

diff --git a/bookwyrm/templates/shelf.html b/bookwyrm/templates/shelf.html
index 99e0c678..ae25998a 100644
--- a/bookwyrm/templates/shelf.html
+++ b/bookwyrm/templates/shelf.html
@@ -33,39 +33,35 @@
     <div class="column is-narrow">
         <input type="radio" id="create-shelf-form-hide" name="create-shelf-form" class="toggle-control" checked>
         <div class="toggle-content hidden">
-            <label for="create-shelf-form-show">
-                <div role="button" tabindex="0">
-                    <span class="icon icon-plus">
-                        <span class="is-sr-only">Create new shelf</span>
-                    </span>
-                </div>
-            </label>
+            {% include 'snippets/toggle/toggle_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form-show" %}
         </div>
     </div>
     {% endif %}
 </div>
 
-<input type="radio" id="create-shelf-form-show" name="create-shelf-form" class="toggle-control">
-<div class="toggle-content hidden">
-    <div class="box mb-5">
-        <h2 class="title is-4">Create new shelf</h2>
-        <form name="create-shelf" action="/create-shelf/" method="post">
-            {% csrf_token %}
-            <input type="hidden" name="user" value="{{ request.user.id }}">
-            <div class="field">
-                <label class="label" for="id_name_create">Name:</label>
-                <input type="text" name="name" maxlength="100" class="input" required="true" id="id_name_create">
-            </div>
+<div>
+    <input type="radio" id="create-shelf-form-show" name="create-shelf-form" class="toggle-control">
+    <div class="toggle-content hidden">
+        <div class="box mb-5">
+            <h2 class="title is-4">Create new shelf</h2>
+            <form name="create-shelf" action="/create-shelf/" method="post">
+                {% csrf_token %}
+                <input type="hidden" name="user" value="{{ request.user.id }}">
+                <div class="field">
+                    <label class="label" for="id_name_create">Name:</label>
+                    <input type="text" name="name" maxlength="100" class="input" required="true" id="id_name_create">
+                </div>
 
-            <label class="label">
-                <p>Shelf privacy:</p>
-                {% include 'snippets/privacy_select.html' with no_label=True %}
-            </label>
-            <div class="field is-grouped">
-                <button class="button is-primary" type="submit">Create shelf</button>
-                <label role="button" class="button" for="create-shelf-form-hide" tabindex="0">Cancel<label>
-            </div>
-        </form>
+                <label class="label">
+                    <p>Shelf privacy:</p>
+                    {% include 'snippets/privacy_select.html' with no_label=True %}
+                </label>
+                <div class="field is-grouped">
+                    <button class="button is-primary" type="submit">Create shelf</button>
+                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="create-shelf-form-hide" %}
+                </div>
+            </form>
+        </div>
     </div>
 </div>
 
@@ -82,13 +78,7 @@
     <div class="column is-narrow">
         <input type="radio" id="edit-shelf-form-hide" name="edit-shelf-form" class="toggle-control" checked>
         <div class="toggle-content hidden">
-            <label for="edit-shelf-form-show">
-                <div role="button" tabindex="0">
-                    <span class="icon icon-pencil">
-                        <span class="is-sr-only">Edit shelf</span>
-                    </span>
-                </div>
-            </label>
+            {% include 'snippets/toggle/toggle_button.html' with text="Edit shelf" icon="pencil" class="is-clickable" controls_text="edit-shelf-form-show" %}
         </div>
     </div>
     {% endif %}
@@ -116,7 +106,7 @@
             </label>
             <div class="field is-grouped">
                 <button class="button is-primary" type="submit">Update shelf</button>
-                <label role="button" class="button" for="edit-shelf-form-hide" tabindex="0">Cancel<label>
+                {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="edit-shelf-form-hide" %}
             </div>
         </form>
     </div>