mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-12-22 16:16:39 +00:00
Fix toggling all checkboxes of failed imports:
- Rename classes and function to something more descriptive. - Listen to the element checked status instead of a click on a non‑focusable element. - Use specific DOM targets instead of relying on the DOM ancestor tree. - Add a skip‑link to the end of the list and avoid tabbing through all failed items. - Update related i18n strings in French. - Avoid having the label on the whole width to prevent accidental click. - Move `fieldset` out of `ul`.
This commit is contained in:
parent
71e3fbcebf
commit
097b8e5811
5 changed files with 98 additions and 27 deletions
|
@ -156,3 +156,35 @@
|
|||
content: "\e905";
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessibility (a11y)
|
||||
============================================================================ */
|
||||
|
||||
/**
|
||||
* Skip links
|
||||
*
|
||||
* @see https://webaim.org/styles/main.css
|
||||
---------------------------------------------------------------------------- */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
padding: 6px;
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
background: #BF1722;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
opacity: 1;
|
||||
outline-color: transparent;
|
||||
transition: opacity .1s ease-in;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.skip-link {
|
||||
transition-duration: 0.001ms !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,9 +8,12 @@ window.onload = function() {
|
|||
Array.from(document.getElementsByClassName('interaction'))
|
||||
.forEach(t => t.onsubmit = interact);
|
||||
|
||||
// select all
|
||||
Array.from(document.getElementsByClassName('select-all'))
|
||||
.forEach(t => t.onclick = selectAll);
|
||||
// Toggle all checkboxes.
|
||||
document
|
||||
.querySelectorAll('[data-action="toggle-all"]')
|
||||
.forEach(input => {
|
||||
input.addEventListener('change', toggleAllCheckboxes);
|
||||
});
|
||||
|
||||
// tab groups
|
||||
Array.from(document.getElementsByClassName('tab-group'))
|
||||
|
@ -136,9 +139,20 @@ function interact(e) {
|
|||
.forEach(t => addRemoveClass(t, 'hidden', t.className.indexOf('hidden') == -1));
|
||||
}
|
||||
|
||||
function selectAll(e) {
|
||||
e.target.parentElement.parentElement.querySelectorAll('[type="checkbox"]')
|
||||
.forEach(t => t.checked=true);
|
||||
/**
|
||||
* Toggle all descendant checkboxes of a target.
|
||||
*
|
||||
* Use `data-target="ID_OF_TARGET"` on the node being listened to.
|
||||
*
|
||||
* @param {Event} event - change Event
|
||||
* @return {undefined}
|
||||
*/
|
||||
function toggleAllCheckboxes(event) {
|
||||
const mainCheckbox = event.target;
|
||||
|
||||
document
|
||||
.querySelectorAll(`#${mainCheckbox.dataset.target} [type="checkbox"]`)
|
||||
.forEach(checkbox => {checkbox.checked = mainCheckbox.checked;});
|
||||
}
|
||||
|
||||
function toggleMenu(e) {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
{% block title %}{% trans "Import Status" %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% block content %}{% spaceless %}
|
||||
<div class="block">
|
||||
<h1 class="title">{% trans "Import Status" %}</h1>
|
||||
|
||||
|
@ -36,8 +36,15 @@
|
|||
{% if not job.retry %}
|
||||
<form name="retry" action="/import/{{ job.id }}" method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
{% with failed_count=failed_items|length %}
|
||||
<a class="skip-link" href="#select-all-failed-imports">
|
||||
{% blocktrans %}Jump to the bottom of the list to select the {{ failed_count }} items which failed to import.{% endblocktrans %}
|
||||
</a>
|
||||
{% endwith %}
|
||||
|
||||
<fieldset id="failed-imports">
|
||||
<ul>
|
||||
<fieldset>
|
||||
{% for item in failed_items %}
|
||||
<li class="pb-1">
|
||||
<input class="checkbox" type="checkbox" name="import_item" value="{{ item.id }}" id="import-item-{{ item.id }}">
|
||||
|
@ -51,15 +58,28 @@
|
|||
</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</fieldset>
|
||||
</ul>
|
||||
<div class="block pt-1 select-all">
|
||||
<label class="label">
|
||||
<input type="checkbox" class="checkbox">
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="mt-3">
|
||||
<a name="select-all-failed-imports"></a>
|
||||
|
||||
<label class="label is-inline mb-1">
|
||||
<input
|
||||
id="toggle-all-checkboxes-failed-imports"
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
data-action="toggle-all"
|
||||
data-target="failed-imports"
|
||||
/>
|
||||
{% trans "Select all" %}
|
||||
</label>
|
||||
</div>
|
||||
<button class="button" type="submit">{% trans "Retry items" %}</button>
|
||||
|
||||
<button class="button is-block" type="submit">{% trans "Retry items" %}</button>
|
||||
</fieldset>
|
||||
|
||||
<hr>
|
||||
|
||||
{% else %}
|
||||
<ul>
|
||||
{% for item in failed_items %}
|
||||
|
@ -123,4 +143,4 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endspaceless %}{% endblock %}
|
||||
|
|
Binary file not shown.
|
@ -8,7 +8,7 @@ msgid ""
|
|||
msgstr ""
|
||||
"Project-Id-Version: 0.1.1\n"
|
||||
"Report-Msgid-Bugs-To: \n"
|
||||
"POT-Creation-Date: 2021-03-04 22:24+0000\n"
|
||||
"POT-Creation-Date: 2021-03-05 14:10+0000\n"
|
||||
"PO-Revision-Date: 2021-03-02 12:37+0100\n"
|
||||
"Last-Translator: Fabien Basmaison <contact@arkhi.org>\n"
|
||||
"Language-Team: Mouse Reeve <LL@li.org>\n"
|
||||
|
@ -613,37 +613,42 @@ msgstr "(Rechargez la page pour mettre à jour !"
|
|||
|
||||
#: bookwyrm/templates/import_status.html:35
|
||||
msgid "Failed to load"
|
||||
msgstr "Le chargement a échoué"
|
||||
msgstr "Items non importés"
|
||||
|
||||
#: bookwyrm/templates/import_status.html:59
|
||||
#: bookwyrm/templates/import_status.html:42
|
||||
#, python-format
|
||||
msgid "Jump to the bottom of the list to select the %(failed_count)s items which failed to import."
|
||||
msgstr "Sauter en bas de liste pour sélectionner les %(failed_count)s items n’ayant pu être importés."
|
||||
|
||||
#: bookwyrm/templates/import_status.html:74
|
||||
msgid "Select all"
|
||||
msgstr "Tout sélectionner"
|
||||
|
||||
#: bookwyrm/templates/import_status.html:62
|
||||
#: bookwyrm/templates/import_status.html:79
|
||||
msgid "Retry items"
|
||||
msgstr "Essayer d’importer les objets sélectionnés de nouveau"
|
||||
msgstr "Essayer d’importer les items sélectionnés de nouveau"
|
||||
|
||||
#: bookwyrm/templates/import_status.html:84
|
||||
#: bookwyrm/templates/import_status.html:101
|
||||
msgid "Successfully imported"
|
||||
msgstr "Importation réussie"
|
||||
|
||||
#: bookwyrm/templates/import_status.html:88
|
||||
#: bookwyrm/templates/import_status.html:105
|
||||
#: bookwyrm/templates/lists/curate.html:14
|
||||
msgid "Book"
|
||||
msgstr "Livre"
|
||||
|
||||
#: bookwyrm/templates/import_status.html:91
|
||||
#: bookwyrm/templates/import_status.html:108
|
||||
#: bookwyrm/templates/snippets/create_status_form.html:10
|
||||
#: bookwyrm/templates/snippets/shelf.html:10
|
||||
msgid "Title"
|
||||
msgstr "Titre"
|
||||
|
||||
#: bookwyrm/templates/import_status.html:94
|
||||
#: bookwyrm/templates/import_status.html:111
|
||||
#: bookwyrm/templates/snippets/shelf.html:11
|
||||
msgid "Author"
|
||||
msgstr "Auteur ou autrice"
|
||||
|
||||
#: bookwyrm/templates/import_status.html:117
|
||||
#: bookwyrm/templates/import_status.html:134
|
||||
msgid "Imported"
|
||||
msgstr "Importé"
|
||||
|
||||
|
|
Loading…
Reference in a new issue