From 34898463769241088d8b2de08564df525e4255d6 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Wed, 27 May 2020 15:46:32 +0300 Subject: [PATCH] Fixed #298 - Slider handle moves on click --- public/themes/luna-amber/theme.css | 6 ++++-- public/themes/luna-green/theme.css | 6 ++++-- public/themes/luna-pink/theme.css | 6 ++++-- public/themes/nova-accent/theme.css | 6 ++++-- public/themes/nova-alt/theme.css | 6 ++++-- public/themes/nova-vue/theme.css | 6 ++++-- public/themes/nova/theme.css | 6 ++++-- public/themes/rhea/theme.css | 6 ++++-- public/themes/saga-blue/theme.css | 6 ++++-- public/themes/saga-cyan/theme.css | 6 ++++-- public/themes/saga-deeppurple/theme.css | 6 ++++-- public/themes/saga-green/theme.css | 6 ++++-- public/themes/saga-indigo/theme.css | 6 ++++-- public/themes/saga-orange/theme.css | 6 ++++-- public/themes/saga-purple/theme.css | 6 ++++-- public/themes/saga-teal/theme.css | 6 ++++-- public/themes/vela-blue/theme.css | 6 ++++-- public/themes/vela-cyan/theme.css | 6 ++++-- public/themes/vela-deeppurple/theme.css | 6 ++++-- public/themes/vela-green/theme.css | 6 ++++-- public/themes/vela-indigo/theme.css | 6 ++++-- public/themes/vela-orange/theme.css | 6 ++++-- public/themes/vela-purple/theme.css | 6 ++++-- public/themes/vela-teal/theme.css | 6 ++++-- src/components/slider/Slider.vue | 12 ++++++++++-- 25 files changed, 106 insertions(+), 50 deletions(-) diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index be1464ad3..2eebc2039 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 10a834905..fea7ca3ad 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index bfec04097..6e8174c13 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index b5cb92afa..508878cd8 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 8079145fe..14d2b3524 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index ac5ddd8f0..f02f2bfa7 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 8575d704f..d17158d9c 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index cc3d1ec52..2404962b4 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.5715rem; + margin-top: -0.7145rem; + margin-left: -0.7145rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.5715rem; + margin-left: -0.7145rem; + margin-bottom: -0.7145rem; } .p-slider .p-slider-handle { height: 1.429rem; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 6c7f09bd5..e0fb4015f 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css index cff7eb64b..32f998f05 100644 --- a/public/themes/saga-cyan/theme.css +++ b/public/themes/saga-cyan/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css index ce1f85d0e..a0dab308c 100644 --- a/public/themes/saga-deeppurple/theme.css +++ b/public/themes/saga-deeppurple/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 715193e0b..c140d12b0 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css index f38d653c0..9c1b79fa5 100644 --- a/public/themes/saga-indigo/theme.css +++ b/public/themes/saga-indigo/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 43ca22126..2275ed1fa 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index ed4b9bf88..71cb0e542 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css index 33025f29f..fc05c4a16 100644 --- a/public/themes/saga-teal/theme.css +++ b/public/themes/saga-teal/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 3881d0bf1..f4e313637 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css index 93d5bed09..d63e067ce 100644 --- a/public/themes/vela-cyan/theme.css +++ b/public/themes/vela-cyan/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css index 13dbcf637..ced8f698a 100644 --- a/public/themes/vela-deeppurple/theme.css +++ b/public/themes/vela-deeppurple/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 914318dae..5cee688ba 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css index 61f0f0039..c765bea65 100644 --- a/public/themes/vela-indigo/theme.css +++ b/public/themes/vela-indigo/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index dbacb5268..212284b01 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 3d7205b19..6cbc23f1c 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css index 668ff2935..539c47c28 100644 --- a/public/themes/vela-teal/theme.css +++ b/public/themes/vela-teal/theme.css @@ -983,13 +983,15 @@ height: 0.286rem; } .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.4285rem; + margin-top: -0.5715rem; + margin-left: -0.5715rem; } .p-slider.p-slider-vertical { width: 0.286rem; } .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.4285rem; + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; } .p-slider .p-slider-handle { height: 1.143rem; diff --git a/src/components/slider/Slider.vue b/src/components/slider/Slider.vue index 16da6a033..e3056b223 100755 --- a/src/components/slider/Slider.vue +++ b/src/components/slider/Slider.vue @@ -344,13 +344,13 @@ export default { .p-slider .p-slider-handle { position: absolute; cursor: default; - touch-action: none; + touch-action: none; + display: block; } .p-slider-range { position: absolute; display: block; - } .p-slider-horizontal .p-slider-range { @@ -359,10 +359,18 @@ export default { height: 100%; } +.p-slider-horizontal .p-slider-handle { + top: 50%; +} + .p-slider-vertical { height: 100px; } +.p-slider-vertical .p-slider-handle { + left: 50%; +} + .p-slider-vertical .p-slider-range { bottom: 0; left: 0;