merged & fixed some interaction issues with comparisonBox

1 files changed, 69 insertions, 58 deletions

diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index b874f96b6..44965cf28 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -1,79 +1,90 @@
-.comparisonBox {
-    pointer-events: all;
+.comparisonBox-interactive, .comparisonBox {
     border-radius: inherit;
     width: 100%;
     height: 100%;
     background-color: grey;
+    position: absolute;
+    z-index: 0;
+    pointer-events: none;
 
-    .content-wrapper {
+    .clip-div {
         position: absolute;
-        bottom: 0;
-        width: 100%;
-        height: calc(100% - 15px);
+        top: 0;
+        left: 0;
+        height: 100%;
+        overflow: hidden;
 
-        .clip-div {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 50%;
+        .beforeBox-cont {
             height: 100%;
             overflow: hidden;
-            z-index: 999;
-
-            .beforeBox-cont {
-                height: 100%;
-                overflow: hidden;
-                background-color: rgb(240, 240, 240);
-            }
-
-            .slide-bar {
-                position: absolute;
-                width: 5px;
-                height: 100%;
-                top: 0;
-                right: 0;
-                background-color: grey;
-                cursor: ew-resize;
-            }
+            background-color: rgb(240, 240, 240);
         }
+    }
 
-        .afterBox-cont {
+    .slide-bar { 
+        position: absolute;
+        height: 100%;
+        width: 10px;
+        display: inline-block;
+        background: gray;
+        cursor: ew-resize;
+        .slide-handle {
             position: absolute;
-            top: 0;
-            right: 0;
-            height: 100%;
-            width: 100%;
-            overflow: hidden;
-            background-color: lightgray;
+            display: none;
+            height: 20px;
+            width: 30px;
+            bottom: 0px;
+            left: -6px;
+            .left-handle, .right-handle{
+                width: 15px;
+            }
         }
+    }
 
-        .clear-button {
-            position: absolute;
-            top: 3px;
-            opacity: 0.8;
-            pointer-events: all;
-            cursor: pointer;
-        }
+    .afterBox-cont {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+        background-color: lightgray;
+    }
 
-        .clear-button.before {
-            left: 3px;
-        }
+    .clear-button {
+        position: absolute;
+        top: 3px;
+        opacity: 0.8;
+        pointer-events: all;
+        cursor: pointer;
+    }
 
-        .clear-button.after {
-            right: 3px;
-        }
+    .clear-button.before {
+        left: 3px;
+    }
 
-        .placeholder {
-            width: 50%;
-            height: 50%;
-            margin-top: 25%;
-            margin-left: 25%;
+    .clear-button.after {
+        right: 3px;
+    }
 
-            .upload-icon {
-                width: 100%;
-                height: 100%;
-                opacity: 0.5;
-            }
+    .placeholder {
+        width: 50%;
+        height: 50%;
+        margin-top: 25%;
+        margin-left: 25%;
+
+        .upload-icon {
+            width: 100%;
+            height: 100%;
+            opacity: 0.5;
+        }
+    }
+}
+.comparisonBox-interactive {
+    pointer-events: unset;
+    .slide-bar {
+        .slide-handle { 
+            display: flex;
         }
     }
 }
\ No newline at end of file