Files
dogfather-universe/workspace/rechte.html
T
DogFatherGitandClaude Opus 5 e3e015bca4 Kopfleiste: ein Name, der zweimal vergeben war
Filipe zu einem Bildschirmfoto: "was soll das jetzt, wieso sieht das in
gewissen seiten so scheisse aus?!"

Der Teilen-Knopf stand doppelt so hoch wie seine Nachbarn, mit dem
Zeichen UEBER dem Wort statt daneben. Es war kein Gestaltungsfehler,
sondern ein Name: `.teilen` gab es ZWEIMAL --

  gate.css      Knopf der Kopfleiste   inline-flex, waagerecht
  bereich.css   Layout der Teilen-Seite  flex column, 22px, 44rem

Auf den drei Seiten, die beide Dateien laden (bereich, bewerben,
teilen), gewann die spaeter geladene. Der Knopf bekam das Layout einer
ganzen Seite. "Gewisse Seiten" war exakt richtig beobachtet.

DERSELBE NAME KOSTETE AUSSERDEM DEN KNOPF: kopf.js baut ihn nur ein,
wenn `getElementById('teilen')` nichts findet -- ein Schutz gegen
doppelten Einbau. Auf teilen.html steht `<section id="teilen">` aber
schon im HTML. Dort fehlte der Knopf ganz, ohne Spur, ohne Meldung.

REPARIERT ALS REGEL, NICHT ALS EINZELFALL:
  - Was kopf.js in die Leiste haengt, traegt jetzt `kopf-` davor
    (kopf-teilen, kopf-sicht-wahl, kopf-sicht-feld, kopf-fremd-band).
    Eine Seite darf dann heissen wie sie will -- auch "teilen", "chat"
    oder "suchen", und genau diese Woerter braucht als naechstes eine
    Seite.
  - Die Teilen-Seite bekommt eigene Klassennamen (tl-*).

NEU: server/pruef-namen.mjs (12 Pruefungen, ohne Server, <1 s).
Es ist der ZWEITE Namenskonflikt an einem Tag -- der erste war
`.t-schritt` auf der Talente-Seite, gefunden nur durch Zaehlen im
Browser. Beide waren gruen in jeder bestehenden Prueflinie.
Gemessen, um den Schnitt zu finden, der etwas taugt:
  2872 Klasse in zwei geladenen Dateien erwaehnt      -> Rauschen
  1887 davon mit eigener Blockdefinition              -> Rauschen
    12 davon mit widersprechendem `display`
     6 davon ohne `display: none`                     -> geprueft
Mit Gegenprobe, die aus den Dateien ABGELEITET wird (die erste, fest
abgeschriebene Fassung fand nichts, weil die gewaehlte Klasse dort gar
kein `display` setzt -- eine Gegenprobe, die selbst danebenliegt,
beweist nichts).

pruef-kopf-messen: 3 -> 16 Messungen, und drei eigene Fehler behoben,
die alle dieselbe Form hatten -- zu frueh hingesehen:
  1. Sie mass NUR uebersicht.html. Die laedt bereich.css nicht und war
     fuer diesen Fehler blind.
  2. Sie mass nur 320/390/430px. Unter 720px versteckt gate.css das
     Wort "Teilen"; der Knopf bleibt klein, auch falsch angeordnet.
     Filipes Bild war 1366px breit.
  3. Sie wartete 300ms. kopf.js haengt Teile erst nach `/api/ich` ein
     und hat ein Netz bei 1200ms. Zweiter Versuch: warten, bis `#wer`
     Text hat -- SOFORT wahr, dort steht `…` als Platzhalter. Dritter:
     auf Stabilitaet warten -- nach 0ms und 500ms gleich gross, also
     "fertig". Erst die Mindestwartezeit (1200 aus kopf.js plus Luft)
     davor machte die Messung echt.
Bewiesen an der Gegenprobe: mit dem alten Fehler meldet sie jetzt
"kopf-teilen ist 77px -- die anderen im Schnitt 43px", vorher blieb sie
gruen.

Statt einer festen Hoehe wird gefragt, ob EIN Teil aus der Reihe faellt
(> 1,6x der Schnitt seiner Nachbarn). Das waechst mit, wenn die Leiste
groesser wird, und muss bei keinem neuen Knopf nachgezogen werden.

Gruen: namen, kopf-messen, sicht, css-klassen, struktur.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-17 18:59:19 +02:00

