Update drag and drop interaction to only highlight when dragging

[#176451547] Co-authored-by: Mike Rotondo <mrotondo@codeforamerica.org>
codeforamerica · Feb 10, 2021 · 995ae48 · 995ae48
1 parent a8576b2
commit 995ae48
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/src/main/resources/static/shiba.css b/src/main/resources/static/shiba.css
@@ -252,23 +252,32 @@ html {
         box-sizing: border-box;
     }
 
-    .drag-and-drop-box:hover {
-        border: 5px solid #FFAE00;
+    .drag-over {
+        box-shadow: 0 0 0 5px #FFAE00;
         box-sizing: border-box;
         border-radius: 8px;
+
+        border: 2px solid #F7F5F4
+    }
+
+    .drag-and-drop-box:hover {
         cursor: pointer;
     }
 
     .drag-and-drop-box h2 {
         user-select: none;
     }
 
-    .drag-and-drop-box:hover .hide-on-mobile  {
-        margin-top: -3px;
-    }
+    /*.drag-and-drop-box:hover .hide-on-mobile  {*/
+    /*    margin-top: -3px;*/
+    /*}*/
+
+    /*.drag-and-drop-box:hover .needsclick {*/
+    /*    margin-bottom: -3px;*/
+    /*}*/
 
-    .drag-and-drop-box:hover .needsclick {
-        margin-bottom: -3px;
+    .drag-and-drop-box * {
+        pointer-events: none;
     }
 }
 

diff --git a/src/main/resources/templates/uploadDocuments.html b/src/main/resources/templates/uploadDocuments.html
@@ -14,7 +14,7 @@ <h1 class="h2 text--centered" th:text="#{upload-documents.title}"></h1>
                     <div id="dropzone">
                         <form action="/file-upload" class="dropzone needsclick" id="document-upload" method="post"
                               enctype="multipart/form-data">
-                            <div class="drag-and-drop-box spacing-below-35 spacing-above-35">
+                            <div id="drag-and-drop-box" class="drag-and-drop-box spacing-below-35 spacing-above-35" ondragenter="addDragBorder(event)" ondrop="removeDragBorder(event)" ondragleave="removeDragBorder(event)">
                                 <h2 class="blue-label text--centered hide-on-mobile narrow-centered-text"
                                     th:text="#{upload-documents.drag-and-drop-or-add-your-files}"></h2>
                                 <h2 class="blue-label text--centered hide-on-desktop"
@@ -71,6 +71,17 @@ <h3 class="h4" th:text="#{upload-documents.proof-of-income}"></h3>
     Dropzone.autoDiscover = false;
     const previewNode = document.querySelector("#file-preview-template");
 
+    function addDragBorder(event) {
+        let dragAndDropBox = document.getElementById("drag-and-drop-box");
+        dragAndDropBox.classList.add("drag-over");
+    }
+
+    function removeDragBorder(event) {
+        let dragAndDropBox = document.getElementById("drag-and-drop-box");
+        dragAndDropBox.classList.remove("drag-over");
+    }
+
+
     $("#document-upload").dropzone({
         previewContainer: "#file-preview",
         previewTemplate: "#file-preview-template",