Files
dogfather-universe/workspace/assets/css/dateien.css
T
DogFatherGitandClaude Opus 5 478a2895b5 Dateifassungen: die alte Fassung sieht man ihr an
Stufe 9 aus dem Plan: "Dateiversionen statt Ueberschreiben".

GEMESSEN, BEVOR ETWAS GEBAUT WURDE -- DER PLAN LAG DANEBEN

Ueberschrieben wurde nie: `name_datei` ist eindeutig und zufaellig,
jedes Hochladen legt eine neue Zeile an. Der wirkliche Mangel ist ein
anderer, und er ist gefaehrlicher als Ueberschreiben:

  Zwei Dateien gleichen Namens standen BEZIEHUNGSLOS nebeneinander. Die
  alte kann "freigegeben" sein, die neue "entwurf" -- und wer die Liste
  ansieht, laedt die freigegebene herunter. Also die falsche. Kein
  Fehler, keine Meldung, nur die alte Fassung in der Hand.

WAS JETZT PASSIERT

Beim Hochladen erkennt der Server die Vorgaengerin selbst: gleicher
Originalname, gleicher Creator-Bezug, und sie darf nicht schon ersetzt
sein. An der Datei steht danach "Fassung 2"; an der alten steht "nicht
mehr aktuell".

  AUTOMATISCH, NICHT GEFRAGT -- eine Abwaegung: Wer die Verknuepfung
  vergisst, hat zwei Dateien ohne Zusammenhang, und irgendwann laedt
  jemand die alte herunter. Wer sie faelschlich bekommt, SIEHT das
  sofort und loest sie mit einem Klick. Der stille Schaden ist groesser
  als der sichtbare.

  BEI ZWEIFEL WIRD NICHT GERATEN. Gibt es zwei unersetzte Dateien
  gleichen Namens, bleibt die neue eigenstaendig.

  LOESEN GEHT NUR AN DER AKTUELLEN FASSUNG. Wer eine ueberholte loest,
  macht daraus eine zweite aktuelle -- und hat das Problem zurueck.

  DIE NUMMER IST GERECHNET, NICHT GESPEICHERT. Eine Spalte "version"
  muesste beim Loeschen einer mittleren Fassung nachgezogen werden, und
  genau das vergisst man. Faellt die erste weg, zaehlt die zweite
  wieder als erste -- richtig, denn mehr weiss das System dann nicht.

  EIN RING IN DEN DATEN HAELT DIE SEITE NICHT AN. Kann ueber die Wege
  hier nicht entstehen, aber ein Fehler anderswo koennte ihn erzeugen,
  und ein Stillstand ist schlimmer als ein Fehler. Gemessen: 1 ms.

ZWEI SITZUNGEN IM SELBEN VERZEICHNIS

Der vorige Commit (d2210fd, aus einer anderen Sitzung) hat mit
`git add -A` meine damals noch unfertige Spalte `dateien.ersetzt_id`
mitgenommen -- sie steht dort unter einer Ueberschrift, die nichts
damit zu tun hat. Niemand hat etwas falsch gemacht; die Sitzungen
konnten voneinander nicht wissen. Aufgefallen ist es, weil der
Versionsstempel ploetzlich 347 statt 372 Verweise meldete und ich dem
Rueckgang nachgegangen bin.

PRUEFUNGEN: pruef-fassungen neu mit 37, davon 6 im Browser.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-15 12:58:26 +02:00

207 lines
7.9 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);
}
.filter { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.filter .schritt[aria-pressed="true"] {
/* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
--f: var(--akzent);
color: #fff;
background:
linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
linear-gradient(150deg, var(--f),
color-mix(in srgb, var(--f) 45%, transparent)) border-box;
box-shadow: 0 4px 16px -9px var(--f);
}
/* ---------- 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; }
@media (max-width: 720px) {
.datei { grid-template-columns: 34px 1fr; }
.datei__knoepfe { grid-row: auto; grid-column: 1 / -1; margin-top: 9px; }
}
/* 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); }