add sliding/click listener to slider-bar div

2 files changed, 13 insertions, 6 deletions

diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 7849c9976..810a824cf 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -1,4 +1,5 @@
-.comparisonBox-interactive, .comparisonBox {
+.comparisonBox-interactive,
+.comparisonBox {
     border-radius: inherit;
     width: 100%;
     height: 100%;
@@ -19,13 +20,13 @@
         }
     }
 
-    .slide-bar { 
+    .slide-bar {
         position: absolute;
         height: 100%;
         width: 3px;
         display: inline-block;
         background: white;
-        cursor: ew-resize;
+
         .slide-handle {
             position: absolute;
             display: none;
@@ -33,7 +34,9 @@
             width: 30px;
             bottom: 0px;
             left: -10.5px;
-            .left-handle, .right-handle{
+
+            .left-handle,
+            .right-handle {
                 width: 15px;
             }
         }
@@ -77,10 +80,13 @@
         }
     }
 }
+
 .comparisonBox-interactive {
     pointer-events: unset;
+    cursor: ew-resize;
+
     .slide-bar {
-        .slide-handle { 
+        .slide-handle {
             display: flex;
         }
     }
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 47bd7e9ca..cce60628d 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -105,7 +105,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                     {displayBox("before", 0, 5)}
                 </div>
 
-                <div className="slide-bar" style={{ left: `calc(${clipWidth} - 0.5px)` }}>
+                <div className="slide-bar" style={{ left: `calc(${clipWidth} - 0.5px)` }}
+                    onPointerDown={e => this.registerSliding(e, this.props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */ >
                     <div className="slide-handle" />
                 </div>
             </div >);