Use html details instead of javascript menus

This commit is contained in:
Mouse Reeve 2021-12-04 09:48:55 -08:00
parent 41fbfb627e
commit 5b27952b34
2 changed files with 10 additions and 11 deletions

View file

@ -115,6 +115,10 @@ input[type=file]::file-selector-button:hover {
color: #363636; color: #363636;
} }
details[open] .dropdown-menu {
display: block !important;
}
/** Shelving /** Shelving
******************************************************************************/ ******************************************************************************/

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 %}