Component for dropdowns

also use hoverable dropdowns

bookwyrm/templates/layout.html

@@ -51,7 +51,7 @@
     </div>
 
     <input class="toggle-control" type="checkbox" id="main-nav">
-    <div id="mainNav" class="navbar-menu toggle-content">
+    <div id="mainNav" class="navbar-menu">
         <div class="navbar-start">
             {% if request.user.is_authenticated %}
             <a href="/user/{{ request.user.localname }}/shelves" class="navbar-item">

bookwyrm/templates/snippets/components/dropdown.html

@@ -0,0 +1,13 @@
+<div class="dropdown is-hoverable {% if right %}is-right{% endif %}">
+    <div class="dropdown-trigger">
+        <button type="button" class="button pulldown-menu {{ class }}" aria-expanded="false" class="pulldown-menu" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
+            {% block dropdown-trigger %}{% endblock %}
+        </button>
+    </div>
+    <div class="dropdown-menu" id="shelf-select-{{ book.id }}" role="menu">
+        <ul class="dropdown-content">
+            {% block dropdown-list %}{% endblock %}
+        </ul>
+    </div>
+</div>
+

bookwyrm/templates/snippets/shelf_selector.html

@@ -1,36 +1,29 @@
-<div class="dropdown">
-    <div class="dropdown-trigger">
-        <label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
-            <div class="button">
-                <span>Change shelf</span>
-                <span class="icon icon-arrow-down" aria-hidden="true"></span>
-            </div>
-        </label>
-    </div>
-    <input type="checkbox" class="toggle-control" id="shelf-select-dropdown-{{ book.id }}-toggle">
-    <div class="dropdown-menu toggle-content hidden" id="shelf-select-{{ book.id }}" role="menu">
-        <ul class="dropdown-content">
-            {% for shelf in request.user.shelf_set.all %}
-            {% if shelf.identifier != current.identifier %}
-            <li role="menuitem">
-                <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
-                    {% 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>
-                </form>
-            </li>
-            {% endif %}
-            {% endfor %}
-            <hr class="navbar-divider">
-            <li>
-                <form class="dropdown-item pt-0 pb-0" name="shelve" action="/unshelve/" method="post">
-                    {% 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>
-                </form>
-            </li>
-        </ul>
-    </div>
-</div>
+{% extends 'snippets/components/dropdown.html' %}
+{% block dropdown-trigger %}
+<span>Change shelf</span>
+<span class="icon icon-arrow-down" aria-hidden="true"></span>
+{% endblock %}
+
+{% block dropdown-list %}
+{% for shelf in request.user.shelf_set.all %}
+{% if shelf.identifier != current.identifier %}
+<li role="menuitem">
+    <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
+        {% 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>
+    </form>
+</li>
+{% endif %}
+{% endfor %}
+<hr class="navbar-divider">
+<li>
+    <form class="dropdown-item pt-0 pb-0" name="shelve" action="/unshelve/" method="post">
+        {% 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>
+    </form>
+</li>
+{% endblock %}

bookwyrm/templates/snippets/shelve_button.html

@@ -27,7 +27,7 @@
         {% endif %}
     </div>
 
-    <div class="dropdown control">
+    <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">
@@ -35,8 +35,7 @@
                 </div>
             </label>
         </div>
-        <input type="checkbox" class="toggle-control" id="shelf-select-dropdown-{{ uuid }}-toggle">
-        <div class="dropdown-menu toggle-content hidden" id="shelf-select-{{ uuid }}" role="menu">
+        <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">

bookwyrm/templates/snippets/status_body.html

@@ -56,7 +56,7 @@
 </div>
 {% if status.user == request.user %}
 <div class="card-footer-item">
-    {% include 'snippets/toggle/toggle_button.html' with controls_text="more-info" controls_uid=status.id text="More options" icon="dots-three" class="is-small" %}
+    {% include 'snippets/status_options.html' with class="is-small" right=True %}
 </div>
 {% endif %}
 {% endblock %}
@@ -74,22 +74,4 @@
 </section>
 {% endwith %}
 {% endif %}
-
-{% if status.user == request.user %}
-<section>
-    <input class="toggle-control" type="checkbox" name="more-info-{{ status.id }}" id="more-info-{{ status.id }}">
-    <div class="toggle-content hidden card-footer">
-        {% if status.user == request.user %}
-        <div class="card-footer-item">
-            <form name="delete-{{status.id}}" action="/delete-status/{{ status.id }}" method="post">
-                {% csrf_token %}
-                <button class="button is-danger is-light" type="submit">
-                    Delete post
-                </button>
-            </form>
-        </div>
-        {% endif %}
-    </div>
-</section>
-{% endif %}
 {% endblock %}

bookwyrm/templates/snippets/status_options.html

@@ -0,0 +1,18 @@
+{% extends 'snippets/components/dropdown.html' %}
+
+{% block dropdown-trigger %}
+<span class="icon icon-dots-three">
+    <span class="is-sr-only">More options</span>
+</span>
+{% endblock %}
+
+{% block dropdown-list %}
+<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">
+            Delete post
+        </button>
+    </form>
+</li>
+{% endblock %}