diff --git a/Gemfile.lock b/Gemfile.lock index 94184c9..11a0da3 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - katalyst-navigation (1.5.0) + katalyst-navigation (1.5.1) katalyst-html-attributes katalyst-kpop katalyst-tables diff --git a/app/assets/stylesheets/katalyst/navigation/editor/_index.scss b/app/assets/stylesheets/katalyst/navigation/editor/_index.scss index 5632967..f402452 100644 --- a/app/assets/stylesheets/katalyst/navigation/editor/_index.scss +++ b/app/assets/stylesheets/katalyst/navigation/editor/_index.scss @@ -55,7 +55,7 @@ $status-dirty-color: #aaa !default; } [data-controller="navigation--editor--list"] { - min-height: var(--row-height); + min-height: calc(var(--row-height) * 8); // tree items & > li { @@ -111,7 +111,7 @@ $status-dirty-color: #aaa !default; [data-controller="navigation--editor--menu"] [role="rowheader"], [data-controller="navigation--editor--item"] { display: grid; - grid-template-columns: 40% 2fr auto; + grid-template-columns: minmax(10rem, calc(100% - 12rem)) 1fr 10rem; padding: 0.25rem 0.5rem; gap: 1rem; align-items: center; diff --git a/app/assets/stylesheets/katalyst/navigation/editor/_new-items.scss b/app/assets/stylesheets/katalyst/navigation/editor/_new-items.scss index aa8406e..4ea5b15 100644 --- a/app/assets/stylesheets/katalyst/navigation/editor/_new-items.scss +++ b/app/assets/stylesheets/katalyst/navigation/editor/_new-items.scss @@ -2,30 +2,40 @@ .navigation--editor--new-items { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, calc((100% - 1rem) / 3)); + grid-auto-rows: minmax(5rem, auto); gap: 0.5rem; [role="listitem"] { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + display: grid; + grid-template-rows: 1fr auto; + text-align: center; transform: translate3d(0, 0, 0); cursor: grab; background: white; - box-shadow: rgb(0 0 0 / 25%) 0 1px 1px, rgb(0 0 0 / 31%) 0 0 2px; - min-height: 5rem; - padding: 1.5rem; + padding: 0.5rem; + white-space: nowrap; + border-radius: 0.5rem; + + label { + font-weight: 400; + font-size: 0.8rem; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 0; + } &:hover { box-shadow: rgb(0 0 0 / 25%) 0 1px 2px, rgb(0 0 0 / 31%) 0 0 5px; } &::before { + display: block; @extend %icon; - width: 2.5rem; - height: 2.5rem; + width: 2rem; + height: 2rem; position: unset; + margin: 0 auto; } &[data-item-type="heading"]:before { @@ -41,3 +51,15 @@ } } } + +@media (max-width: 75rem) { + .navigation--editor--new-items { + grid-template-columns: repeat(2, calc((100% - 0.5rem) / 2)); + } +} + +@media (max-width: 60rem) { + .navigation--editor--new-items { + grid-template-columns: 1fr; + } +} diff --git a/app/javascript/navigation/editor/list_controller.js b/app/javascript/navigation/editor/list_controller.js index bed5967..a84a364 100644 --- a/app/javascript/navigation/editor/list_controller.js +++ b/app/javascript/navigation/editor/list_controller.js @@ -86,7 +86,10 @@ export default class ListController extends Controller { } dropTarget(e) { - return e && e.closest("[data-controller='navigation--editor--list'] > *"); + return ( + e.closest("[data-controller='navigation--editor--list'] > *") || + e.closest("[data-controller='navigation--editor--list']") + ); } reindex() { @@ -99,7 +102,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); @@ -107,4 +113,8 @@ function swap(target, item) { target.insertAdjacentElement("afterend", item); } } + + if (target.nodeName === "OL") { + target.appendChild(item); + } } diff --git a/katalyst-navigation.gemspec b/katalyst-navigation.gemspec index 6a75586..6c45103 100644 --- a/katalyst-navigation.gemspec +++ b/katalyst-navigation.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "katalyst-navigation" - spec.version = "1.5.0" + spec.version = "1.5.1" spec.authors = ["Katalyst Interactive"] spec.email = ["developers@katalyst.com.au"]