mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-12-17 21:56:36 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse source 
Use html details instead of javascript menus
This commit is contained in:
Mouse Reeve 2021-12-04 17:03:36 -08:00 committed by GitHub
commit 660b2e48e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
bookwyrm/static/css/bookwyrm.css
View file

@ -115,6 +115,19 @@ input[type=file]::file-selector-button:hover {
color: #363636; 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 { summary::marker {
content: none; content: none;
} }

4
bookwyrm/static/js/status_cache.js
View file

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

17
bookwyrm/templates/components/dropdown.html
View file

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