Aus jedem Fenster kommt man heraus, die Kachel dreht sich, der Eingang sieht aus wie das Haus
VIER DINGE, und das erste ist eine Meldung aus dem Support.
1. MISS KAM AUS "AUFGABE BEARBEITEN" NICHT HERAUS.
„Ich konnte da wieder nicht zurück gehen, musste die App schließen
damit ich wieder auf die Hauptseite kam."
Gemessen (mess-dialog-ausgang.mjs), vier Größen:
412x915 App 782 px Inhalt in 784 px -- knapp ja
412x780 Browser 782 px Inhalt in 742 px -- SACKGASSE
360x640 klein 794 px Inhalt in 602 px -- SACKGASSE
412x430 Tastatur 794 px Inhalt in 392 px -- SACKGASSE
`.dialog` hatte `overflow: hidden`, eine Scroll-Höhe gab es NUR für
`.dialog--breit`. Alles unterhalb des Rands wurde abgeschnitten --
samt "Abbrechen". Jetzt rollt JEDES Fenster, und Kopf wie Knopfzeile
bleiben stehen (`position: sticky`), damit man den Ausgang SIEHT,
ohne erst durch acht Felder zu scrollen. Alle vier Größen: ja.
2. DIE VORLAGENKACHEL DREHT SICH.
„wenn ich drauf drücke dreht sich die kachel und dan seh ich wer es
gemacht hat, und immer noch die option es nochmal zu verteilen falls
neue leute ins team zustoßen."
Vorne bleibt die Kurzfassung ("liegt bei 3 von 4"), hinten stehen
die Namen mit ihrem Stand und zwei Knöpfe: "Nachholen – 1 fehlt"
(oder "Nochmal an alle", wenn wirklich alle sie haben) und "Zurück".
Nach dem Verteilen dreht sie sich von selbst; wer nur nachsehen
will, drückt "Wer hat sie?".
3. DER EINGANG SIEHT AUS WIE DAS HAUS.
Fase und Leuchtschiene statt flachem Kasten, die Schiene in der
Farbe des Stands. Die drei Zahlen werden drei Felder -- und die
"0 neu" leuchtet nicht mehr rot: Eine Warnung, die immer kommt, ist
keine Warnung. Ab 760 px steht das Bild neben dem Text statt
darunter; die Karte war dadurch dreimal so hoch wie nötig.
4. DER CREATOR-KATALOG IST AUF DER TEAM-SEITE WEG.
„es gibt keine creator auf dieser seite" -- dort stand "Wähle oben
einen Creator", eine Aufforderung zu etwas Unmöglichem. Gefragt wird
jetzt nach den Daten (gibt es jemanden, dem ich das geben kann?),
nicht nach der Adresse.
DAZU FERTIG GEMACHT, WAS VON GESTERN OFFEN WAR:
* Die zwei Serien ohne Haus ("Community-Call", "Schulung-Agentur").
Ursache war meine eigene Abschrift: Bei den Terminen frage ich die
Teilnehmerliste, bei den Serien hatte ich sie vergessen. Auf einer
Kopie der echten Datenbank: 0 offene Zeilen.
* Sieben Schreibwege setzen jetzt `haus` (Aufgaben, Einträge,
Dateien, Material, Wissen, Video-Titelbild). Dabei gefunden:
`material` verwaltet seine Spalten SELBST -- meine Spalte stand in
der falschen Liste und fehlte auf einer frischen Datenbank
(78 Fehlschläge in pruef-material, jetzt 159/0).
* unterstuetzen.html lud meldung.js gar nicht -- dort stand das
Maschinenwort des Servers statt eines Satzes (pruef-meldungen 8/0).
DREI VERALTETE PRÜFUNGEN NACHGEZOGEN, jede STRENGER als vorher:
* "der Modi legt eine Aufgabe an (201)" -- seit dem 22.09. ist das
403 und gewollt. Geprüft wird jetzt auch das WORT.
* "calls.html ist verboten" -- Filipe hat die Kachel selbst verlangt
("jeder der einen kalender hat"). Mit Gegenprobe ersetzt.
* "Review" heißt seit dem 20.09. "Zur Freigabe". Der Name wird jetzt
aus STATUS_NAME GELESEN statt abgeschrieben.
GEPRÜFT: modi-katalog 150/0 (war 144), modi-verborgen 85/0 (war 80/2),
haus-trennung 97/0, material 159/0, meldungen 8/0, abbrechen-optik 0
Fehler. Dazu grün: an-alle, vorlagen, support, css-klassen,
aufgabenbrett, aufgaben-vorlagen, unterstuetzung, formulare, loeschen,
nachfrage, kalender, chat, leerzustand.
OFFEN UND NICHT ANGEFASST: pruef-breiten meldet auf report.html ein
Berührziel von 27x18 px. Der Link (`class="zurueck"`) ist auf 30
Seiten derselbe und hat gar keinen eigenen Stil; beanstandet wird nur
diese eine Seite, weil dort hinter ihm nur "· Review" steht und die
Prüfung Fließtext-Links erst ab 12 Zeichen Umgebung ausnimmt. Eine
Klasse auf 30 Seiten ohne Prüflauf zu ändern wäre geraten.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -925,6 +925,94 @@
|
||||
background: rgba(4, 7, 12, .72);
|
||||
border: 1px solid rgba(160, 190, 225, .14);
|
||||
}
|
||||
/* =====================================================================
|
||||
DIE KACHEL DREHT SICH (25.09.2026)
|
||||
|
||||
Filipe: „wenn ich drauf drücke dreht sich die kachel und dan seh ich
|
||||
wer es gemacht hat, und immer noch die option es nochmal zu
|
||||
verteilen falls neue leute ins team zustoßen."
|
||||
|
||||
WIE ES GEBAUT IST: Die Karte selbst dreht sich (`rotateY`), und die
|
||||
beiden Seiten verstecken ihre Rueckseite (`backface-visibility`).
|
||||
Das ist der eine Weg, bei dem die Drehung EINE Bewegung ist und
|
||||
nicht zwei -- ein Ein- und Ausblenden saehe aus wie ein Austausch,
|
||||
nicht wie ein Umdrehen.
|
||||
|
||||
DIE RUECKSEITE LIEGT ABSOLUT UEBER DER VORDERSEITE, und das hat
|
||||
einen Grund, der nicht nach aussen sichtbar ist: Das Brett ist ein
|
||||
Raster. Zwei Seiten im Fluss wuerden die Karte doppelt so hoch
|
||||
machen, und das Raster zoege alle Nachbarkarten mit. So bestimmt
|
||||
weiterhin die Vorderseite die Hoehe.
|
||||
|
||||
`inset: 0` MEINT DEN INNENRAND, nicht den Rahmen -- absolute
|
||||
Kinder richten sich am Innenrand ihres Ankers aus. Die Rueckseite
|
||||
sitzt damit genau dort, wo auch der Text der Vorderseite beginnt,
|
||||
ohne dass ein Wert doppelt gepflegt werden muss.
|
||||
|
||||
UND WER NICHT UMDREHEN WILL, MUSS NICHT: Die Kurzfassung („liegt bei
|
||||
3 von 4") steht weiterhin vorne im Fuss. Die Rueckseite ist die
|
||||
Vertiefung, nicht die Grundauskunft.
|
||||
===================================================================== */
|
||||
.vorlagenbrett__karte[data-dreh="ja"] {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform .34s cubic-bezier(.2, .7, .3, 1);
|
||||
}
|
||||
.vorlagenbrett__karte[data-dreh="ja"][data-gedreht="ja"] { transform: rotateY(180deg); }
|
||||
|
||||
.vorlagenbrett__seite {
|
||||
display: flex; flex-direction: column; gap: 8px;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.vorlagenbrett__seite--vorn { flex: 1; }
|
||||
.vorlagenbrett__seite--hinten {
|
||||
position: absolute; inset: 0;
|
||||
transform: rotateY(180deg);
|
||||
/* DIE POLSTERUNG MUSS HIER NOCH EINMAL STEHEN. `inset: 0` richtet
|
||||
sich am INNENRAND des Rahmens aus -- die 16/18 px der Karte liegen
|
||||
damit INNERHALB dieser Flaeche und nicht davor. Ohne diese Zeile
|
||||
klebte die Ueberschrift am Rahmen; im Bild war die erste Ziffer
|
||||
angeschnitten. Dieselben Werte wie an `.vorlagenbrett__karte`. */
|
||||
padding: 16px 18px;
|
||||
/* Passt die Rueckseite einmal nicht (viele Namen, schmales Geraet),
|
||||
rollt SIE -- die Karte bleibt so hoch wie vorne. Ein Abschneiden
|
||||
waere dieselbe Sackgasse wie im Bearbeiten-Fenster. */
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
/* BEWEGUNG IST EIN ANGEBOT, KEINE PFLICHT. Wer sie abbestellt hat,
|
||||
bekommt dieselbe Rueckseite -- nur sofort. `transition: none`
|
||||
genuegt dafuer: Der Endzustand ist derselbe. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.vorlagenbrett__karte[data-dreh="ja"] { transition: none; }
|
||||
}
|
||||
|
||||
.vorlagenbrett__wer-schild {
|
||||
margin: 0; font-size: .78rem; font-weight: 700;
|
||||
letter-spacing: .04em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
}
|
||||
|
||||
/* Der Weg zurueck ist ruhiger als der Weg vorwaerts: „Nochmal
|
||||
verteilen" ist die Handlung, „Zurueck" nur das Zumachen. */
|
||||
.vorlagenbrett__zurueck {
|
||||
background: none;
|
||||
border-color: rgba(160, 190, 225, .22);
|
||||
color: var(--text-still);
|
||||
}
|
||||
.vorlagenbrett__zurueck:hover { color: var(--text); border-color: var(--akzent); }
|
||||
|
||||
/* Der Umdreh-Knopf steht rechts im Fuss, hinter Frist und Vermerk --
|
||||
er ist die Nebenhandlung, nicht die Hauptsache. */
|
||||
.vorlagenbrett__drehknopf {
|
||||
background: none;
|
||||
border-color: rgba(160, 190, 225, .22);
|
||||
color: var(--text-still);
|
||||
}
|
||||
.vorlagenbrett__drehknopf:hover { color: var(--text); border-color: var(--akzent); }
|
||||
|
||||
.vorlagenbrett__titel {
|
||||
margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3;
|
||||
color: var(--text);
|
||||
@@ -1045,8 +1133,11 @@
|
||||
===================================================================== */
|
||||
.vorlagenbrett__wer {
|
||||
display: flex; flex-wrap: wrap; gap: 6px;
|
||||
margin: 10px 0 0; padding-top: 9px;
|
||||
border-top: 1px solid var(--rand);
|
||||
/* KEIN TRENNSTRICH MEHR (25.09.2026): Der gehoerte dazu, solange die
|
||||
Reihe UNTER der Karte stand und sich vom Text darueber absetzen
|
||||
musste. Auf der Rueckseite ist sie der Inhalt -- ein Strich ueber
|
||||
dem einzigen Inhalt trennt nichts. */
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
.vorlagenbrett__wer-p {
|
||||
display: inline-flex; align-items: baseline; gap: 6px;
|
||||
|
||||
Reference in New Issue
Block a user