Uses clickable dropdowns and improves styling on menu buttons

screenreader legible

bookwyrm/templates/snippets/components/dropdown.html

@@ -1,6 +1,6 @@
 {% load bookwyrm_tags %}
 {% with 0|uuid as uuid %}
-<div class="dropdown {% if right %}is-right{% endif %}" id="menu-{{ uuid }}">
+<div class="dropdown control{% if right %} is-right{% endif %}" id="menu-{{ uuid }}">
     <button type="button" class="button dropdown-trigger pulldown-menu {{ class }}" aria-expanded="false" class="pulldown-menu" aria-haspopup="true" aria-controls="menu-options-{{ uuid }}" data-controls="menu-{{ uuid }}">
         {% block dropdown-trigger %}{% endblock %}
     </button>

bookwyrm/templates/snippets/shelf_selector.html

@@ -12,7 +12,7 @@
         {% csrf_token %}
         <input type="hidden" name="book" value="{{ book.id }}">
         <input type="hidden" name="shelf" value="{{ shelf.identifier }}">
-        <button class="button is-small" type="submit">{{ shelf.name }}</button>
+        <button class="button is-fullwidth is-small" type="submit">{{ shelf.name }}</button>
     </form>
 </li>
 {% endif %}
@@ -23,7 +23,7 @@
         {% csrf_token %}
         <input type="hidden" name="book" value="{{ book.id }}">
         <input type="hidden" name="shelf" value="{{ current.id }}">
-        <button class="button is-small is-danger is-light" type="submit">Unshelve</button>
+        <button class="button is-fullwidth is-small is-danger is-light" type="submit">Unshelve</button>
     </form>
 </li>
 {% endblock %}

bookwyrm/templates/snippets/shelve_button.html

@@ -26,38 +26,7 @@
         </form>
         {% endif %}
     </div>
-
+    {% include 'snippets/shelve_button_dropdown.html' with class="is-small" button_uuid=uuid%}
-    <div class="dropdown control is-hoverable">
-        <div class="dropdown-trigger">
-            <label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
-                <div class="button is-small">
-                    <span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span>
-                </div>
-            </label>
-        </div>
-        <div class="dropdown-menu" id="shelf-select-{{ uuid }}" role="menu">
-            <ul class="dropdown-content">
-                {% for shelf in request.user.shelf_set.all %}
-                <li role="menuitem">
-                    {% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
-                    <div class="dropdown-item pt-0 pb-0">
-                        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Start reading" controls_text="start-reading" controls_uid=uuid %}
-                    </div>
-                    {% else %}
-                    <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
-                        {% csrf_token %}
-                        <input type="hidden" name="book" value="{{ active_shelf.book.id }}">
-                        <button class="button is-small" name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>
-                            <span>{{ shelf.name }}</span>
-                            {% if shelf in book.shelf_set.all %}<span class="icon icon-check"></span>{% endif %}
-                        </button>
-                    </form>
-                    {% endif %}
-                </li>
-                {% endfor %}
-            </ul>
-        </div>
-    </div>
     {% endif %}
 </div>
 

bookwyrm/templates/snippets/shelve_button_dropdown.html

@@ -0,0 +1,28 @@
+{% extends 'snippets/components/dropdown.html' %}
+{% block dropdown-trigger %}
+<span class="icon icon-arrow-down">
+    <span class="is-sr-only">More shelves</span>
+</span>
+{% endblock %}
+
+{% block dropdown-list %}
+{% for shelf in request.user.shelf_set.all %}
+<li role="menuitem">
+    {% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
+    <div class="dropdown-item pt-0 pb-0">
+        {% include 'snippets/toggle/toggle_button.html' with class="is-fullwidth is-small" text="Start reading" controls_text="start-reading" controls_uid=button_uuid %}
+    </div>
+    {% else %}
+    <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
+        {% csrf_token %}
+        <input type="hidden" name="book" value="{{ active_shelf.book.id }}">
+        <button class="button is-fullwidth is-small" name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>
+            <span>{{ shelf.name }}</span>
+            {% if shelf in book.shelf_set.all %}<span class="icon icon-check"></span>{% endif %}
+        </button>
+    </form>
+    {% endif %}
+</li>
+{% endfor %}
+{% endblock %}
+

bookwyrm/templates/snippets/status_options.html

@@ -10,7 +10,7 @@
 <li role="menuitem">
     <form class="dropdown-item pt-0 pb-0" name="delete-{{status.id}}" action="/delete-status/{{ status.id }}" method="post">
         {% csrf_token %}
-        <button class="button is-danger is-light" type="submit">
+        <button class="button is-danger is-light is-fullwidth is-small" type="submit">
             Delete post
         </button>
     </form>