From 9e3f9374040c7d1bf4bcb8403c6f601595ce5efb Mon Sep 17 00:00:00 2001
From: Stewart Allen <stewart@neuron.com>
Date: Mon, 15 Jun 2020 12:07:16 -0400
Subject: [PATCH] increase slider handle size

---
 src/kiri/init.js   | 18 ++++++++++--------
 web/kiri/index.css |  6 +++---
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/kiri/init.js b/src/kiri/init.js
index 9b4b72cb..050b2965 100644
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@@ -1489,6 +1489,8 @@
         });
 
         // slider setup
+        const slbar = 30;
+        const slbar2 = slbar * 2;
         const slider = UI.sliderRange;
         const drag = { };
 
@@ -1498,7 +1500,7 @@
 
         function sliderUpdate() {
             let start = drag.top / drag.maxval;
-            let end = (drag.top + drag.mid - 20) / drag.maxval;
+            let end = (drag.top + drag.mid - slbar) / drag.maxval;
             API.event.emit('slider.pos', { start, end });
             API.var.layer_hi = Math.round((1 - start) * API.var.layer_max);
             API.var.layer_lo = Math.round((1 - end) * API.var.layer_max);
@@ -1511,12 +1513,12 @@
                 tracker.style.display = 'block';
                 ev.stopPropagation();
                 drag.height = slider.clientHeight;
-                drag.maxval = drag.height - 40;
+                drag.maxval = drag.height - slbar2;
                 drag.start = ev.screenY;
                 drag.hiat = drag.top = pxToInt(UI.sliderHold.style.marginTop);
                 drag.mdat = drag.mid = UI.sliderMid.clientHeight;
-                drag.mdmax = drag.height - 20 - drag.hiat;
-                drag.himax = drag.height - 20 - drag.mdat;
+                drag.mdmax = drag.height - slbar - drag.hiat;
+                drag.himax = drag.height - slbar - drag.mdat;
                 let cancel_drag = tracker.onmouseup = (ev) => {
                     if (ev) {
                         ev.stopPropagation();
@@ -1539,7 +1541,7 @@
         dragit(UI.sliderHi, (delta) => {
             let midval = drag.mdat - delta;
             let topval = drag.hiat + delta;
-            if (midval < 20 || topval < 0) {
+            if (midval < slbar || topval < 0) {
                 return;
             }
             UI.sliderHold.style.marginTop = `${topval}px`;
@@ -1555,7 +1557,7 @@
             sliderUpdate();
         });
         dragit(UI.sliderLo, (delta) => {
-            let midlen = Math.max(20, Math.min(drag.mdmax, drag.mdat + delta));
+            let midlen = Math.max(slbar, Math.min(drag.mdmax, drag.mdat + delta));
             UI.sliderMid.style.height = `${midlen}px`;
             drag.mid = midlen;
             sliderUpdate();
@@ -1591,11 +1593,11 @@
 
         API.event.on('slider.set', (values) => {
             let height = slider.clientHeight;
-            let maxval = height - 40;
+            let maxval = height - slbar2;
             let start = Math.max(0, Math.min(1, values.start));
             let end = Math.max(start, Math.min(1, values.end));
             let topval = start * maxval;
-            let midval = ((end - start) * maxval) + 20;
+            let midval = ((end - start) * maxval) + slbar;
             UI.sliderHold.style.marginTop = `${topval}px`;
             UI.sliderMid.style.height = `${midval}px`;
         });
diff --git a/web/kiri/index.css b/web/kiri/index.css
index 38703a16..ea24046a 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -768,9 +768,9 @@ and (orientation : landscape) {
     display: none;
     position: absolute;
     font-size: smaller;
-    top: 10px;
+    top: 15px;
     right: 3px;
-    bottom: 10px;
+    bottom: 15px;
     width: 50px;
 }
 #slider-hi-val, #slider-lo-val {
@@ -813,7 +813,7 @@ and (orientation : landscape) {
 }
 #slider-hold .handle {
     width: 100%;
-    height: 10px;
+    height: 15px;
     border-radius: 3px;
     background-color: var(--bg-gray);
 }