diff options
-rw-r--r-- | src/_locales/en/messages.json | 2 | ||||
-rw-r--r-- | src/ui/ui.css | 20 | ||||
-rw-r--r-- | src/ui/ui.js | 37 |
3 files changed, 54 insertions, 5 deletions
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index ef26193..c970d13 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -435,7 +435,7 @@ "message": "U" }, "Untrusted": { - "message": "Untrusted" + "message": "Untrusted superca" }, "UntrustedPagesAdj": { "message": "untrusted" diff --git a/src/ui/ui.css b/src/ui/ui.css index 8f2b81f..901a4b1 100644 --- a/src/ui/ui.css +++ b/src/ui/ui.css @@ -197,7 +197,15 @@ input.preset:active, input.preset:focus, input.preset:hover { border-radius: .5em; } -.presets input.preset:checked, #presets input.preset { +#presets-sizer { + visibility: hidden; + width: 10px; + height: 1px; + overflow: hidden !important; + border: 1px solid red; +} + +.presets input.preset:checked, #presets input.preset, #presets-sizer input.preset { opacity: 1; transform: none; min-width: 9.38em; @@ -226,7 +234,6 @@ input.preset:active, input.preset:focus, input.preset:hover { left: 0em; padding-left: 2.5em; - transition: 0.2s all; } .presets input.preset[value^="T"] + label { @@ -235,10 +242,17 @@ input.preset:active, input.preset:focus, input.preset:hover { .presets input.preset:checked + label, #presets .presets label { opacity: 1; - width: 60%; + width: 80%; display: inline-block; } +#presets-sizer .presets label { + position: static; + display: block; + width: auto; + overflow: visible; +} + button.options { -moz-appearance: none; border: none; diff --git a/src/ui/ui.js b/src/ui/ui.js index 99943d7..927a712 100644 --- a/src/ui/ui.js +++ b/src/ui/ui.js @@ -187,7 +187,7 @@ var UI = (() => { initRow(table = this.table) { let row = table.querySelector("tr.site"); - + debug("initRow: ", new Error().stack); // PRESETS { let presets = row.querySelector(".presets"); @@ -212,7 +212,42 @@ var UI = (() => { clone.querySelector(".options").remove(); } presets.appendChild(clone); + } + + + if (!document.getElementById("presets-sizer")) { + // adapt button to label if needed + let sizer = table.cloneNode(true); + sizer.id = "presets-sizer"; + document.body.appendChild(sizer); + let presetWidth = sizer.querySelector("input.preset").offsetWidth; + let labelWidth = 0; + for (let l of sizer.querySelectorAll("label.preset")) { + let lw = l.offsetWidth; + debug("lw", lw); + if (lw > labelWidth) labelWidth = lw; + } + + debug(`Preset: %s Label: %s`, presetWidth, labelWidth); + labelWidth += 16; + if (presetWidth < labelWidth) { + for (let ss of document.styleSheets) { + if (ss.href.endsWith("/ui.css")) { + for (let r of ss.cssRules) { + if (/input\.preset:checked.*min-width:/.test(r.cssText)) { + r.style.minWidth = (labelWidth) + "px"; + break; + } + } + } + } + } + + sizer.style.visibility = "visible"; + // setTimeout( () => sizer.style.display = "none"); + } + } // URL |