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}}
<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>
{{/if}}
@ -23,8 +25,8 @@
{{~topic-featured-link topic}}
{{~/if}}
{{~raw-plugin-outlet name="topic-list-after-title"}}
{{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
topicId=topic.id
{{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
topicId=topic.id
unreadClass=unreadClass~}}
{{~#if showTopicPostBadges}}
{{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}

View File

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