mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-11-29 21:11:16 +00:00
Code Issues Projects Releases Wiki Activity

refactors re-shelve button dropdown to be accessible

Browse source 
still looks janky as heck, but fixes #350
This commit is contained in:
Mouse Reeve 2020-11-16 16:34:26 -08:00
parent 699a661f00
commit 680211cff5
2 changed files with 12 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bookwyrm/templates/snippets/shelf_selector.html
View file

@ -12,7 +12,7 @@
<ul class="dropdown-content"> <ul class="dropdown-content">
{% for shelf in request.user.shelf_set.all %} {% for shelf in request.user.shelf_set.all %}
{% if shelf.identifier != current.identifier %} {% if shelf.identifier != current.identifier %}
<li> <li role="menuitem">
<form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post"> <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="book" value="{{ book.id }}"> <input type="hidden" name="book" value="{{ book.id }}">

24
bookwyrm/templates/snippets/shelve_button.html
View file

@ -1,9 +1,8 @@
{% load fr_display %} {% load fr_display %}
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
{% active_shelf book as active_shelf %} {% with book.id|uuid as uuid %}
<div class="field is-grouped"> <div class="field is-grouped">
{% with book.id|uuid as uuid %}
{% if active_shelf.identifier == 'read' %} {% if active_shelf.identifier == 'read' %}
<button class="button is-small" disabled> <button class="button is-small" disabled>
<span>Read</span> <span class="icon icon-check"></span> <span>Read</span> <span class="icon icon-check"></span>
@ -26,20 +25,20 @@
<button class="button is-small" type="submit">Want to read</button> <button class="button is-small" type="submit">Want to read</button>
</form> </form>
{% endif %} {% endif %}
{% endwith %}
<div class="dropdown is-hoverable"> <div class="dropdown">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu-{{ uuid }}"> <label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
<span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span> <div class="button is-small">
</button> <span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span>
</div>
</label>
</div> </div>
<input type="checkbox" class="toggle-control" id="shelf-select-dropdown-{{ uuid }}-toggle">
{% with book.id|uuid as uuid %} <div class="dropdown-menu toggle-content hidden" id="shelf-select-{{ uuid }}" role="menu">
<div class="dropdown-menu" id="dropdown-menu-{{ uuid }}" role="menu">
<ul class="dropdown-content"> <ul class="dropdown-content">
{% for shelf in request.user.shelf_set.all %} {% for shelf in request.user.shelf_set.all %}
<li> <li role="menuitem">
{% if shelf.identifier == 'to-read' %} {% if shelf.identifier == 'to-read' %}
<div class="dropdown-item pt-0 pb-0"> <div class="dropdown-item pt-0 pb-0">
<label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0"> <label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0">
@ -61,8 +60,7 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
{% endwith %}
</div> </div>
</div> </div>
{% endwith %}
{% endif %} {% endif %}