Fix: Reset-SVG per appendChild, Satz-Zeile als kompaktes 5-Spalten-Grid
Image bauen und in die Registry schieben / build (push) Successful in 6s
Image bauen und in die Registry schieben / build (push) Successful in 6s
- Reset-Icon korrekt eingefuegt (war '[object HTMLSpanElement]' weil das SVG-Element als Text-Argument an el() ging) - Satz-Zeile: display:grid mit auto 1fr 1fr auto auto, kg/reps-Inputs flexibel (1fr, min-width 0), Buttons als kleine Icons (26px) - passt komplett auf ein Handy-Display ohne horizontales Scrollen - Label zurueck auf 'Set n' (klarer als 'S1') - Tests: 169 Checks gruen (39+18+52+32+28)
This commit is contained in:
1 parent
6d57200032
commit
f93d88abd3
3 files changed
+9
-10
No files matched your search
@@ -910,7 +910,7 @@ function buildSetRow(a, model, ex, entry, i) {
|
|||||||
chk.type = "button";
|
chk.type = "button";
|
||||||
chk.setAttribute("aria-pressed", entry.done ? "true" : "false");
|
chk.setAttribute("aria-pressed", entry.done ? "true" : "false");
|
||||||
chk.setAttribute("aria-label", t("set_done_aria", { n: i + 1 }));
|
chk.setAttribute("aria-label", t("set_done_aria", { n: i + 1 }));
|
||||||
chk.appendChild(el("span", "set-check-label", "S"));
|
chk.appendChild(el("span", "set-check-label", "Set"));
|
||||||
chk.appendChild(el("span", "set-check-num", String(i + 1)));
|
chk.appendChild(el("span", "set-check-num", String(i + 1)));
|
||||||
chk.appendChild(el("span", "set-check-box", entry.done ? "✓" : ""));
|
chk.appendChild(el("span", "set-check-box", entry.done ? "✓" : ""));
|
||||||
chk.addEventListener("click", () => toggleSetDone(a, model, ex.key, i, chk));
|
chk.addEventListener("click", () => toggleSetDone(a, model, ex.key, i, chk));
|
||||||
@@ -932,9 +932,10 @@ function buildSetRow(a, model, ex, entry, i) {
|
|||||||
entry.wInput = wBox.querySelector("input");
|
entry.wInput = wBox.querySelector("input");
|
||||||
entry.rInput = rBox.querySelector("input");
|
entry.rInput = rBox.querySelector("input");
|
||||||
|
|
||||||
const reset = el("button", "icon-btn", resetSvg());
|
const reset = el("button", "icon-btn", "");
|
||||||
reset.type = "button";
|
reset.type = "button";
|
||||||
reset.setAttribute("aria-label", t("reset_set_title"));
|
reset.setAttribute("aria-label", t("reset_set_title"));
|
||||||
|
reset.appendChild(resetSvg());
|
||||||
reset.addEventListener("click", () => resetSet(a, model, ex.key, i, entry));
|
reset.addEventListener("click", () => resetSet(a, model, ex.key, i, entry));
|
||||||
row.appendChild(reset);
|
row.appendChild(reset);
|
||||||
|
|
||||||
|
|||||||
+5
-7
@@ -251,16 +251,15 @@ h3 { font-size: 15px; font-weight: 700; }
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 28px;
|
width: 26px;
|
||||||
height: 28px;
|
height: 26px;
|
||||||
border: 2px solid var(--border);
|
border: 2px solid var(--border);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font: inherit;
|
font: inherit;
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-btn:hover { border-color: var(--border-hover); color: var(--text); background: var(--bg-hover); }
|
.icon-btn:hover { border-color: var(--border-hover); color: var(--text); background: var(--bg-hover); }
|
||||||
@@ -438,9 +437,8 @@ h3 { font-size: 15px; font-weight: 700; }
|
|||||||
.set-rows { padding: 0; }
|
.set-rows { padding: 0; }
|
||||||
|
|
||||||
.set-row {
|
.set-row {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-wrap: nowrap;
|
grid-template-columns: auto 1fr 1fr auto auto;
|
||||||
width: 100%;
|
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
|
|||||||
+1
-1
@@ -122,7 +122,7 @@ async function main() {
|
|||||||
const firstBlock = () => gymCard().querySelector(".ex-block");
|
const firstBlock = () => gymCard().querySelector(".ex-block");
|
||||||
const chk1 = () => firstBlock().querySelectorAll(".set-check")[0];
|
const chk1 = () => firstBlock().querySelectorAll(".set-check")[0];
|
||||||
check("Set-Button mit Label 'Set' + Box",
|
check("Set-Button mit Label 'Set' + Box",
|
||||||
chk1().querySelector(".set-check-label").textContent === "S"
|
chk1().querySelector(".set-check-label").textContent === "Set"
|
||||||
&& !!chk1().querySelector(".set-check-box"));
|
&& !!chk1().querySelector(".set-check-box"));
|
||||||
check("Set-Button: Box leer (nicht abgehakt)", chk1().querySelector(".set-check-box").textContent === "");
|
check("Set-Button: Box leer (nicht abgehakt)", chk1().querySelector(".set-check-box").textContent === "");
|
||||||
firstBlock().querySelectorAll(".set-check")[2].click();
|
firstBlock().querySelectorAll(".set-check")[2].click();
|
||||||
|
|||||||
Reference in new issue
Block a user