Increase drop zone size for content items

katalyst · Dec 5, 2023 · 97bc919 · 97bc919
1 parent 0cede4a
commit 97bc919
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/app/assets/stylesheets/katalyst/content/editor/_index.scss b/app/assets/stylesheets/katalyst/content/editor/_index.scss
@@ -58,7 +58,7 @@ $status-dirty-color: #aaa !default;
 }
 
 [data-controller="content--editor--list"] {
-  min-height: var(--row-height);
+  min-height: calc(var(--row-height) * 8);
 
   // tree items
   & > li {

diff --git a/app/assets/stylesheets/katalyst/content/editor/_new-items.scss b/app/assets/stylesheets/katalyst/content/editor/_new-items.scss
@@ -7,7 +7,7 @@
 
 .content--editor--new-items {
   display: grid;
-  grid-template-columns: repeat(3, calc((100% - 1rem)/3));
+  grid-template-columns: repeat(3, calc((100% - 1rem) / 3));
   grid-auto-rows: minmax(5rem, auto);
   gap: 0.5rem;
 

diff --git a/app/javascript/content/editor/list_controller.js b/app/javascript/content/editor/list_controller.js
@@ -82,7 +82,10 @@ export default class ListController extends Controller {
   }
 
   dropTarget(e) {
-    return e && e.closest("[data-controller='content--editor--list'] > *");
+    return (
+      e.closest("[data-controller='content--editor--list'] > *") ||
+      e.closest("[data-controller='content--editor--list']")
+    );
   }
 
   reindex() {
@@ -95,12 +98,19 @@ export default class ListController extends Controller {
 }
 
 function swap(target, item) {
-  if (target && target !== item) {
+  if (!target) return;
+  if (target === item) return;
+
+  if (target.nodeName === "LI") {
     const positionComparison = target.compareDocumentPosition(item);
     if (positionComparison & Node.DOCUMENT_POSITION_FOLLOWING) {
       target.insertAdjacentElement("beforebegin", item);
     } else if (positionComparison & Node.DOCUMENT_POSITION_PRECEDING) {
       target.insertAdjacentElement("afterend", item);
     }
   }
+
+  if (target.nodeName === "OL") {
+    target.appendChild(item);
+  }
 }