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

Improved preset sizing.

This commit is contained in:
hackademix 2022-04-16 00:03:17 +02:00
parent 9fa75580ce
commit 463b55cafa
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/ui/ui.css
View File

@ -328,17 +328,17 @@ span.preset {
width: 5000px; width: 5000px;
height: 500px; height: 500px;
top: -5000px; top: -5000px;
} }
#presets-sizer span.preset { #presets-sizer span.preset {
display: block; display: block;
} }
.presets input.preset:checked, #presets input.preset, #presets-sizer input.preset { .presets input.preset:checked, #presets input.preset, #presets-sizer input.preset {
opacity: 1; opacity: 1;
transform: none; transform: none;
min-width: calc(var(--preset-label-width) + var(--line-size) + var(--extra-preset-width)); min-width: calc(var(--preset-label-width) + var(--line-size) * 1.5 + var(--extra-preset-width));
} }
.presets input.preset:focus { .presets input.preset:focus {
@ -362,7 +362,7 @@ span.preset {
padding: .05em 0.4em .05em 0; padding: .05em 0.4em .05em 0;
--line-scaled: var(--line-size); --line-scaled: var(--line-size);
line-height: var(--line-scaled); line-height: var(--line-scaled);
padding-left: calc(var(--line-scaled) * 1.5); padding-left: calc(var(--line-scaled) * 1.4);
} }
.presets input.preset[value^="T"] + label { .presets input.preset[value^="T"] + label {
@ -372,7 +372,7 @@ span.preset {
.presets input.preset:checked + label, #presets .presets label { .presets input.preset:checked + label, #presets .presets label {
opacity: 1; opacity: 1;
display: inline-flex; display: inline-flex;
width: 75%; width: var(--preset-label-width);
background-color: var(--form-color2); background-color: var(--form-color2);
border-radius: 1em 1em 0 0; border-radius: 1em 1em 0 0;
} }
@ -391,10 +391,11 @@ span.preset {
} }
#presets-sizer .presets label { #presets-sizer .presets label {
position: static; position: absolute;
display: block; display: inline;
width: auto; width: auto;
overflow: visible; overflow: visible;
padding: 0;
} }
input.preset[value="T_TRUSTED"] { input.preset[value="T_TRUSTED"] {

17
src/ui/ui.js
View File

@ -418,7 +418,7 @@ var UI = (() => {
presets.appendChild(clone); presets.appendChild(clone);
} }
UI.Sites.correctSize(presets); this.correctSize(presets);
} }
// URL // URL
@ -450,21 +450,26 @@ var UI = (() => {
return row; return row;
} }
static correctSize(presets) { correctSize(presets) {
if (this.sizeCorrected) return;
this.sizeCorrected = true;
// adapt button to label if needed // adapt button to label if needed
let sizer = document.createElement("div"); let sizer = document.createElement("div");
sizer.id = "presets-sizer"; sizer.id = "presets-sizer";
sizer.classList.add("sites");
sizer.appendChild(presets.cloneNode(true)); sizer.appendChild(presets.cloneNode(true));
document.body.appendChild(sizer); document.body.appendChild(sizer);
let presetWidth = sizer.querySelector("input.preset").offsetWidth;
let labelWidth = 0; let labelWidth = 0;
let biggest = "";
for (let l of sizer.querySelectorAll("label.preset")) { for (let l of sizer.querySelectorAll("label.preset")) {
let lw = l.offsetWidth; let lw = l.offsetWidth;
if (lw > labelWidth) labelWidth = lw; if (lw > labelWidth) {
labelWidth = lw;
biggest = l.textContent;
} }
document.documentElement.style.setProperty("--preset-label-width", (labelWidth) + "px"); }
this.parentNode.style.setProperty("--preset-label-width", (labelWidth) + "px");
sizer.remove(); sizer.remove();
UI.Sites.correctSize = () => {}; // just once, please!
} }
allSiteRows() { allSiteRows() {