Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix slider's responsiveness to layout changes 

Related commit:
- f01bda1159
This commit is contained in:
Raymond Hill 2020-09-12 08:26:44 -04:00
parent e2a22f5b77
commit b73b24ebb1
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/css/epicker-ui.css
View File

@ -122,7 +122,7 @@ html#ublock0-epicker,
border: 0; border: 0;
pointer-events: auto; pointer-events: auto;
position: relative; position: relative;
width: 32%; width: 40%;
} }
.resultsetModifier > span { .resultsetModifier > span {
align-items: center; align-items: center;
@ -136,12 +136,14 @@ html#ublock0-epicker,
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
display: inline-block; display: inline-block;
flex-shrink: 0;
height: 6px; height: 6px;
} }
.resultsetModifier > span > span:nth-of-type(2) { .resultsetModifier > span > span:nth-of-type(2) {
background-color: var(--checkbox-checked-ink); background-color: var(--checkbox-checked-ink);
border-radius: 7px; border-radius: 7px;
display: inline-block; display: inline-block;
flex-shrink: 0;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
@ -150,6 +152,7 @@ html#ublock0-epicker,
border-top-right-radius: 2px; border-top-right-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
display: inline-block; display: inline-block;
flex-grow: 1;
height: 4px; height: 4px;
} }
.resultsetModifier input { .resultsetModifier input {

10
src/js/epicker-ui.js
View File

@ -91,12 +91,10 @@ const renderRange = function(id, value, invert = false) {
const slider = $stor(`#${id} > span`); const slider = $stor(`#${id} > span`);
const lside = slider.children[0]; const lside = slider.children[0];
const thumb = slider.children[1]; const thumb = slider.children[1];
const rside = slider.children[2]; const sliderWidth = slider.offsetWidth;
const thumbWidth = thumb.offsetWidth; const maxPercent = (sliderWidth - thumb.offsetWidth) / sliderWidth * 100;
const sliderWidth = slider.offsetWidth - thumbWidth; const widthPercent = value / max * maxPercent;
const x = value * sliderWidth / max; lside.style.width = `${widthPercent}%`;
lside.style.width = `${x}px`;
rside.style.width = `${sliderWidth - x}px`;
}; };
/******************************************************************************/ /******************************************************************************/