Fassung 1.5.5: die Verwaltungsnavigation war am Schreibtisch unerreichbar
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:
1 parent
7c3c8671a7
commit
d1ac9d760b
4 files changed
+79
-12
No files matched your search
+22
-10
@@ -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. */
|
||||
|
||||
Reference in new issue
Block a user