DogFatherGit
1f217041ae
ZWEI WUENSCHE VON FILIPE.
1) KACHELN BESSER SICHTBAR
Erster Versuch war zu zaghaft: die Flaeche ging nur von RGB(17,24,37)
auf (27,36,51), der sichtbare Gewinn kam fast nur vom staerkeren Rand.
Nachgemessen an echten Bildpunkten -- Seite liegt bei RGB(5,7,13).
Jetzt RGB(38,49,67), dazu kraeftigerer Rand und hellerer Symbolring.
Der Beschreibungstext stand auf --text-still und lag damit bei 3,6:1 auf
der neuen Flaeche -- zu blass fuer laufenden Text. Jetzt --text-leise,
gemessen 6,2:1.
Leere Kategorien waren mit opacity .55 fast unlesbar. Jetzt .82 -- sie
sollen erkennbar bleiben, nur zurueckhaltender.
2) DATEIEN AN MEHRERE PERSONEN GEZIELT FREIGEBEN
Bisher hatte eine Datei genau EINEN Bereich (creator_id). Damit liess
sie sich nicht zweien geben, ohne sie zweimal hochzuladen.
Neue Tabelle datei_personen (datei_id + person_id). creator_id bleibt
und behaelt seine Bedeutung: Es sagt, zu wessen BEREICH eine Datei
gehoert -- die neue Tabelle sagt, WER sie sehen darf. Zwei verschiedene
Fragen, deshalb zwei Felder.
Auswahl als einzelne Schalter, nicht als <select multiple>: Dort
verliert man mit einem Fehlklick die ganze Auswahl, und auf dem Handy
ist sie kaum bedienbar. Jeder Name ist ein Schalter, der sichtbar an
oder aus ist, eingefaerbt nach Rolle -- man sieht auf einen Blick, ob
eine Datei an Creator, Scouts oder beide geht.
Wer wen auswaehlen darf:
- DogFather jeden aktiven Menschen ausser sich selbst
- ein Scout NUR die Creator, die er betreut -- sonst koennte er sich
ueber eine Freigabe Zugang zu fremden Bereichen verschaffen
- ein Creator gar niemanden
Jede Id wird beim Speichern erneut gegen die erlaubte Auswahl geprueft.
Geprueft: Sam schickt die Ids 3, 6 und 7 mit (alles Creator, die er
NICHT betreut) -- die Datei landet bei niemandem. Kein Fehler, kein
Zugang: die Ids fallen still durch das Raster.
Weiter geprueft:
- Chef sieht alle drei Testdateien, Luna nur ihre, Sam nur seine,
Patrick keine
- Creator bekommt 403 beim Aendern von Freigaben
- Freigaben sind an jeder Datei sichtbar ("Sichtbar fuer ..."), auch
fuer die, die sie nicht aendern duerfen -- niemand soll raten muessen
- Die Auswahl wird nach dem Hochladen geleert, sonst bekaeme die
naechste Datei stillschweigend dasselbe Publikum
184 lines
7.0 KiB
CSS
184 lines
7.0 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: rgba(255, 255, 255, .02);
|
|
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: rgba(255, 255, 255, .03);
|
|
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; }
|
|
|
|
.leer-hinweis {
|
|
padding: 26px 20px; text-align: center;
|
|
color: var(--text-still); font-size: .9rem;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius);
|
|
}
|
|
|
|
@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: rgba(255, 255, 255, .03);
|
|
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; } }
|