Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-14 23:12:28 +02:00
Code Issues Releases Wiki Activity

Fix slider's responsiveness to layout changes

Browse Source 
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;
pointer-events: auto;
position: relative;
width: 32%;
width: 40%;
}
.resultsetModifier > span {
align-items: center;
@ -136,12 +136,14 @@ html#ublock0-epicker,
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
display: inline-block;
flex-shrink: 0;
height: 6px;
}
.resultsetModifier > span > span:nth-of-type(2) {
background-color: var(--checkbox-checked-ink);
border-radius: 7px;
display: inline-block;
flex-shrink: 0;
height: 16px;
width: 16px;
}
@ -150,6 +152,7 @@ html#ublock0-epicker,
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
display: inline-block;
flex-grow: 1;
height: 4px;
}
.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 lside = slider.children[0];
const thumb = slider.children[1];
const rside = slider.children[2];
const thumbWidth = thumb.offsetWidth;
const sliderWidth = slider.offsetWidth - thumbWidth;
const x = value * sliderWidth / max;
lside.style.width = `${x}px`;
rside.style.width = `${sliderWidth - x}px`;
const sliderWidth = slider.offsetWidth;
const maxPercent = (sliderWidth - thumb.offsetWidth) / sliderWidth * 100;
const widthPercent = value / max * maxPercent;
lside.style.width = `${widthPercent}%`;
};
/******************************************************************************/