143 lines
5.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Wer sieht was · Creator Workspace</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609171858" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609171858" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609171858" />
<link rel="stylesheet" href="assets/css/start.css?v=202609171858" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609171858" />
<link rel="stylesheet" href="assets/css/treff.css?v=202609171858" />
<link rel="stylesheet" href="assets/css/module.css?v=202609171858" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609171858" />
</head>
<body class="start">
<div class="schleier" aria-hidden="true"></div>
<header class="kopfleiste">
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.5 5.5 8 12l6.5 6.5" />
</svg>
<span class="zurueck-knopf__text">Zurück</span>
</button>
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Wer sieht was</span></p>
<div class="kopfleiste__rechts">
<span class="wer" id="wer">…</span>
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
</div>
</header>
<main class="inhalt inhalt--breit">
<section class="kopf-zeile">
<div>
<p class="marke">Rechte · nur für dich</p>
<h1 class="titel">Wer sieht was</h1>
<p class="unterzeile">
Nicht aufgeschrieben, sondern ausgerechnet – aus derselben Tafel,
aus der die Schranke ihre Entscheidung holt. Und umstellbar.
</p>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite" hidden></p>
<!-- Die Leiste sagt, ob etwas von Hand gesetzt ist, und ist der Weg
zurück. Sie steht OBEN und nicht unter der Tabelle: Wer etwas
verstellt hat und es zurückdrehen will, sucht nicht erst
zweihundert Zeilen lang. -->
<div class="rechte-leiste" id="leiste" hidden></div>
<!-- ==================================================================
WARUM DIESE SEITE ÜBERHAUPT EXISTIERT
Filipe: „egal welche Rolle oder Person hinzugefügt wird, soll
immer nur das sehen, was ich erlaube."
Dazu gehört, dass er es NACHSEHEN kann. Eine Regel, die man nur
glauben kann, ist eine Zusage; eine, die man ansehen kann, ist
eine Auskunft.
Und sie ist eine Gegenprobe: Wenn hier bei einer Rolle plötzlich
zwanzig Punkte stehen, wo gestern drei waren, sieht man das in
einer Sekunde. In 74 Rollenabfragen über 20 Module sieht man es
nie.
============================================================== -->
<section class="treff-abschnitt">
<h2 class="treff-abschnitt__titel">Wie viele Seiten je Rolle</h2>
<div class="treff-abschnitt__inhalt">
<p>
Das ist die Zahl, um die es geht. Eine neue Rolle startet bei
<strong>null</strong> – sie bekommt nichts, bis es jemand einträgt.
</p>
</div>
<ul class="rechte-zahlen" id="zahlen">
<li class="leise">wird geladen …</li>
</ul>
</section>
<section class="treff-abschnitt">
<h2 class="treff-abschnitt__titel">Die ganze Tafel</h2>
<div class="treff-abschnitt__inhalt">
<p>
Ein Punkt heißt: diese Rolle darf diese Seite öffnen. Leer heißt
nein – und zwar auch dann, wenn niemand je darüber nachgedacht hat.
Das ist der Unterschied zu vorher.
</p>
<p>
<strong>Ein Klick stellt um</strong>, und er wird sofort gespeichert –
kein Knopf am Ende, an dem eine halbe Änderung verlorengeht. Ein
heller Rahmen heißt: <em>dieses Feld ist von Hand gesetzt</em> und
weicht vom Grundstand im Code ab.
</p>
<p class="leise">
Drei Felder sind fest: Du kannst dir selbst die Rechte-, die Personen-
und die Startseite nicht wegnehmen – sonst käme niemand mehr an die
Rechte, an die Zugänge oder auf die Startseite.
</p>
</div>
<div class="rechte-tafel" id="tafel" aria-busy="true">
<p class="leise">wird geladen …</p>
</div>
</section>
<section class="treff-abschnitt">
<h2 class="treff-abschnitt__titel">Ohne Anmeldung</h2>
<div class="treff-abschnitt__inhalt">
<p>
Diese Seiten sind offen – man kann sich schlecht anmelden, wenn die
Anmeldeseite eine Anmeldung verlangt. Jede andere Seite ist zu.
</p>
<ul class="regel-liste" id="offen"><li class="leise">wird geladen …</li></ul>
</div>
</section>
</main>
<!-- WER kopf.js LAEDT, MUSS AUCH wahl.js LADEN (Regel seit 07.09.2026).
Der Umschalter "Meine Sicht" in der Kopfleiste ist ein selbst
gebautes Bedienelement; dahinter liegt ein unsichtbares Systemfeld
fuer Vorleseprogramme. Ohne wahl.js faellt kopf.js auf dieses Feld
zurueck -- ein grauer Kasten von 92 x 19 Pixeln mit weisser
Schrift, mitten in einer dunklen Leiste.
Beim ersten Anlauf fehlte die Zeile auf genau diesen beiden neuen
Seiten. Gefunden hat das nicht das Auge, sondern pruef-css-klassen,
die seit dem 07.09. jede Seite danach absucht. -->
<script src="assets/js/wahl.js?v=202609171858" defer></script>
<script src="assets/js/bereiche.js?v=202609171858" defer></script>
<script src="assets/js/kopf.js?v=202609171858" defer></script>
<script src="assets/js/rechte.js?v=202609171858" defer></script>
</body>
</html>