DogFatherGitandClaude Opus 5
5a9f1f467c
Filipe zum Bildschirmfoto der Wissen-Seite: "erstens sieht das richtig
scheisse aus". Zu sehen war die Kategorie-Auswahl quer ueber "STUFE",
"GERAET", "VEROEFFENTLICHT AM" und den Tag-Knoepfen. Text auf Text.
Zweimal dieselbe Ursache, zweimal ein Raster, das Kinder in eine Zelle
zwingt, die zu klein ist:
1. FORMULAR "NEUE ANLEITUNG" (aufgaben.css). Die Regel
`grid-template-rows: 1fr 44px` gibt jeder Zelle eine feste
Eingabezeile -- richtig und wichtig, damit alle Felder auf einer
Linie sitzen. Die Zelle "Hauptkategorie" enthaelt aber keine
Eingabe, sondern sechs Gruppen mit zwanzig Knoepfen. Gemessen: der
Kasten 40 px hoch, sein Inhalt 442 -- 402 px liefen ueber alles
darunter. Unter 560 px passierte das nicht, weil dort ohnehin
`auto auto` gilt; deshalb sah es am Handy richtig aus.
Es ist exakt die Falle, die eine Regel darueber schon einmal
zugeschnappt ist ("EINE ZELLE, DIE AUFKLAPPT ..."). Dieselbe
Antwort, diesmal fuer .katwahl.
2. DATEILISTE (dateien.css). .datei hat die Spalten `34px 1fr auto`.
Die ersten vier Kinder sitzen richtig; alles danach wird automatisch
platziert und landet in der ZEICHENSPALTE. Gemessen: "Fassung 2" in
34 px Breite, 22 px herausragend; auf 390 px zusaetzlich die
Metazeile ("1,9 MB" in zwei Zeilen) und "Sichtbar fuer" mit 49 px
Ueberstand.
ZWEI NEUE PRUEFUNGEN, und die erste war erst selbst falsch:
pruef-wissen-formular.mjs verglich zunaechst den KASTEN der Auswahl mit
dem der Zelle und meldete gruen, waehrend das Bildschirmfoto die
Ueberlappung deutlich zeigte. Der Kasten ist ja brav 44 px hoch --
herausgelaufen ist sein INHALT. Jetzt wird scrollHeight gegen
clientHeight gemessen, und die Pruefung wird rot, bevor der Fix
dazukommt. pruef-dateien-liste.mjs legt bewusst zweimal dieselbe Datei
ab, damit "Fassung 2" und "nicht mehr aktuell" ueberhaupt entstehen.
Versionsstempel neu gesetzt (202610011426, 670 Verweise in 45 Dateien).
Ohne ihn liegt die Korrektur auf dem Server und kommt bei niemandem an:
Cache-Control steht auf immutable.
Co-Authored-By: Claude Opus 5 <[email protected]>
223 lines
8.7 KiB
CSS
223 lines
8.7 KiB
CSS
/* ===================================================================
|
|
Dateiablage mit Freigabe-Ablauf.
|
|
=================================================================== */
|
|
|
|
.ablage {
|
|
display: grid; place-items: center; gap: 6px;
|
|
padding: 34px 20px; margin-bottom: 16px;
|
|
border: 1px dashed var(--rand);
|
|
border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
cursor: pointer; text-align: center;
|
|
transition: border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.ablage:hover, .ablage:focus-visible {
|
|
border-color: rgba(63, 189, 245, .5);
|
|
background: rgba(63, 189, 245, .05);
|
|
outline: none;
|
|
}
|
|
/* Während eine Datei darüber schwebt, deutlich sichtbar -- sonst weiß
|
|
niemand, ob das Loslassen an dieser Stelle etwas bewirkt. */
|
|
.ablage[data-bereit="ja"] {
|
|
border-color: var(--akzent);
|
|
border-style: solid;
|
|
background: rgba(63, 189, 245, .10);
|
|
}
|
|
.ablage__zeichen {
|
|
width: 30px; height: 30px;
|
|
fill: none; stroke: var(--text-still);
|
|
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.ablage:hover .ablage__zeichen, .ablage[data-bereit="ja"] .ablage__zeichen { stroke: var(--akzent); }
|
|
.ablage__text { margin: 0; font-size: .92rem; color: var(--text-leise); }
|
|
.ablage__text strong { color: var(--akzent); }
|
|
.ablage__klein { margin: 0; font-size: .78rem; color: var(--text-still); }
|
|
|
|
.hochlade-zeile { margin-bottom: 18px; }
|
|
.hochlade-zeile select {
|
|
min-width: 240px; padding: 9px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
|
|
.fortschritt {
|
|
margin: 0 0 14px; padding: 10px 14px;
|
|
background: rgba(63, 189, 245, .08);
|
|
border: 1px solid rgba(63, 189, 245, .3);
|
|
border-radius: var(--radius-klein);
|
|
font-size: .86rem; color: var(--text-leise);
|
|
}
|
|
|
|
/* Die Filterleiste steht seit 22.09.2026 in gate.css -- sie wird
|
|
inzwischen auf drei Seiten gebraucht, und gate.css laedt jede.
|
|
Sie hier zu lassen hiesse, sie beim vierten Mal wieder zu
|
|
kopieren; genau so ist .knopf-still schon einmal auf einer
|
|
Seite als nacktes Kaestchen erschienen. */
|
|
|
|
/* ---------- Liste ------------------------------------------------------- */
|
|
|
|
.datei {
|
|
display: grid; gap: 4px 16px; align-items: center;
|
|
grid-template-columns: 34px 1fr auto;
|
|
padding: 13px 16px; margin-bottom: 9px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-left: 3px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.datei[data-status="entwurf"] { border-left-color: #6f89a8; }
|
|
.datei[data-status="review"] { border-left-color: #e0a33c; }
|
|
.datei[data-status="freigegeben"] { border-left-color: #4dab77;
|
|
background: rgba(77, 171, 119, .05); }
|
|
|
|
.datei__zeichen {
|
|
grid-row: span 2; width: 26px; height: 26px;
|
|
fill: none; stroke: var(--text-still);
|
|
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.datei__name { font-weight: 600; font-size: .93rem; word-break: break-word; }
|
|
.datei__zeile {
|
|
display: flex; flex-wrap: wrap; gap: 8px;
|
|
font-size: .78rem; color: var(--text-still);
|
|
}
|
|
.datei__knoepfe { grid-row: span 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
|
|
|
|
.marke-status {
|
|
padding: 1px 9px; border-radius: 999px;
|
|
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
|
}
|
|
.marke-status[data-status="entwurf"] { background: rgba(111, 137, 168, .18); color: #a8bdd4; }
|
|
.marke-status[data-status="review"] { background: rgba(224, 163, 60, .16); color: #e6b45c; }
|
|
.marke-status[data-status="freigegeben"] { background: rgba(77, 171, 119, .18); color: #79d1a2; }
|
|
|
|
|
|
/* ALLES UNTER DER KOPFZEILE GEHOERT NEBEN DAS ZEICHEN (01.10.2026).
|
|
---------------------------------------------------------------------
|
|
Filipe: "es sieht sogar noch richtig scheisse aus wenn ich da was
|
|
hochladen will."
|
|
|
|
Die ersten vier Kinder sitzen, wo sie sollen: Zeichen, Name, Knoepfe,
|
|
Metazeile. Alles DANACH wird vom Raster automatisch verteilt -- und
|
|
landet in der ersten freien Zelle. Das ist die ZEICHENSPALTE, und die
|
|
ist 34 Pixel breit. Gemessen (pruef-dateien-liste.mjs): "Fassung 2"
|
|
stand in 34 px und ragte 22 px heraus; auf 390 px traf es zusaetzlich
|
|
die Metazeile ("1,9 MB" brach in zwei Zeilen) und "Sichtbar fuer",
|
|
das 49 px herausragte.
|
|
|
|
Diese Bloecke bekommen deshalb ausdruecklich die Spalten ab der
|
|
zweiten. Auf das Zeichen folgt dann nichts mehr -- und genau so war
|
|
es gemeint. */
|
|
.datei > .fassung,
|
|
.datei > .datei__freigaben,
|
|
.datei > .datei__wahl { grid-column: 2 / -1; }
|
|
|
|
@media (max-width: 720px) {
|
|
.datei { grid-template-columns: 34px 1fr; }
|
|
.datei__knoepfe { grid-row: auto; grid-column: 1 / -1; margin-top: 9px; }
|
|
/* Nur hier: Am Rechner sitzt die Metazeile richtig (Zeile 2, Spalte 2).
|
|
Sobald die Knoepfe aber ueber die ganze Breite gehen, rutscht sie
|
|
hinter ihnen in die Zeichenspalte. */
|
|
.datei > .datei__zeile { grid-column: 2 / -1; }
|
|
}
|
|
|
|
/* Hinweis statt Ablegefeld, wenn jemand nicht hochladen darf. */
|
|
.nur-lesen {
|
|
margin: 0 0 22px; padding: 15px 18px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-left: 3px solid var(--akzent);
|
|
border-radius: var(--radius-klein);
|
|
font-size: .88rem; color: var(--text-leise); line-height: 1.5;
|
|
}
|
|
.nur-lesen strong { color: var(--text); }
|
|
|
|
/* ===================================================================
|
|
Wer darf die Datei sehen (28.08.2026).
|
|
|
|
Kleine Schalter statt <select multiple>: Dort verliert man mit einem
|
|
Fehlklick die ganze Auswahl, und auf dem Handy ist sie kaum
|
|
bedienbar. Hier ist jeder Name ein eigener Schalter, der sichtbar an
|
|
oder aus ist.
|
|
=================================================================== */
|
|
|
|
.hochlade-zeile { display: grid; gap: 16px; margin-bottom: 22px; }
|
|
|
|
.wahl, .datei__wahl { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
|
|
.datei__wahl { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); }
|
|
|
|
.wahl__knopf {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 7px 13px; cursor: pointer;
|
|
background: rgba(255, 255, 255, .04);
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
color: var(--text-leise); font: inherit; font-size: .84rem;
|
|
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
|
}
|
|
.wahl__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
|
|
.wahl__rolle {
|
|
font-size: .7rem; font-weight: 600; letter-spacing: .03em;
|
|
color: var(--text-still);
|
|
}
|
|
/* Ausgewählt trägt die Farbe der Rolle -- man sieht auf einen Blick,
|
|
ob eine Datei an Creator, Scouts oder beide geht. */
|
|
.wahl__knopf[data-an="ja"] { color: #fff; font-weight: 600; }
|
|
.wahl__knopf[data-an="ja"][data-rolle="creator"] {
|
|
border-color: rgba(63, 189, 245, .55); background: rgba(63, 189, 245, .16);
|
|
}
|
|
.wahl__knopf[data-an="ja"][data-rolle="scout"] {
|
|
border-color: rgba(138, 118, 255, .55); background: rgba(138, 118, 255, .16);
|
|
}
|
|
.wahl__knopf[data-an="ja"][data-rolle="admin"] {
|
|
border-color: rgba(232, 192, 125, .55); background: rgba(232, 192, 125, .16);
|
|
}
|
|
.wahl__knopf[data-an="ja"] .wahl__rolle { color: rgba(255, 255, 255, .75); }
|
|
|
|
.datei__freigaben {
|
|
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
|
|
margin-top: 10px; padding-top: 10px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.datei__schild {
|
|
font-size: .7rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.marke-person {
|
|
padding: 3px 10px; border-radius: 999px;
|
|
font-size: .76rem; font-weight: 600;
|
|
color: var(--text-leise);
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
.marke-person--leer { color: var(--text-still); font-weight: 400; font-style: italic; }
|
|
|
|
@media (prefers-reduced-motion: reduce) { .wahl__knopf { transition: none; } }
|
|
|
|
/* =====================================================================
|
|
FASSUNGEN (15.09.2026)
|
|
|
|
"Fassung 2" ist eine Nummer und bleibt ruhig. "nicht mehr aktuell"
|
|
ist eine Warnung und darf auffallen -- aber nicht schreien: Sie steht
|
|
an einer Datei, die niemand falsch gemacht hat, sie ist nur alt.
|
|
===================================================================== */
|
|
|
|
.fassung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
|
|
.fassung__nummer {
|
|
font-size: .78rem; font-weight: 640; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.fassung__alt {
|
|
font-size: .78rem; font-weight: 640;
|
|
padding: 2px 9px; border-radius: 999px;
|
|
color: #d8a76a;
|
|
border: 1px solid color-mix(in srgb, #cc9451 45%, transparent);
|
|
}
|
|
.fassung__loesen {
|
|
font: inherit; font-size: .76rem;
|
|
padding: 2px 9px; border-radius: 999px; cursor: pointer;
|
|
color: var(--text-still);
|
|
background: none;
|
|
border: 1px solid var(--rand);
|
|
}
|
|
.fassung__loesen:hover { color: var(--text); border-color: var(--rand-hell); }
|