Move help card between pane/sidebar depending on sidebar visibility

diff --git a/app/assets/javascripts/richtext.js b/app/assets/javascripts/richtext.js
index cb0bd1f27188469e794e2b52cf38c5332efc0244..1383a34dff7a4a67d6804cc1e4ae4f70fddab4f9 100644 (file)
--- a/app/assets/javascripts/richtext.js
+++ b/app/assets/javascripts/richtext.js
@@ -32,4 +32,18 @@ $(document).ready(function () {
 
     preview.css("min-height", minHeight + "px");
   });
+
+  var updateHelp = function () {
+    $(".richtext_container .richtext_help_sidebar:not(:visible):not(:empty)").each(function () {
+      var container = $(this).closest(".richtext_container");
+      $(this).children().appendTo(container.find(".tab-pane[id$='_help']"));
+    });
+    $(".richtext_container .richtext_help_sidebar:visible:empty").each(function () {
+      var container = $(this).closest(".richtext_container");
+      container.find(".tab-pane[id$='_help']").children().appendTo($(this));
+    });
+  };
+
+  updateHelp();
+  $(window).on("resize", updateHelp);
 });

diff --git a/app/views/shared/_richtext_field.html.erb b/app/views/shared/_richtext_field.html.erb
index c3ad9e3befcc6167d8e7d502dac16eb089a0d66c..5b84fd6ed889bce1d774cdbb746082a946b8056a 100644 (file)
--- a/app/views/shared/_richtext_field.html.erb
+++ b/app/views/shared/_richtext_field.html.erb
@@ -6,7 +6,7 @@
     <li class="nav-item">
       <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#<%= id %>_preview"><%= t(".preview") %></button>
     </li>
-    <li class="nav-item">
+    <li class="nav-item d-block d-sm-none">
       <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#<%= id %>_help"><%= t(".help") %></button>
     </li>
   </ul>
@@ -24,6 +24,6 @@
         </div>
       </div>
     </div>
-    <aside class="col-sm-4 d-none d-sm-block"></aside>
+    <aside class="col-sm-4 d-none d-sm-block richtext_help_sidebar"></aside>
   </div>
 </div>