github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-27 00:13:37 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

7
app/assets/stylesheets/desktop/topic-list.scss
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;
} }