14e9b71766
"Is it related content? Yes (link) No (link)". After reading that, you probably haven't decided whether to click the "Yes" link or the "No" link or neither of them. You probably have to read the content it's related to, and then go back to these links. That's the reason we style them so they're on the right of the screen on languages which are read from left to right, so first we read the content and then we read the links to mark it as related or unrelated. So it makes sense to put these links after the content they refer to. This way users with small screens as well as screen reader users will also see/hear these links after they get the proper context. It will also be more intuitive for keyboard users, who saw the focus on the links before focusing on the title of the related content, when they probably expected the opposite. Since we're now using a flexbox layout instead of a right float, this also means the content will automatically be shown on the left when switching the content direction to "right to left".
22 lines
869 B
Plaintext
22 lines
869 B
Plaintext
<ul class="related-content-list" id="related-content-list">
|
|
<% @related_contents.compact.each do |related| %>
|
|
<% related_content = related.find_related_content(relationable) %>
|
|
|
|
<li id="related-content-<%= related_content.id %>">
|
|
<div>
|
|
<span class="related-content-title"><%= t("related_content.content_title.#{related.model_name.singular}") %></span><br>
|
|
<h3 class="inline-block">
|
|
<%= link_to related.title, related.url %>
|
|
</h3>
|
|
</div>
|
|
<% if current_user && related_content.author != current_user && !related_content.scored_by_user?(current_user) %>
|
|
<span id="<%= dom_id(related_content) %>" class="js-score-actions score-actions">
|
|
<%= render "relationable/score", related: related_content %>
|
|
</span>
|
|
<% end %>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
|
|
<%= paginate @related_contents %>
|