feat: Formular-Design — Typografie, Abstände, Eingabefelder (v2.36.0) - #99
Merged
Conversation
Umsetzung des abgestimmten Entwurfs. Ausschließlich Aussehen; keine Regel ändert Struktur, Reihenfolge oder Verhalten des Formulars. - Abstände kommen vom Raster des Tab-Panels statt von Rändern je Feld. Margins an einzelnen Feldern kollabierten oder verdoppelten sich, je nachdem was daneben stand; gap tut das nicht. - Zwei Spalten für zusammengehörige Paare: Format/Dateigröße, Zeitraum-Beginn/-Ende, Name/E-Mail bei Urheber, pflegender Stelle und Ersteller sowie die beiden Kontaktfelder. Unter 782px wieder einspaltig. - Eingabefelder einheitlich 40px hoch, weichere Rundung, sichtbarer Fokus-Ring. Text, Auswahl, Zahl und Datum erbten von WordPress unterschiedliche Standardhöhen. - Reiter mit Unterstrich statt Karteikarten-Rahmen. - Wiederholbare Distributionen als Karten. - Datei-Upload als getönter Block unter der Zugriffs-URL. - Hilfetexte nicht mehr kursiv, größerer Zeilenabstand. - Token für Abstände, Radien, Feldhöhe und Schriftgrößen in :root. Keine PHP-Änderung nötig: Die Zweispaltigkeit wählt Felder über ihr name-Attribut. Ein data-Attribut wäre naheliegender gewesen, aber Carbon Fields reicht die bei <select> nicht zuverlässig ans DOM durch — der Meta-Key steht dagegen immer im Namen. Alle an CF-Klassennamen hängenden Regeln stehen gesammelt im Block FORMULAR-DESIGN am Dateiende; das ist nach einem CF-Update die einzige zu prüfende Stelle. Die abgelösten Einzelabstände wurden entfernt, damit die Datei nicht zwei widersprüchliche Quellen für dasselbe enthält. Verifiziert: Klammerbilanz ausgeglichen (203/203), alle 37 verwendeten Token definiert, keine verwaisten Verweise auf entfernte Regeln, php -l, check-i18n.py bei 0, Katalog-Abdeckung beidseitig leer. Das Ergebnis lässt sich nur im Browser abschließend beurteilen — bitte nach dem Update einmal über die fünf Tabs schauen. https://claude.ai/code/session_01JB1xUQM892bVZ4Yv3MZjvq
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Umsetzung des zuvor abgestimmten Entwurfs. Ausschließlich Aussehen — keine Regel ändert Struktur, Reihenfolge oder Verhalten des Formulars.
Was sich ändert
Abstände kommen vom Raster statt von Rändern je Feld. Das Tab-Panel ist jetzt ein CSS-Grid mit
gap. Margins an einzelnen Feldern kollabierten oder verdoppelten sich, je nachdem was daneben stand —gaptut das nicht, und der vertikale Rhythmus wird gleichmäßig.Zwei Spalten für zusammengehörige Paare: Format/Dateigröße, Beginn/Ende des Zeitraums, Name/E-Mail bei Urheber, pflegender Stelle und Ersteller sowie die beiden Kontaktfelder. Unterhalb von 782 px — der Bruchstelle des WordPress-Backends — wieder einspaltig.
Eingabefelder einheitlich, 40 statt rund 30 Pixel hoch, weichere Rundung, sichtbarer Fokus-Ring. Text-, Auswahl-, Zahlen- und Datumsfelder erbten von WordPress unterschiedliche Standardhöhen und sahen entsprechend uneinheitlich aus.
Dazu: Reiter mit Unterstrich statt Karteikarten-Rahmen, wiederholbare Distributionen als Karten, Datei-Upload als getönter Block unter der Zugriffs-URL, Hilfetexte nicht mehr kursiv.
Neu in
:root: Token für Abstände, Radien, Feldhöhe und Schriftgrößen — die Werte stehen an einer Stelle statt über 1.400 Zeilen verteilt.Keine PHP-Änderung nötig
Im Entwurf hatte ich „eine Handvoll
data-Attribute inclass-fields.php" veranschlagt. Das ist entfallen: Die Zweispaltigkeit wählt Felder über ihrname-Attribut aus ([name$="[_odw_temporal_start]"]). Eindata-Attribut wäre naheliegender gewesen, aber Carbon Fields reicht die bei<select>nicht zuverlässig ans DOM durch — im Formular-JS ist genau das bereits vermerkt. Der Meta-Key steht dagegen immer im Namen. Der Umbau ist damit reines CSS.Wartbarkeit
Alle Regeln, die an Klassennamen von Carbon Fields hängen, stehen gesammelt im Block
FORMULAR-DESIGNam Ende vonassets/css/admin.css, mit der Liste der betroffenen Klassen im Kopfkommentar. Nach einem Carbon-Fields-Update ist das die einzige zu prüfende Stelle.Die Abhängigkeit steigt damit wie angekündigt von acht auf rund zwanzig CF-Klassen. Die abgelösten Einzelabstände habe ich entfernt, statt sie überschreiben zu lassen — sonst enthielte die Datei zwei widersprüchliche Quellen für dasselbe.
Verifiziert
php -lüber alle geänderten Dateien,bin/check-i18n.pybei 0, Katalog-Abdeckung beidseitig leerWas ich nicht prüfen konnte
Das Ergebnis im Browser. Der lokale Composer-Toolchain ist weiterhin blockiert, und selbst mit ihm gäbe es hier keine WordPress-Instanz. Bitte nach dem Update einmal über die fünf Tabs schauen — besonders auf Tab 4, wo die meisten Felder stehen und die Zweispaltigkeit am stärksten greift.
Eine Ungenauigkeit im Entwurf will ich benennen: Die Ansicht „Vorher" zeigte die Reiter im WordPress-Standard. Tatsächlich waren sie im Plugin schon gestaltet, der Unterschied dort ist also kleiner als die Vorschau suggerierte. Bei Typografie, Abständen und Eingabefeldern stimmt der gezeigte Abstand.
🤖 Generated with Claude Code
https://claude.ai/code/session_01JB1xUQM892bVZ4Yv3MZjvq
Generated by Claude Code