Port drop zone and style improvements from content

katalyst · Dec 15, 2023 · c21fb38 · c21fb38
1 parent 10d1767
commit c21fb38
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,12 +102,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);
+  }
 }
diff --git 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 = ["[email protected]"]