UX: Make bulk select checkbox easier to target (#13517)

Adds a label element around the checkbox, so that user can more easily
hit the element. Quite useful when checking many items in topic list.
This commit is contained in:
Penar Musaraj 2021-06-24 11:46:26 -04:00 committed by GitHub
parent 180c0c4dc3
commit cb9e004121
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 4 deletions

View File

@ -2,7 +2,9 @@
{{#if bulkSelectEnabled}} {{#if bulkSelectEnabled}}
<td class="bulk-select"> <td class="bulk-select">
<input type="checkbox" class="bulk-select"> <label for="bulk-select-{{topic.id}}">
<input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
</label>
</td> </td>
{{/if}} {{/if}}

View File

@ -46,8 +46,13 @@
} }
td.bulk-select { td.bulk-select {
padding: 10px; padding: 0;
width: 30px; width: 30px;
label {
margin: 0px;
padding: 12px 10px 16px 10px;
cursor: pointer;
}
+ .main-link { + .main-link {
padding-left: 0; padding-left: 0;
} }