From 19d709250d5947b91d4ceba1aba5aec1cf14f1f8 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Wed, 23 Sep 2026 01:08:25 +0200 Subject: [PATCH] screen1: "Wie geht's dir?" ist EINE Flaeche -- und die Spalten waren der Fehler Filipe, mit dem Bildschirmfoto der Seite: "ich will dass diese seite viel uebersichtlicher aussieht, es soll eine riesssen kachel sein wo alles viel besser und geiler aussieht. los" WAS ANDERS IST -------------- Vorher lagen Gruppenkoepfe und Fragen flach nebeneinander in derselben Spalte: jede Frage eine eigene Kachel mit Rand, Schatten und Fase, dazwischen ab und zu eine Ueberschrift. Zwoelf Kacheln, kein Zusammenhang. Jetzt: eine Flaeche (`b-flaeche`), darin je Gruppe ein Abschnitt mit ihrem Kopf und ihren Fragen. Getrennt wird durch eine Linie, nicht durch eine Luecke. Die Frage ist darin kein eigener Kasten mehr, sondern ein flaches Feld; beantwortet erkennt man an der linken Kante. Obendrauf ein Band, das den eigenen Stand zeigt ("2 von 9 Fragen dieser Runde beantwortet") -- auf einer Seite, die man ausfuellt, ist genau das die Uebersicht, die gefehlt hat. DER EIGENTLICHE FUND: DER SPALTENSATZ ------------------------------------- Nach dem Umbau stand auf dem Bildschirmfoto rechts oben eine Reihe Antwortknoepfe ohne Ueberschrift darueber, und die Ueberschrift "Miteinander" links unten neben fremden Fragen. Eine Ueberschrift, die neben fremdem Inhalt steht, ordnet den falschen zu -- das ist nicht unschoen, das ist falsch. Ursache war `columns: 2` auf `#fragen`, dem Behaelter um ALLES. Solange darin nur flache Fragen lagen, ging es auf. Seit die Fragen in Gruppen stecken, schneidet der Spaltenumbruch mitten durch eine Gruppe. Das `break-inside: avoid` daneben konnte nichts halten: Es galt fuer `#fragen > .e-punkt`, und ein `.e-punkt` ist seit dem Umbau kein direktes Kind von `#fragen` mehr. Die Regel lief ins Leere. Zwei Spalten gibt es weiterhin -- aber INNERHALB einer Gruppe, ueber ein Raster (`.b-gruppe__fragen`). Ein Raster verteilt Kaesten und bricht keinen Textfluss um; es kann per Bauart nichts zerschneiden. Damit ist die Ursache weg und nicht der Schaden ueberklebt. `.b-feld__liste` stand in derselben Regel und kommt in keiner Seite und keinem Skript mehr vor -- nachgesehen, nicht vermutet. Faellt mit weg. GEPRUEFT WIRD DIE LAGE DER KAESTEN, NICHT DIE VERSCHACHTELUNG ------------------------------------------------------------- pruef-befinden bekommt fuenf Messungen dazu. Wichtig dabei, und der Grund fuer die Form: Eine Pruefung auf "steht der Kopf im richtigen Abschnitt?" waere die ganze Zeit gruen gewesen. Nachgemessen war sie es auch (`kopfInGruppe: true`), waehrend das Bild falsch war. Das HTML war nie das Problem. Gemessen wird deshalb, WO die Kaesten liegen: jede Frage unterhalb des Kopfes ihrer Gruppe, keine Gruppe ragt in die naechste. Gegenprobe gefahren -- mit dem Spaltensatz zurueck faellt das erste auf 5 von 6 und das zweite auf 3 von 5, bei 1280 px. Die Pruefung kann also auch "nicht in Ordnung" sagen. pruef-befinden: 121 Pruefungen, 0 Fehler (vorher 116). Gemessen bei 1280 und 390 px, keine Browsermeldungen. Nebenbei: eine deutsche Anfuehrung in einer Pruefmeldung war mit einem ASCII-Anfuehrungszeichen geschlossen. Co-Authored-By: Claude Opus 5 --- server/pruef-befinden.mjs | 66 ++++++++++- workspace/anruf-probe.html | 10 +- workspace/app.webmanifest | 8 +- workspace/assets/css/entwicklung.css | 170 ++++++++++++++++++++++++--- workspace/assets/js/befinden.js | 77 +++++++++++- workspace/aufgaben.html | 36 +++--- workspace/automation.html | 32 ++--- workspace/befinden.html | 51 +++++--- workspace/bereich.html | 44 +++---- workspace/bewerben.html | 36 +++--- workspace/bewerbungen.html | 34 +++--- workspace/calls.html | 34 +++--- workspace/chat.html | 38 +++--- workspace/content.html | 34 +++--- workspace/crew-index.html | 12 +- workspace/crew.webmanifest | 8 +- workspace/dateien.html | 34 +++--- workspace/entwicklung.html | 32 ++--- workspace/hilfe.html | 28 ++--- workspace/index.html | 10 +- workspace/kalender.html | 34 +++--- workspace/leistung.html | 32 ++--- workspace/material.html | 32 ++--- workspace/personen.html | 32 ++--- workspace/profil.html | 36 +++--- workspace/rechte.html | 32 ++--- workspace/report.html | 36 +++--- workspace/scouting.html | 32 ++--- workspace/start.html | 32 ++--- workspace/startcheck.html | 34 +++--- workspace/steckbrief.html | 36 +++--- workspace/talente.html | 34 +++--- workspace/team.html | 32 ++--- workspace/teamlage.html | 32 ++--- workspace/teilen.html | 28 ++--- workspace/treff-moderation.html | 30 ++--- workspace/treff-regeln.html | 30 ++--- workspace/uebersicht.html | 32 ++--- workspace/unsere-seiten.html | 28 ++--- workspace/werdegang.html | 30 ++--- workspace/willkommen.html | 30 ++--- workspace/wissen.html | 34 +++--- 42 files changed, 898 insertions(+), 604 deletions(-) diff --git a/server/pruef-befinden.mjs b/server/pruef-befinden.mjs index 980a8b7f..582de6d3 100644 --- a/server/pruef-befinden.mjs +++ b/server/pruef-befinden.mjs @@ -908,7 +908,71 @@ melde("=== 8. Die Analyse im Browser ==="); ok(g.kopf.length > 30, `mit einem ganzen Satz („${g.kopf.slice(0, 52)}…")`); ok(g.schluss.length > 20, `und einem Schlusssatz („${g.schluss.slice(0, 46)}…")`); ok(/\d+ Fragen aus \d+ Feldern/.test(g.zahlen), - `die Belegzahlen stehen darunter („${g.zahlen}")`); + `die Belegzahlen stehen darunter („${g.zahlen}“)`); + + /* ---- EINE FLAECHE, UND JEDER KOPF UEBER SEINEN EIGENEN FRAGEN + (23.09.2026) ---------------------------------------------- + + Filipe: „ich will dass diese seite viel übersichtlicher aussieht, + es soll eine riesßen kachel sein wo alles viel besser und geiler + aussieht.“ + + Die Fragen liegen jetzt in EINER Flaeche, darin je Gruppe ein + Abschnitt mit Kopf und eigenem Raster. + + WARUM HIER GEMESSEN WIRD UND NICHT NACHGESEHEN, OB ES IM HTML + RICHTIG VERSCHACHTELT IST: Genau das war es die ganze Zeit. Der + Kopf stand im richtigen Abschnitt -- und trotzdem oben rechts + neben den Fragen der naechsten Gruppe, weil `columns: 2` auf dem + Behaelter den Abschnitt mitten durchgeschnitten hat. Eine Pruefung + auf die Verschachtelung waere dabei gruen geblieben; nachgemessen + war sie es auch (`kopfInGruppe: true`), waehrend das Bild falsch war. + + Gemessen wird deshalb, WO die Kaesten liegen: + 1. jede Frage unterhalb des Kopfes IHRER Gruppe, + 2. keine Gruppe ragt in die naechste hinein. + Gegenprobe gefahren: mit dem Spaltensatz zurueck faellt (1) auf + 5 von 6 und (2) auf 3 von 5. Die Pruefung kann also auch + „nicht in Ordnung“ sagen. */ + const lage = await seite.evaluate(() => { + const gruppen = [...document.querySelectorAll(".b-gruppe")]; + const kasten = gruppen.map((x) => x.getBoundingClientRect()); + let gestapelt = 0; + for (let i = 1; i < kasten.length; i++) { + if (kasten[i].top >= kasten[i - 1].bottom - 2) gestapelt++; + } + return { + flaechen: document.querySelectorAll(".b-flaeche").length, + gruppen: gruppen.length, + fragen: document.querySelectorAll("#fragen .e-punkt").length, + /* Keine Frage darf ausserhalb einer Gruppe haengen. */ + ausserhalb: [...document.querySelectorAll("#fragen .e-punkt")] + .filter((f) => !f.closest(".b-gruppe")).length, + kopfUeberFragen: gruppen.filter((gr) => { + const k = gr.querySelector(".e-feld"); + if (!k) return true; + const unten = k.getBoundingClientRect().bottom; + return [...gr.querySelectorAll(".e-punkt")] + .every((f) => f.getBoundingClientRect().top >= unten - 2); + }).length, + gestapelt, + paare: Math.max(0, kasten.length - 1), + /* Kein seitliches Wegrutschen -- eine Flaeche, die breiter ist + als das Fenster, schiebt die ganze Seite. */ + breiter: document.documentElement.scrollWidth > innerWidth + 1, + }; + }); + ok(lage.flaechen === 1, + `die Fragen liegen in EINER Flaeche (${lage.flaechen})`); + ok(lage.gruppen >= 3 && lage.fragen > 0 && lage.ausserhalb === 0, + `alle ${lage.fragen} Fragen stecken in ihren ${lage.gruppen} Gruppen (${lage.ausserhalb} lose)`); + /* DIE ZAHL GEHOERT IN DIE BEDINGUNG -- sonst waere das hier bei null + Gruppen gruen, ohne etwas gesehen zu haben. */ + ok(lage.gruppen > 0 && lage.kopfUeberFragen === lage.gruppen, + `jede Ueberschrift steht ueber IHREN Fragen (${lage.kopfUeberFragen} von ${lage.gruppen})`); + ok(lage.paare > 0 && lage.gestapelt === lage.paare, + `keine Gruppe ragt in die naechste (${lage.gestapelt} von ${lage.paare} Uebergaengen sauber)`); + ok(lage.breiter === false, "und nichts steht seitlich ueber den Rand"); /* ---- KEIN TEXT AUF TEXT, AUCH AM HANDY (20.09.2026) -------------- diff --git a/workspace/anruf-probe.html b/workspace/anruf-probe.html index 6ea7981d..948f0525 100644 --- a/workspace/anruf-probe.html +++ b/workspace/anruf-probe.html @@ -16,15 +16,15 @@ verdeckt. Gefunden hat es pruef-struktur. Richtig sind `gate.css` (die Farbwerte des Hauses) und `haus.css`. --> - - + + - +