Merge pull request #1649 from bookwyrm-social/detail-menus

Use html details instead of javascript menus

bookwyrm/static/css/bookwyrm.css

@@ -115,6 +115,19 @@ input[type=file]::file-selector-button:hover {
     color: #363636;
 }
 
+details .dropdown-menu {
+    display: block !important;
+}
+
+details.dropdown[open] summary.dropdown-trigger::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
 summary::marker {
     content: none;
 }

bookwyrm/static/js/status_cache.js

@@ -210,10 +210,10 @@ let StatusCache = new class {
             .forEach(item => BookWyrm.addRemoveClass(item, "is-hidden", true));
 
         // Close menu
-        let menu = button.querySelector(".dropdown-trigger[aria-expanded=true]");
+        let menu = button.querySelector("details[open]");
 
         if (menu) {
-            menu.click();
+            menu.removeAttribute("open");
         }
     }
 

bookwyrm/templates/components/dropdown.html

@@ -2,25 +2,20 @@
 {% load utilities %}
 
 {% with 0|uuid as uuid %}
-<div
+<details
     id="menu_{{ uuid }}"
     class="
         dropdown control
         {% if right %}is-right{% endif %}
     "
 >
-    <button
-        class="button dropdown-trigger pulldown-menu {{ class }}"
-        type="button"
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-controls="menu_options_{{ uuid }}"
-        data-controls="menu_{{ uuid }}"
+    <summary
+        class="button control dropdown-trigger pulldown-menu {{ class }}"
     >
         {% block dropdown-trigger %}{% endblock %}
-    </button>
+    </summary>
 
-    <div class="dropdown-menu">
+    <div class="dropdown-menu control">
         <ul
             id="menu_options_{{ uuid }}"
             class="dropdown-content p-0 is-clipped"
@@ -29,6 +24,6 @@
             {% block dropdown-list %}{% endblock %}
         </ul>
     </div>
-</div>
+</details>
 {% endwith %}
 {% endspaceless %}