Improved preset sizing.
This commit is contained in:
parent
9fa75580ce
commit
463b55cafa
|
@ -328,17 +328,17 @@ span.preset {
|
|||
width: 5000px;
|
||||
height: 500px;
|
||||
top: -5000px;
|
||||
|
||||
}
|
||||
|
||||
#presets-sizer span.preset {
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.presets input.preset:checked, #presets input.preset, #presets-sizer input.preset {
|
||||
opacity: 1;
|
||||
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 {
|
||||
|
@ -362,7 +362,7 @@ span.preset {
|
|||
padding: .05em 0.4em .05em 0;
|
||||
--line-scaled: var(--line-size);
|
||||
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 {
|
||||
|
@ -372,7 +372,7 @@ span.preset {
|
|||
.presets input.preset:checked + label, #presets .presets label {
|
||||
opacity: 1;
|
||||
display: inline-flex;
|
||||
width: 75%;
|
||||
width: var(--preset-label-width);
|
||||
background-color: var(--form-color2);
|
||||
border-radius: 1em 1em 0 0;
|
||||
}
|
||||
|
@ -391,10 +391,11 @@ span.preset {
|
|||
}
|
||||
|
||||
#presets-sizer .presets label {
|
||||
position: static;
|
||||
display: block;
|
||||
position: absolute;
|
||||
display: inline;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input.preset[value="T_TRUSTED"] {
|
||||
|
|
17
src/ui/ui.js
17
src/ui/ui.js
|
@ -418,7 +418,7 @@ var UI = (() => {
|
|||
presets.appendChild(clone);
|
||||
}
|
||||
|
||||
UI.Sites.correctSize(presets);
|
||||
this.correctSize(presets);
|
||||
}
|
||||
|
||||
// URL
|
||||
|
@ -450,21 +450,26 @@ var UI = (() => {
|
|||
return row;
|
||||
}
|
||||
|
||||
static correctSize(presets) {
|
||||
correctSize(presets) {
|
||||
if (this.sizeCorrected) return;
|
||||
this.sizeCorrected = true;
|
||||
// adapt button to label if needed
|
||||
let sizer = document.createElement("div");
|
||||
sizer.id = "presets-sizer";
|
||||
sizer.classList.add("sites");
|
||||
sizer.appendChild(presets.cloneNode(true));
|
||||
document.body.appendChild(sizer);
|
||||
let presetWidth = sizer.querySelector("input.preset").offsetWidth;
|
||||
let labelWidth = 0;
|
||||
let biggest = "";
|
||||
for (let l of sizer.querySelectorAll("label.preset")) {
|
||||
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();
|
||||
UI.Sites.correctSize = () => {}; // just once, please!
|
||||
}
|
||||
|
||||
allSiteRows() {
|
||||
|
|
Loading…
Reference in New Issue