helwasm: shrink result font to fit one line on narrow screens
fitResult() measures the result's natural single-line width and scales the font down (to an 11px floor) so a long password fits on one line on iPhone instead of wrapping; wraps only if even the floor can't fit. Re-fits on resize/rotate. Masking doesn't change width, so reveal is unaffected.
This commit is contained in:
+21
-1
@@ -294,6 +294,24 @@
|
|||||||
b.title = "In your catalog. Type the master to mark it correct.";
|
b.title = "In your catalog. Type the master to mark it correct.";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Shrink the result font just enough to keep it on one line on very narrow screens
|
||||||
|
// (iPhone) instead of wrapping. Falls back to wrapping only if even the floor size
|
||||||
|
// can't fit. Masking doesn't change width (mono disc = mono char), so reveal is safe.
|
||||||
|
function fitResult() {
|
||||||
|
const sec = $("#qsecret");
|
||||||
|
sec.style.fontSize = "";
|
||||||
|
if (!sec.textContent) return;
|
||||||
|
const avail = sec.clientWidth;
|
||||||
|
if (!avail) return;
|
||||||
|
const ws = sec.style.whiteSpace;
|
||||||
|
sec.style.whiteSpace = "nowrap";
|
||||||
|
const full = sec.scrollWidth;
|
||||||
|
sec.style.whiteSpace = ws;
|
||||||
|
if (full > avail) {
|
||||||
|
const base = parseFloat(getComputedStyle(sec).fontSize);
|
||||||
|
sec.style.fontSize = Math.max(11, Math.floor((base * avail) / full)) + "px";
|
||||||
|
}
|
||||||
|
}
|
||||||
function quickGen(silent) {
|
function quickGen(silent) {
|
||||||
const spec = $("#qname").value.trim();
|
const spec = $("#qname").value.trim();
|
||||||
const sec = $("#qsecret");
|
const sec = $("#qsecret");
|
||||||
@@ -303,7 +321,7 @@
|
|||||||
// (like `*P0 test1 …`) means the name is the next word. Parse it.
|
// (like `*P0 test1 …`) means the name is the next word. Parse it.
|
||||||
const name = spec ? hel_parse_name(spec) : "";
|
const name = spec ? hel_parse_name(spec) : "";
|
||||||
if (!name) {
|
if (!name) {
|
||||||
sec.textContent = ""; sec.classList.remove("correct");
|
sec.textContent = ""; sec.classList.remove("correct"); sec.style.fontSize = "";
|
||||||
lenEl.textContent = ""; lastSecret = "";
|
lenEl.textContent = ""; lastSecret = "";
|
||||||
refreshSaveBtn("", false, false);
|
refreshSaveBtn("", false, false);
|
||||||
return;
|
return;
|
||||||
@@ -334,6 +352,7 @@
|
|||||||
sec.textContent = pw;
|
sec.textContent = pw;
|
||||||
sec.classList.toggle("correct", correct);
|
sec.classList.toggle("correct", correct);
|
||||||
lenEl.textContent = pw ? "len " + pw.length : "";
|
lenEl.textContent = pw ? "len " + pw.length : "";
|
||||||
|
fitResult();
|
||||||
refreshSaveBtn(name, !!pw, correct);
|
refreshSaveBtn(name, !!pw, correct);
|
||||||
if (!pw && !silent) toast("No output");
|
if (!pw && !silent) toast("No output");
|
||||||
}
|
}
|
||||||
@@ -470,6 +489,7 @@
|
|||||||
};
|
};
|
||||||
$("#qname").addEventListener("input", live);
|
$("#qname").addEventListener("input", live);
|
||||||
$("#master").addEventListener("input", live);
|
$("#master").addEventListener("input", live);
|
||||||
|
window.addEventListener("resize", fitResult); // re-fit on rotate / width change
|
||||||
$("#qname").addEventListener("keydown", (e) => e.key === "Enter" && quickGen(false));
|
$("#qname").addEventListener("keydown", (e) => e.key === "Enter" && quickGen(false));
|
||||||
// On blur, rewrite the name field to the canonical form hel parsed it as
|
// On blur, rewrite the name field to the canonical form hel parsed it as
|
||||||
// (name + mode + seq + date + comment), so you see exactly what was used.
|
// (name + mode + seq + date + comment), so you see exactly what was used.
|
||||||
|
|||||||
Reference in New Issue
Block a user