Weiter am Rundumcheck, diesmal der Handy-Rundgang. Von sechs Befunden war einer ein echter Layoutfehler, zwei waren zu kleine Schrift, und drei kamen daher, dass die Messung etwas nicht unterscheiden konnte. === AUF DEM HANDY KAPUTT === 1. DER NAME IN DER PERSONENKARTE WAR NULL PIXEL BREIT. Gemessen auf 412 px: `h3.tperson__name` mit `w=0` bzw. `w=15`. Der Name stand als Buchstabensaeule da oder gar nicht -- auf der Seite, die von Menschen handelt. `.tperson__text` trug `flex: 1; min-width: 0`. Das erlaubt dem Textblock, auf null zu schrumpfen, und Flexbox schrumpft lieber, als umzubrechen -- die Pille „zuletzt gesehen" daneben blieb stehen und nahm allen Platz. `min-width: 0` war trotzdem richtig gemeint (ohne sie blaeht ein langes Wort den Kasten auf); es fehlte nur die Untergrenze. Jetzt `min(14ch, 100%)`: vierzehn Zeichen, wenn so viel Platz ist, sonst der ganze Platz, der da ist. Die Pille bricht um -- `flex-wrap: wrap` stand am Kopf ohnehin schon, es fehlte nur der Grund, es zu benutzen. 2. ZWEI BESCHRIFTUNGEN UNTER DER LESBARKEITSGRENZE. `.u-weg__marke` 10,88 px, `.u-weg__aus` 11,2 px -- die Hausgrenze sind 11,5. Der Reflex dahinter: Eine Marke soll leise sein, also macht man sie klein. Leise wird sie aber durch Farbe und Gewicht; eine Schrift, die man nicht lesen kann, ist nicht leise, sondern weg. Derselbe Griff ist mir gestern dreimal an einem Tag passiert. === DREI MESSUNGEN, DIE ETWAS NICHT UNTERSCHEIDEN KONNTEN === 3. `pointer-events: none` IST KEIN BERUEHRZIEL. Die Terminpunkte im Monatsraster des Kalenders sind 8 x 8 px und nehmen ausdruecklich keine Beruehrung an -- angetippt wird die ZELLE. Sie als „zu klein" zu melden ist, als beanstande man die Groesse eines gemalten Knopfs. `pruef-breiten` kennt die Ausnahme seit jeher; im Handy-Rundgang hat sie gefehlt. 4. `font-size: 0` IST KEINE KLEINE SCHRIFT, SONDERN KEINE. Dieselben Punkte: Die Schrift wird auf null gesetzt, die Farbe bleibt. Gemeldet wurde „0px, zu klein". Die Grenze nach unten bleibt scharf -- alles zwischen 0,1 und 11,5 px ist weiterhin ein Befund, nur die glatte Null faellt heraus. Sie ist eine Aussage, keine Nachlaessigkeit. 5. `scrollWidth > clientWidth` SAGT BEI INLINE-ELEMENTEN NICHTS. Chromium liefert dort fuer `clientWidth` glatt null, und damit ist jeder Text breiter als sein Kasten. Der richtige Umgang mit einer unmoeglichen Messung ist, sie nicht zu machen -- nicht, ihr Ergebnis zu glauben. Dazu: Was per `clip-path: inset(50%)` fuer das Auge weggenommen ist (echte <select> unter selbst gebauten Umschaltern, Beschriftungen zu Symbolknoepfen), kann nicht abgeschnitten sein. === UND EINE MELDUNG, DIE JETZT SAGT, WO MAN SUCHEN MUSS === „abgeschnitten: Mara (18>0)" hat mich zwanzig Minuten gekostet -- drei Vermutungen, drei Messungen. Die Meldung nennt jetzt Element, Klasse, Darstellungsart und Breite: „Mara (18>0, h3.tperson__name, block, w=0)". Damit war der Fall in einem Blick klar. Eine Pruefung, die nur sagt DASS etwas ist, ist eine halbe. GEMESSEN: pruef-breiten 0 Fehler (9 Breiten, 38 Seiten), pruef-team 51/0, pruef-tippziele 11/0, pruef-css-klassen 33/0. Im Handy-Rundgang bleiben die Kopfleisten-Befunde bei 360/390/412 px -- die nehme ich mir als Naechstes vor, sie brauchen einen Umbau und keine Korrektur. Co-Authored-By: Claude Opus 5 <[email protected]>
138 lines
6.3 KiB
JavaScript
138 lines
6.3 KiB
JavaScript
/* =====================================================================
|
|
WAS STEHT AUF DIESER SEITE WIRKLICH?
|
|
=====================================================================
|
|
|
|
Gebaut am 25.09.2026, weil `pruef-neue-seiten` meldete, die
|
|
Entwicklungsseite sei nicht gefuellt (350 Zeichen). Sie ist gefuellt
|
|
-- mit zwei Personenkacheln, vier Abschnitten und einem Ring je
|
|
Person. Sie braucht nur weniger Worte, seit aus achtzehn
|
|
Zahlenkaesten zwei Kacheln geworden sind.
|
|
|
|
Die Messung zeigt den Text, die Zahl der Kacheln, den Zustand des
|
|
Kartenblocks und jeden Fehler aus der Browserkonsole. Mit ROLLE=hand
|
|
sieht sie die Seite mit den Augen der rechten Hand.
|
|
|
|
Aufrufen mit:
|
|
node server/mess-seiteninhalt.mjs <seite.html>
|
|
ROLLE=hand node server/mess-seiteninhalt.mjs entwicklung.html
|
|
===================================================================== */
|
|
import { mkdtempSync, rmSync } from "node:fs";
|
|
import { tmpdir } from "node:os";
|
|
import { join } from "node:path";
|
|
|
|
const SEITE = process.argv[2] || "entwicklung.html";
|
|
const PORT = 5461;
|
|
const ordner = mkdtempSync(join(tmpdir(), "ws-inhalt-"));
|
|
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
|
|
process.env.PORT = String(PORT);
|
|
process.env.SITE_ACCESS_SECRET = "lokaler-test";
|
|
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";
|
|
|
|
const express = (await import("express")).default;
|
|
const ec = express.response.cookie;
|
|
express.response.cookie = function (n, w, o) {
|
|
return ec.call(this, n, w, { ...(o || {}), secure: false });
|
|
};
|
|
import { notbremse } from "./helfer-notbremse.mjs";
|
|
await import("./index.js");
|
|
notbremse(200_000, "mess-seiteninhalt");
|
|
await new Promise((r) => setTimeout(r, 900));
|
|
|
|
const BASIS = `http://127.0.0.1:${PORT}`;
|
|
const { DatabaseSync } = await import("node:sqlite");
|
|
const { scryptSync, randomBytes, createHmac } = await import("node:crypto");
|
|
const d = new DatabaseSync(process.env.WORKSPACE_DB);
|
|
const jetzt = new Date().toISOString();
|
|
const sch = randomBytes(32).toString("hex");
|
|
d.prepare("INSERT INTO einstellungen (schluessel, wert, geaendert, von)"
|
|
+ " VALUES (?,?,?,NULL) ON CONFLICT(schluessel) DO NOTHING")
|
|
.run("code_kennung_schluessel", sch, jetzt);
|
|
const anlegen = (name, rolle, code) => {
|
|
const s = randomBytes(16).toString("hex");
|
|
const h = scryptSync(code, s, 64,
|
|
{ N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
|
|
return d.prepare("INSERT INTO personen"
|
|
+ " (name, rolle, code_hash, code_salt, code_n, code_kennung, aktiv, erstellt)"
|
|
+ " VALUES (?,?,?,?,?,?,1,?) RETURNING id")
|
|
.get(name, rolle, h, s, 32768,
|
|
createHmac("sha256", sch).update(code).digest("hex"), jetzt).id;
|
|
};
|
|
anlegen("Filipe", "admin", "CODE-DOGI-0001");
|
|
anlegen("Frida", "modi", "CODE-MODI-0001");
|
|
anlegen("Rieke", "hand", "CODE-HAND-0001");
|
|
d.close();
|
|
|
|
const an = await fetch(BASIS + "/workspace/api/anmelden", {
|
|
method: "POST", headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(process.env.ROLLE === "hand"
|
|
? { rolle: "hand", code: "CODE-HAND-0001" }
|
|
: { rolle: "admin", code: "CODE-DOGI-0001" }),
|
|
});
|
|
const keks = (an.headers.getSetCookie?.() || []).map((z) => z.split(";")[0]).join("; ");
|
|
|
|
const pw = await import(
|
|
"file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
|
|
const browser = await pw.chromium.launch();
|
|
const kontext = await browser.newContext({ viewport: { width: 1440, height: 1000 } });
|
|
await kontext.addCookies(keks.split("; ").map((k) => {
|
|
const [n, ...r] = k.split("=");
|
|
return { name: n, value: r.join("="), domain: "127.0.0.1", path: "/" };
|
|
}));
|
|
const seite = await kontext.newPage();
|
|
const konsole = [];
|
|
seite.on("console", (e) => { if (e.type() === "error") konsole.push(e.text().slice(0, 160)); });
|
|
seite.on("pageerror", (e) => konsole.push("ABSTURZ: " + e.message.slice(0, 160)));
|
|
await seite.goto(`${BASIS}/workspace/${SEITE}`, { waitUntil: "networkidle" });
|
|
await seite.waitForTimeout(1500);
|
|
|
|
/* Mit SUCHE=<text> wird EIN Element genau vermessen -- Kasten,
|
|
Darstellungsart, Umbruchregeln und die Kette darueber. */
|
|
if (process.env.SUCHE) {
|
|
const s = await seite.evaluate((suche) => {
|
|
const e = [...document.querySelectorAll("*")].find(
|
|
(x) => x.children.length === 0 && (x.textContent || "").trim().startsWith(suche));
|
|
if (!e) return null;
|
|
const r = e.getBoundingClientRect();
|
|
const st = getComputedStyle(e);
|
|
const kette = [];
|
|
for (let p2 = e.parentElement; p2 && kette.length < 5; p2 = p2.parentElement) {
|
|
const pr = p2.getBoundingClientRect();
|
|
const ps = getComputedStyle(p2);
|
|
kette.push(`${p2.tagName.toLowerCase()}.${String(p2.className).split(" ")[0]} `
|
|
+ `${Math.round(pr.width)}x${Math.round(pr.height)} `
|
|
+ `display:${ps.display} overflow:${ps.overflow} min-width:${ps.minWidth}`);
|
|
}
|
|
return {
|
|
text: (e.textContent || "").trim().slice(0, 30),
|
|
kasten: `${Math.round(r.width)}x${Math.round(r.height)} bei ${Math.round(r.left)},${Math.round(r.top)}`,
|
|
scroll: `${e.scrollWidth} / client ${e.clientWidth}`,
|
|
display: st.display, umbruch: st.overflowWrap, weiss: st.whiteSpace,
|
|
schrift: st.fontSize, richtung: st.writingMode,
|
|
kette,
|
|
};
|
|
}, process.env.SUCHE);
|
|
console.log("=== " + process.env.SUCHE + " ===");
|
|
console.log(s ? JSON.stringify(s, null, 2) : "NICHT GEFUNDEN");
|
|
}
|
|
|
|
const fund = await seite.evaluate(() => ({
|
|
text: (document.body.innerText || "").trim(),
|
|
laenge: (document.body.innerText || "").trim().length,
|
|
personen: document.querySelectorAll(".e-person").length,
|
|
abschnitte: document.querySelectorAll("section").length,
|
|
karteBlock: (() => { const e = document.getElementById("karte-block"); return e ? (e.hidden ? "VERSTECKT" : "sichtbar") : "gibt es nicht"; })(),
|
|
leer: [...document.querySelectorAll("[data-leer], .leer-hinweis")]
|
|
.map((e) => (e.textContent || "").trim().slice(0, 60)),
|
|
}));
|
|
|
|
console.log(`\n=== ${SEITE}: ${fund.laenge} Zeichen, `
|
|
+ `${fund.personen} Personenkacheln, ${fund.abschnitte} Abschnitte ===`);
|
|
console.log(fund.text.slice(0, 900));
|
|
console.log("karte-block: " + fund.karteBlock);
|
|
if (fund.leer.length) console.log("\nLeer-Hinweise: " + fund.leer.join(" | "));
|
|
if (konsole.length) console.log("\nKONSOLE: " + konsole.join("\n "));
|
|
|
|
await browser.close();
|
|
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
|
|
process.exit(0);
|