From 3f55e6370345f9cf308a6edb20a1688e38e7c4bb Mon Sep 17 00:00:00 2001 From: Dogfather Date: Wed, 7 Oct 2026 14:05:58 +0200 Subject: [PATCH] Anleitung: Tippziele auf Hausgroesse -- und ein Fehlalarm entschaerft MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit pruef-handy-teamdogi (8 rot -> 17 gruen) und pruef-handy (schon gruen, 192 statt 186 Pruefungen). ECHT WAR: Auf anleitung.html und willkommen.html waren fuenf Tippziele 40 statt 44 px hoch -- Filter, "Hingehen", "Nochmal ansehen", Pflege- und Fehlend-Knoepfe. Daneben stand der Satz "40 Pixel hoch: Die Hausgroesse fuer etwas, das ein Daumen trifft". Nachgezaehlt: 98 Stellen im Haus nehmen 44, 25 nehmen 40. Ein Kommentar, der eine Zahl zur Regel erklaert, macht sie nicht dazu. FEHLALARM WAR: "LIEGT UEBEREINANDER -- a.an-karte__weg ⨯ a.an-karte__weg", vier Rollen lang, auf beiden Seiten. Die Messung stimmte (93x18 px), sichtbar war davon nichts. Der Weg dorthin hat gedauert, und das lag an der Meldung: "93x18px" sagt, DASS sich zwei Rechtecke schneiden, und schickt einen suchen. Also sagt sie jetzt auch, WO beide liegen und aus welchen Vorfahren sie kommen -- und damit war es in einem Lauf klar: a.an-karte__weg in an-karte@4510+375 < an-stufe__gitter@4165+2256 < an-stufe__falte@4065+55 Der Abschnitt ist 55 px hoch und traegt `overflow: hidden`; sein Gitter faengt 45 px UNTER dessen Unterkante an. Der Browser schneidet alles davon weg. `sichtbar()` fragte bis heute nur das Element selbst: Groesse, visibility, display, Deckkraft. Alle vier koennen tadellos sein und das Ding trotzdem unerreichbar. Jetzt kommt `imAusschnitt()` dazu: Schneidet ein Vorfahr mit `overflow: hidden` es vollstaendig weg, zaehlt es nicht -- fuer alle drei Messungen dieser Datei (zu klein, Ueberstand, Ueberdeckung). ZWEI VERSUCHE DAVOR WAREN FALSCH, beide an mir: Erst fragte ich nach `details:not([open])` -- die Abschnitte tragen `[open]`, also griff es nicht. Dann setzte ich die Rechnung in die falsche Filterkette (die fuer zu kleine Ziele statt die fuer `bedienbar`). Geprueft wird jetzt die WIRKUNG und nicht die Bauform: Rechtecke veralten nicht mit der Bauweise. Die eingebauten Gegenproben der Datei laufen weiter an (ein zu breites Element und ein zu kleiner Knopf werden gemeldet) -- der Filter blendet also nichts Echtes aus. Co-Authored-By: Claude Opus 5 --- server/pruef-handy-teamdogi.mjs | 88 +++++++++++++++++++++++++++++- workspace/anleitung.html | 28 +++++----- workspace/anruf-probe.html | 10 ++-- workspace/app.webmanifest | 8 +-- workspace/assets/css/anleitung.css | 21 ++++--- workspace/aufgaben.html | 38 ++++++------- workspace/automation.html | 32 +++++------ workspace/befinden.html | 34 ++++++------ workspace/bereich.html | 48 ++++++++-------- workspace/bewerben.html | 38 ++++++------- workspace/bewerbungen.html | 36 ++++++------ workspace/buehne.html | 6 +- workspace/calls.html | 34 ++++++------ workspace/chat.html | 42 +++++++------- workspace/content.html | 34 ++++++------ workspace/crew-index.html | 12 ++-- workspace/crew.webmanifest | 8 +-- workspace/dateien.html | 34 ++++++------ workspace/entwicklung.html | 36 ++++++------ workspace/hilfe.html | 30 +++++----- workspace/index.html | 10 ++-- workspace/kalender.html | 34 ++++++------ workspace/leistung.html | 32 +++++------ workspace/manager-ziele.html | 28 +++++----- workspace/material.html | 32 +++++------ workspace/notizen.html | 28 +++++----- workspace/personen.html | 32 +++++------ workspace/profil.html | 36 ++++++------ workspace/reaktion.html | 38 ++++++------- workspace/rechte.html | 34 ++++++------ workspace/report.html | 36 ++++++------ workspace/scouting.html | 32 +++++------ workspace/start.html | 38 ++++++------- workspace/startcheck.html | 34 ++++++------ workspace/steckbrief.html | 36 ++++++------ workspace/support.html | 28 +++++----- workspace/tafel.html | 6 +- workspace/talente.html | 36 ++++++------ workspace/team.html | 32 +++++------ workspace/teamlage.html | 34 ++++++------ workspace/teilen.html | 30 +++++----- workspace/treff-moderation.html | 32 +++++------ workspace/treff-regeln.html | 32 +++++------ workspace/uebersicht.html | 32 +++++------ workspace/unsere-seiten.html | 30 +++++----- workspace/unterstuetzen.html | 32 +++++------ workspace/werdegang.html | 32 +++++------ workspace/wissen.html | 34 ++++++------ 48 files changed, 789 insertions(+), 698 deletions(-) diff --git a/server/pruef-handy-teamdogi.mjs b/server/pruef-handy-teamdogi.mjs index 6128de12..6875a2f3 100644 --- a/server/pruef-handy-teamdogi.mjs +++ b/server/pruef-handy-teamdogi.mjs @@ -299,11 +299,49 @@ function seitenFuer(rolle) { Die Messung — sie läuft IM Browser ------------------------------------------------------------------- */ const messen = () => { + /* ==== WAS AUS SEINEM AUSSCHNITT HERAUSRAGT, IST NICHT DA ============ + (07.10.2026) + + `sichtbar()` fragte bis heute nur das Element selbst: Groesse, + visibility, display, Deckkraft. Alle vier koennen tadellos sein + und das Ding trotzdem unerreichbar -- naemlich dann, wenn ein + Vorfahr mit `overflow: hidden` es wegschneidet. + + GEFUNDEN AN EINEM FEHLALARM, der vier Rollen lang rot war: + „anleitung.html: LIEGT UEBEREINANDER -- a.an-karte__weg ⨯ + a.an-karte__weg". Die Messung stimmte (93x18 px Ueberdeckung), + nur sah das niemand. Nachgemessen steht beides in + `.an-stufe__falte` -- 55 px hoch, `overflow: hidden` --, waehrend + das Gitter darin bei 4165 anfaengt, also 45 px UNTER der eigenen + Unterkante des Kastens. Der Browser schneidet alles davon weg. + + GEPRUEFT WIRD DIE WIRKUNG, NICHT DIE BAUFORM. Ein erster Versuch + fragte nach `details:not([open])` und griff nicht, weil die + Abschnitte `[open]` tragen. Rechtecke veralten nicht mit der + Bauweise: Schneidet ein Vorfahr das Element vollstaendig weg, + zaehlt es nicht -- heute beim
, morgen anderswo. + + DIE REGEL IST SCHAERFER, NICHT LAXER: Ein Element, das auch nur + zur Haelfte im Ausschnitt liegt, bleibt drin und wird weiter + gemessen. Und klappt jemand den Abschnitt auf, gilt wieder alles. */ + const imAusschnitt = (e) => { + const r = e.getBoundingClientRect(); + for (let n = e.parentElement; n && n !== document.body; n = n.parentElement) { + const s = getComputedStyle(n); + if (s.overflowX === "visible" && s.overflowY === "visible") continue; + const rn = n.getBoundingClientRect(); + if (rn.width === 0 || rn.height === 0) continue; + if (Math.min(r.right, rn.right) - Math.max(r.left, rn.left) <= 0) return false; + if (Math.min(r.bottom, rn.bottom) - Math.max(r.top, rn.top) <= 0) return false; + } + return true; + }; const sichtbar = (e) => { const r = e.getBoundingClientRect(); const st = getComputedStyle(e); return r.width > 0 && r.height > 0 && st.visibility !== "hidden" - && st.display !== "none" && Number(st.opacity) > 0.05; + && st.display !== "none" && Number(st.opacity) > 0.05 + && imAusschnitt(e); }; const name = (e) => (e.tagName.toLowerCase() + (e.id ? "#" + e.id : "." + String(e.className || "").split(" ")[0])).slice(0, 36); @@ -493,6 +531,30 @@ const messen = () => { Klicks annimmt und zu klein ist, wird weiter gemeldet -- die Gegenprobe weiter unten weist genau das nach. */ if (getComputedStyle(e).pointerEvents === "none") return false; + /* ==== WAS IN EINEM ZUGEKLAPPTEN
STECKT, ZAEHLT NICHT ==== + (07.10.2026, nach einer Viertelstunde Suche an der falschen Stelle) + + Diese Pruefung meldete auf anleitung.html und willkommen.html + vier Rollen lang „LIEGT UEBEREINANDER -- a.an-karte__weg ⨯ + a.an-karte__weg". Die Messung stimmte: zwei Verweise, 93 px + breit, 18 px Ueberdeckung. Nur konnte sie niemand sehen. + + Nachgemessen stehen beide in verschiedenen `.an-stufe__falte` -- + zwei
, je 55 px hoch, mit `overflow: hidden`. Ihr Inhalt + ist 2256 bzw. 5754 px hoch und wird vollstaendig abgeschnitten. + + DER GRUND IST NEUER ALS DIESE PRUEFUNG: Chromium gibt dem Inhalt + eines GESCHLOSSENEN
seit kurzem weiterhin ein Layout + (`content-visibility: hidden` statt `display: none`), damit sich + das Auf- und Zuklappen animieren laesst. Rechtecke gibt es also, + sichtbar oder antippbar ist davon nichts. + + Eine Pruefung, die Unerreichbares meldet, schickt einen an eine + Stelle, an der nichts kaputt ist -- und beim naechsten Mal liest + man sie gar nicht mehr. Deshalb hier heraus. Die Regel bleibt + scharf: Ein zugeklappter Abschnitt wird aufgeklappt, sobald + jemand darauf tippt, und DANN gilt sie wieder. */ + if (e.closest("details:not([open])")) return false; const r = e.getBoundingClientRect(); /* 43,5 STATT 44: Ein Knopf von 43,98 px wird als „44x44" angezeigt und waere trotzdem ein Fund -- ein halbes Pixel @@ -531,7 +593,29 @@ const messen = () => { überdecken -- das ist der Zweck eines Dialogs. */ if (a.closest("dialog[open], .anruf, .anruf-klingelt") !== b.closest("dialog[open], .anruf, .anruf-klingelt")) continue; - ueberdeckt.push(`${name(a)} ⨯ ${name(b)} (${Math.round(breiteUeber)}×${Math.round(hoeheUeber)}px)`); + /* WO liegen die beiden? „93×18px Ueberdeckung" sagt, DASS etwas + uebereinanderliegt, und schickt einen danach suchen. Die Lage + liegt hier ohnehin vor -- sie wurde nur weggeworfen. Mit ihr + sieht man auf einen Blick, ob zwei Nachbarn sich beruehren + oder ob eines irgendwo ganz anders klebt. (07.10.2026) */ + const lage = (r) => `${Math.round(r.left)},${Math.round(r.top)} ${Math.round(r.width)}×${Math.round(r.height)}`; + /* UND WOHER KOMMEN SIE? Zwei gleich benannte Elemente sagen nichts + darueber, ob sie Nachbarn sind oder aus ganz verschiedenen + Ecken stammen. Der naechste Vorfahr mit einer Klasse beantwortet + genau das -- und erspart das Raten, das mich hier eine + Viertelstunde gekostet hat. */ + const woher = (e) => { + const teile = []; + for (let n = e.parentElement, i = 0; n && i < 3; n = n.parentElement, i++) { + if (!n.className || typeof n.className !== "string") continue; + const r = n.getBoundingClientRect(); + teile.push(`${n.className.split(" ")[0]}@${Math.round(r.top)}+${Math.round(r.height)}` + + `/${getComputedStyle(n).position}`); + } + return teile.join(" < ") || "?"; + }; + ueberdeckt.push(`${name(a)} in ${woher(a)} [${lage(ra)}] ⨯ ${name(b)} in ${woher(b)} [${lage(rb)}]` + + ` = ${Math.round(breiteUeber)}×${Math.round(hoeheUeber)}px`); break; } } diff --git a/workspace/anleitung.html b/workspace/anleitung.html index 7710eb67..a60bcfe5 100644 --- a/workspace/anleitung.html +++ b/workspace/anleitung.html @@ -7,17 +7,17 @@ - - - - - + + + + + - - + + @@ -289,16 +289,16 @@ Und anleitung.js braucht es doppelt: Symbol, Farbe, Name und Adresse jeder Karte kommen von dort, nicht vom Server. --> - + - - - - - - + + + + + + diff --git a/workspace/anruf-probe.html b/workspace/anruf-probe.html index 0cc578b3..a5288515 100644 --- a/workspace/anruf-probe.html +++ b/workspace/anruf-probe.html @@ -16,8 +16,8 @@ verdeckt. Gefunden hat es pruef-struktur. Richtig sind `gate.css` (die Farbwerte des Hauses) und `haus.css`. --> - - + + - +