From 089fe3cd1fc9c4796b5ce344b7916daf56ebb0d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 22 Jun 2021 20:54:58 +0200
Subject: [PATCH] Put button to add content next to its related form

This way the relationship between the two elements is more obvious. And
since now the button and the form are siblings, it's easier to find one
based on the other using CSS or JavaScript.
---
 app/assets/stylesheets/layout.scss               |  1 +
 app/views/relationable/_form.html.erb            |  4 ++++
 app/views/relationable/_related_content.html.erb | 13 +++----------
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index f6bbaeacd..0db486257 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2462,6 +2462,7 @@ table {
 
 .add-related-content {
   display: block;
+  margin-bottom: $line-height;
 
   @include breakpoint(medium) {
     float: right;
diff --git a/app/views/relationable/_form.html.erb b/app/views/relationable/_form.html.erb
index acab65165..03ad8f5a4 100644
--- a/app/views/relationable/_form.html.erb
+++ b/app/views/relationable/_form.html.erb
@@ -1,3 +1,7 @@
+<button type="button" data-toggle="related_content" class="add-related-content">
+  <%= t("related_content.add") %>
+</button>
+
 <%= form_tag related_contents_path, method: :post, id: "related_content", class: "hide", "data-toggler": ".hide" do %>
     <label><%= t("related_content.label") %></label>
 
diff --git a/app/views/relationable/_related_content.html.erb b/app/views/relationable/_related_content.html.erb
index 96353b754..fde55b475 100644
--- a/app/views/relationable/_related_content.html.erb
+++ b/app/views/relationable/_related_content.html.erb
@@ -1,15 +1,8 @@
 <div class="related-content padding">
 
-  <div class="margin-bottom">
-    <h2 class="inline-block">
-      <%= t("related_content.title") %>&nbsp;<span>(<%= relationable.relationed_contents.count %>)</span>
-    </h2>
-    <% if current_user %>
-      <button type="button" data-toggle="related_content" class="add-related-content">
-        <%= t("related_content.add") %>
-      </button>
-    <% end %>
-  </div>
+  <h2 class="inline-block">
+    <%= t("related_content.title") %>&nbsp;<span>(<%= relationable.relationed_contents.count %>)</span>
+  </h2>
 
   <% if current_user %>
     <%= render "relationable/form", relationable: relationable %>