From 14e9b717661af157ab2c22de86ea1b7049da37a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 23 Jun 2021 18:10:11 +0200
Subject: [PATCH] Show score actions after their related content

"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".
---
 app/assets/stylesheets/layout.scss            |  7 +++++--
 app/views/relationable/_related_list.html.erb | 10 ++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 56223e06a..7189221bd 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2489,9 +2489,12 @@ table {
     padding: $line-height / 2;
 
     @include breakpoint(medium) {
+      display: flex;
+      justify-content: space-between;
 
-      .score-actions {
-        float: right;
+      > :first-child {
+        flex: 1;
+        margin-right: 1em;
       }
     }
 
diff --git a/app/views/relationable/_related_list.html.erb b/app/views/relationable/_related_list.html.erb
index 6f0441d96..f89274211 100644
--- a/app/views/relationable/_related_list.html.erb
+++ b/app/views/relationable/_related_list.html.erb
@@ -3,15 +3,17 @@
     <% 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 %>
-      <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>
     </li>
   <% end %>
 </ul>