diff --git a/app/assets/stylesheets/katalyst/content/editor/_index.scss b/app/assets/stylesheets/katalyst/content/editor/_index.scss index 662d51e..e2cd612 100644 --- 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 index 6c2ed21..89ad955 100644 --- 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 index 826c85b..a654864 100644 --- 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,7 +98,10 @@ 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); @@ -103,4 +109,8 @@ function swap(target, item) { target.insertAdjacentElement("afterend", item); } } + + if (target.nodeName === "OL") { + target.appendChild(item); + } }