Fassung 1.5.5: die Verwaltungsnavigation war am Schreibtisch unerreichbar
CMS quality / php (8.2) (push) Canceled after 0s
CMS quality / php (8.4) (push) Canceled after 0s
CMS quality / browser (push) Canceled after 0s
CMS quality / mysql (push) Canceled after 0s

In der ausgelieferten Fassung fehlte in der Verwaltung am Schreibtisch die
gesamte linke Navigation - Marke oben, Fusszeile unten, dazwischen nichts.

Die Navigation steckt in einem <details>: auf dem Telefon ein Klappmenue, am
Schreibtisch die stehende Spalte. Am Schreibtisch wurde der Schalter mit
display:none ausgeblendet - aber das Element trug kein open, und ein
geschlossenes details versteckt seinen Inhalt selbst. Schalter weg und Inhalt
weg.

Behoben mit ::details-content, das den Inhalt am Schreibtisch zurueckholt,
waehrend der Schalter ausgeblendet bleibt. Kennt ein Browser die Regel nicht,
faellt ueber @supports die ganze Gruppe weg: dann steht der Schalter da und die
Liste ist einen Klick entfernt statt gar nicht da.

Der Code dafuer lag bereits im Arbeitsverzeichnis - eine parallel laufende
Sitzung hatte ihn geschrieben, aber nicht committet, und damit war er in keinem
Release. Uebernommen ist hier nur diese Korrektur, nicht die uebrige Arbeit
jener Sitzung.

Wie das durchrutschen konnte: beim vorigen Bericht wurde die Navigation fuer in
Ordnung erklaert, nachdem eine Nachbildung der Regel in einer leeren Seite
geprueft worden war. Die Nachbildung enthielt die Korrektur, die ausgelieferte
Datei nicht - der Befund war wertlos. Jetzt prueft der Browsertest die echte
Verwaltungsseite, auf beiden Groessen. Gegenprobe gemacht: gegen die
ausgelieferte admin.css schlaegt er fehl.

Geprueft: npm run test:editor vollstaendig, npm test 28/28, phpunit 452/452.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
kantarciandClaude Opus 5 committed 2026-09-14 08:17:56 +02:00
1 parent 7c3c8671a7
commit d1ac9d760b
4 files changed
+79 -12

No files matched your search

+22 -10
View File
@@ -665,21 +665,33 @@ details.card > summary:hover { background: #fafbf8 }
also zwei Zeilen, und der letzte Eintrag ausserhalb des Bildes. Auf einem Telefon ist ein
Klappmenue ehrlicher: eine Zeile im Ruhezustand, aufgeklappt die vollstaendige Liste mit
Flaechen, die ein Daumen trifft. Das details-Element macht das ohne Skript. */
.shell-menu > summary { display: none }
/* Der Schalter traegt seine Gestalt hier, nicht erst im Telefonabschnitt: am Schreibtisch
wird er ausgeblendet, aber nur dort, wo der Inhalt sicher sichtbar ist. */
.shell-menu > summary {
display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
min-height: 44px; padding: 0 14px; border-radius: 10px;
background: #ffffff14; color: #fff; font-weight: 600; font-size: 15px;
}
.shell-menu > summary::-webkit-details-marker { display: none }
.shell-menu > summary:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px }
.shell-menu[open] > summary { margin-bottom: 8px }
.shell-menu-icon { font-size: 17px }
/* Am Schreibtisch steht die Liste dauerhaft da. Ein geschlossenes details-Element versteckt
seinen Inhalt aber von sich aus - der Schalter allein auszublenden loescht die Navigation.
Erst ::details-content holt sie zurueck. Kennt ein Browser die Regel nicht, faellt die
ganze Gruppe weg und der Schalter bleibt stehen: die Liste ist dann einen Klick entfernt
statt gar nicht da. */
@supports selector(::details-content) {
.shell-menu > summary { display: none }
.shell-menu::details-content { content-visibility: visible; block-size: auto }
}
@media (max-width: 760px) {
.shell-nav { flex-wrap: wrap; padding: 10px 14px; gap: 10px; overflow: visible }
.shell-menu { flex: 1 1 100%; order: 3 }
.shell-menu > summary {
display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
min-height: 44px; padding: 0 14px; border-radius: 10px;
background: #ffffff14; color: #fff; font-weight: 600; font-size: 15px;
}
.shell-menu > summary::-webkit-details-marker { display: none }
.shell-menu > summary:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px }
.shell-menu-icon { font-size: 17px }
.shell-menu[open] > summary { margin-bottom: 8px }
.shell-menu > summary { display: flex }
.shell-menu nav { display: block }
.shell-menu:not([open]) nav { display: none }
.shell-menu:not([open])::details-content { content-visibility: hidden; block-size: 0 }
.nav-label { display: block; margin: 12px 4px 6px; font-size: 11px; letter-spacing: 1.4px; color: #9db3a8 }
.nav-list { display: grid; gap: 2px }
/* Vierundvierzig Pixel: die Flaeche, die ein Daumen zuverlaessig trifft. */