d5e197e6ea
Ine464e69I removed href='#' but I noticed that it broke some things. Readding href serves two purposes: - it makes links reachable with Tab key - it makes links clickable with Enter key The alternative to this approach was to introduce [tabindex] and [role] attributes. But not only using tabindex=0 with <a/> is questionable, it'd require adding a keyboard handler that'd intercept space and return key presses and simulated link clicks. Since it's best to leave this kind of thing to the native UI, I went with readding hrefs instead. I believe that hash hrefs, even though being a common practice, are silly, so I decided to settle down with empty hrefs. As a bonus, I added a snippet that prevents middle mouse clicks from opening such links/buttons in new tabs, which was the motivation fore464e69.
47 lines
2.2 KiB
Smarty
47 lines
2.2 KiB
Smarty
<div class='post-list'>
|
|
<% if (ctx.results.length) { %>
|
|
<ul>
|
|
<% for (let post of ctx.results) { %>
|
|
<li>
|
|
<% if (ctx.canViewPosts) { %>
|
|
<a class='thumbnail-wrapper' href='<%= ctx.getPostUrl(post.id, ctx.parameters) %>' title='@<%- post.id %> (<%- post.type %>) Tags: <%- post.tags.map(tag => '#' + tag).join(' ') %>'>
|
|
<% } else { %>
|
|
<a class='thumbnail-wrapper'>
|
|
<% } %>
|
|
<%= ctx.makeThumbnail(post.thumbnailUrl) %>
|
|
<span class='type' data-type='<%- post.type %>'>
|
|
<%- post.type %>
|
|
</span>
|
|
<% if (post.score || post.favoriteCount || post.commentCount) { %>
|
|
<span class='stats'>
|
|
<% if (post.score) { %>
|
|
<span class='icon'>
|
|
<i class='fa fa-star'></i>
|
|
<%- post.score %>
|
|
</span>
|
|
<% } %>
|
|
<% if (post.favoriteCount) { %>
|
|
<span class='icon'>
|
|
<i class='fa fa-heart'></i>
|
|
<%- post.favoriteCount %>
|
|
</span>
|
|
<% } %>
|
|
<% if (post.commentCount) { %>
|
|
<span class='icon'>
|
|
<i class='fa fa-commenting'></i>
|
|
<%- post.commentCount %>
|
|
</span>
|
|
<% } %>
|
|
</span>
|
|
<% } %>
|
|
</a>
|
|
<% if (ctx.parameters && ctx.parameters.tag) { %>
|
|
<a href data-post-id='<%= post.id %>' class='masstag'>
|
|
</a>
|
|
<% } %>
|
|
</li>
|
|
<% } %>
|
|
<%= ctx.makeFlexboxAlign() %>
|
|
</ul>
|
|
<% } %>
|
|
</div>
|