diff --git a/src/editor/ReOrderComponents.js b/src/editor/ReOrderComponents.js index c2a25be..ef79bd2 100644 --- a/src/editor/ReOrderComponents.js +++ b/src/editor/ReOrderComponents.js @@ -22,9 +22,11 @@ const clickHandler = e => { ); if (subElements.length) { - document.getElementById(CURRENTLY_RE_ORDERING_ID)?.removeAttribute("id"); + Array.from( + document.getElementsByClassName(CURRENTLY_RE_ORDERING_ID) + ).forEach(el => el.classList.remove(CURRENTLY_RE_ORDERING_ID)); - target.setAttribute("id", CURRENTLY_RE_ORDERING_ID); + target.classList.add(CURRENTLY_RE_ORDERING_ID); target.prepend(document.getElementById(DROP_ZONE_ID)); flushEventListeners(); @@ -79,7 +81,9 @@ export default class ReOrderComponents extends Component { componentWillUnmount() { flushEventListeners(); - document.getElementById(CURRENTLY_RE_ORDERING_ID)?.removeAttribute("id"); + Array.from( + document.getElementsByClassName(CURRENTLY_RE_ORDERING_ID) + ).forEach(el => el.classList.remove(CURRENTLY_RE_ORDERING_ID)); document.getElementById(DROP_ZONE_ID).remove(); } diff --git a/src/editor/ReOrderComponents.scss b/src/editor/ReOrderComponents.scss index 4a7fcdf..41c6495 100644 --- a/src/editor/ReOrderComponents.scss +++ b/src/editor/ReOrderComponents.scss @@ -10,7 +10,7 @@ align-items: center; background-color: #fffa; - border: 3px dashed #000; + border: 1px dashed #000; pointer-events: auto; } @@ -35,13 +35,13 @@ } } -#re-order-elements-reordering { - outline: 5px solid blue; +.re-order-elements-reordering { + display: flex !important; + flex-direction: column; + gap: 0; > [data-type] { position: relative; - display: flex !important; - flex-direction: column; - outline: 1px dashed #000a; + margin: 0; min-height: 1rem; max-height: 12.5vh; overflow: hidden; @@ -88,9 +88,14 @@ } & > .to-be-deleted { + position: relative; &, & > input { background-color: red; } + &:hover::after { + @extend %maskForAction; + content: "Drop to delete"; + } } }