nakarte

commit 664e199dee5a0ae515a2a36bcc76e28ce83543da
parent 456db3ab932622496d4ead219e3cd26cc621cb90
Author: Sergey Orlov <wladimirych@gmail.com>
Date:   Wed,  6 May 2020 17:10:53 +0200

panoramas: add invisible border around splitter bar to simplify pointing with mouse

Related to #16

Diffstat:
M
src/lib/leaflet.control.panoramas/index.js
 | 
1
+
M
src/lib/leaflet.control.panoramas/style.css
 | 
18
++++++++++++++++++

2 files changed, 19 insertions(+), 0 deletions(-)
diff --git a/src/lib/leaflet.control.panoramas/index.js b/src/lib/leaflet.control.panoramas/index.js
@@ -124,6 +124,7 @@ L.Control.Panoramas = L.Control.extend({
 
             this._splitterDragging = false;
             const splitter = L.DomUtil.create('div', 'panorama-splitter', this._panoramasContainer);
+            L.DomUtil.create('div', 'splitter-border', splitter);
             const splitterButton = L.DomUtil.create('div', 'button', splitter);
             new DragEvents(splitter, null, {trackOutsideElement: true}).on({
                 dragstart: this.onSplitterDragStart,
diff --git a/src/lib/leaflet.control.panoramas/style.css b/src/lib/leaflet.control.panoramas/style.css
@@ -52,6 +52,24 @@
     margin-top: -9px;
 }
 
+.splitter-border {
+    position: absolute;
+    opacity: 0;
+    z-index: 20000;
+}
+
+.split-vertical .splitter-border {
+    width: 20px;
+    margin-left: -9px;
+    height: 100%;
+}
+
+.split-horizontal .splitter-border {
+    height: 20px;
+    margin-top: -9px;
+    width: 100%;
+}
+
 .icon-panoramas {
     background-image: url('panoramas-off.png');
     background-size: 17px 17px !important;