ReOrderComponents: fix style

aduh95 · Aug 10, 2019 · a8641b7 · a8641b7
1 parent e6b91a2
commit a8641b7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git 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
@@ -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";
+    }
   }
 }