From ad69e1f97011b4dac1f3f8bc8b9216399c32e79e Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 7 Aug 2026 12:53:58 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20Formular-Design=20=E2=80=94=20Typografi?= =?UTF-8?q?e,=20Abst=C3=A4nde,=20Eingabefelder=20(v2.36.0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 ` nicht zuverlässig ans DOM durch, der +Meta-Key steht dagegen immer im Namen. Dadurch war **keine Änderung an PHP nötig** — der +Umbau ist reines CSS. + +### 🎨 Added +- Token für Abstände, Radien, Feldhöhe und Schriftgrößen in `:root`. Werte stehen damit an einer + Stelle statt über 1.400 Zeilen verteilt. + +--- + ## [2.35.8] — 2026-08-07 Datei-Upload steht dort, wo er hingehört. diff --git a/CLAUDE.md b/CLAUDE.md index 7f421f3..393398e 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -516,26 +516,34 @@ Caching: `odw_delta_` + MD5 key, TTL 5 min ## 🎯 CSS Spacing & Styling -### Admin Interface Spacing -```css -/* Formularfelder: Konsistente Abstände */ -.cf-field { - padding-left: 20px; - padding-right: 20px; -} +### Admin Interface Spacing (ab v2.36.0) +Abstände kommen vom Raster des Tab-Panels, nicht mehr von Margins je Feld — +`gap` kollabiert nicht und verdoppelt sich nicht. -/* Tab-Inhalte */ +```css .cf-container__tab { - padding: 20px 0; + display: grid; + grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); + gap: var( --odw-space-5 ) var( --odw-space-4 ); + padding: var( --odw-space-5 ) 20px var( --odw-space-6 ); } -/* Spezifische Fields mit data-Attribut */ -[data-odw-backing="byte_size"] { - padding-left: 20px; - padding-right: 20px; +/* Alles über die volle Breite; halbe Breite ist ein Opt-in. */ +.cf-container__tab > * { grid-column: 1 / -1; } + +/* Ausgewählt über das name-Attribut, nicht über ein data-Attribut: + Carbon Fields reicht data-Attribute bei nicht zuverlässig an das DOM-Element durch, + der Meta-Key steht dagegen immer im Namen. */ +.cf-container__tab > .cf-field:has( [name$="[_odw_format]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_byte_size]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_temporal_start]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_temporal_end]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_contact_email]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_contact_url]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_originator_name]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_originator_email]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_maintainer_name]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_maintainer_email]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_creator_name]"] ), +.cf-container__tab > .cf-field:has( [name$="[_odw_creator_email]"] ) { + grid-column: span 1; +} + +/* Das Dateigrößen-Widget ersetzt sein Feld optisch und gehört neben das + Format — dieselbe halbe Breite wie dort. */ +.cf-container__tab > .odw-filesize-widget { + grid-column: span 1; +} + +/* Unter der WordPress-Admin-Bruchstelle wird alles einspaltig. */ +@media ( max-width: 782px ) { + .cf-container__tab { + grid-template-columns: minmax( 0, 1fr ); + padding-left: 12px; + padding-right: 12px; + } + + .cf-container__tab > .cf-field, + .cf-container__tab > .odw-filesize-widget { + grid-column: 1 / -1; + } +} + +/* ------------------------------------------------------------------------- + * Beschriftung und Hilfetext + * ------------------------------------------------------------------------- */ + +.cf-container__tab .cf-field__head { + margin-bottom: var( --odw-space-2 ); +} + +.cf-container__tab .cf-field__label { + display: block; + font-size: var( --odw-font-label ); + font-weight: 600; + line-height: 1.4; + letter-spacing: -0.004em; + color: var( --odw-color-text ); +} + +/* Ohne JavaScript bleibt der Hilfetext an Ort und Stelle — dann soll er + lesbar sein und nicht wie eine kursive Fußnote wirken. Mit JavaScript + wandert er in den ⓘ-Tooltip und wird oben ausgeblendet. */ +.cf-container__tab .cf-field__help { + margin-top: var( --odw-space-2 ); + font-size: var( --odw-font-help ); + font-style: normal; + line-height: 1.55; + color: var( --odw-color-text-muted ); +} + +/* ------------------------------------------------------------------------- + * Eingabefelder + * + * Text, Auswahl, Zahl und Datum sahen bislang unterschiedlich aus, weil sie + * von WordPress verschiedene Standardhöhen und -innenabstände erben. + * ------------------------------------------------------------------------- */ + +.cf-container__tab .cf-field__body input[type="text"], +.cf-container__tab .cf-field__body input[type="url"], +.cf-container__tab .cf-field__body input[type="email"], +.cf-container__tab .cf-field__body input[type="number"], +.cf-container__tab .cf-field__body select, +.cf-container__tab .cf-field__body textarea, +.odw-cessda-input, +.odw-filesize-row input[type="number"], +.odw-filesize-row select { + box-sizing: border-box; + width: 100%; + max-width: 100%; + min-height: var( --odw-field-height ); + padding: 9px 12px; + border: 1px solid var( --odw-color-border ); + border-radius: var( --odw-radius-field ); + background: var( --odw-color-primary-bg ); + color: var( --odw-color-text ); + font-size: var( --odw-font-input ); + line-height: 1.45; + transition: border-color var( --odw-transition ), box-shadow var( --odw-transition ); +} + +.cf-container__tab .cf-field__body textarea { + min-height: 84px; + padding: 10px 12px; +} + +.cf-container__tab .cf-field__body input:focus, +.cf-container__tab .cf-field__body select:focus, +.cf-container__tab .cf-field__body textarea:focus, +.odw-cessda-input:focus, +.odw-filesize-row input[type="number"]:focus, +.odw-filesize-row select:focus { + outline: 0; + border-color: var( --odw-color-primary ); + box-shadow: var( --odw-focus-ring ); +} + +.cf-container__tab .cf-field__body input::placeholder, +.cf-container__tab .cf-field__body textarea::placeholder, +.odw-cessda-input::placeholder { + color: #8a92a3; +} + +/* Das Dateigrößen-Widget hat zwei Felder nebeneinander — die dürfen nicht + beide auf 100 % gehen. */ +.odw-filesize-row input[type="number"] { + width: auto; + flex: 1 1 auto; +} + +.odw-filesize-row select { + width: auto; + flex: 0 0 auto; +} + +/* ------------------------------------------------------------------------- + * Wiederholbare Gruppen als Karten + * + * .cf-complex__group ist ein echter Container in der Carbon-Fields-Ausgabe, + * anders als lose nebeneinanderstehende Felder. Eine Karte ist hier deshalb + * unkompliziert und macht sichtbar, was zusammengehört. + * ------------------------------------------------------------------------- */ + +.cf-complex .cf-complex__group { + border: 1px solid #e4e6eb; + border-radius: var( --odw-radius-card ); + overflow: hidden; + background: var( --odw-color-primary-bg ); + box-shadow: 0 1px 2px rgba( 23, 26, 31, 0.04 ); + margin-bottom: var( --odw-space-2 ); +} + +.cf-complex .cf-complex__group-head { + padding: var( --odw-space-3 ) var( --odw-space-4 ); + background: #f7f8fa; + border-bottom: 1px solid #e4e6eb; + font-size: var( --odw-font-label ); + font-weight: 600; +} + +.cf-complex .cf-complex__group-index { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 22px; + height: 22px; + padding: 0 6px; + border: 1px solid #e4e6eb; + border-radius: 6px; + background: var( --odw-color-primary-bg ); + color: var( --odw-color-text-muted ); + font-size: 12px; + font-weight: 500; + font-variant-numeric: tabular-nums; +} + +.cf-complex .cf-complex__group-body { + padding: var( --odw-space-4 ); + display: grid; + gap: var( --odw-space-4 ); +} + +.cf-complex .cf-complex__group-body > .cf-field { + padding-left: 0; + padding-right: 0; +} + +.cf-complex .cf-complex__inserter-button { + min-height: 38px; + padding: 8px 15px; + border-radius: var( --odw-radius-field ); + font-weight: 500; +} + +/* ------------------------------------------------------------------------- + * Datei-Upload + * + * Steht seit v2.35.8 unmittelbar unter der Zugriffs-URL. Ein eigener, ruhig + * getönter Block macht sichtbar, dass er die Alternative zu dem Feld darüber + * ist und nicht ein weiteres Pflichtfeld daneben. + * ------------------------------------------------------------------------- */ + +.cf-container__tab .odw-file-upload { + padding: var( --odw-space-4 ); + background: #f4f7fa; + border: 1px solid #e4e6eb; + border-radius: var( --odw-radius-card ); +} + +.cf-container__tab .odw-file-preview { + padding: var( --odw-space-3 ) var( --odw-space-4 ); + border-radius: var( --odw-radius-field ); +} + +/* ------------------------------------------------------------------------- + * Abschnitts-Umschalter + * + * Ergänzt die Faltlinie aus v2.35.7 um ruhigere Farbgebung — der graue + * Vollbalken wirkte wie eine Trennlinie, nicht wie eine Schaltfläche. + * ------------------------------------------------------------------------- */ + +.cf-container__tab .odw-section-toggle { + padding: 9px 14px 9px 12px; + background: transparent; + border-radius: var( --odw-radius-field ); + color: var( --odw-color-text-muted ); + transition: background var( --odw-transition ), border-color var( --odw-transition ), color var( --odw-transition ); +} + +.cf-container__tab .odw-section-toggle:hover { + background: #f7f8fa; + border-color: #c9cdd6; + color: var( --odw-color-text ); +} diff --git a/open-data-wizard.php b/open-data-wizard.php index 6b1c8a4..feff1ab 100644 --- a/open-data-wizard.php +++ b/open-data-wizard.php @@ -3,7 +3,7 @@ * Plugin Name: Open Data Wizard * Plugin URI: https://github.com/daimpad/OpenDataWizard * Description: DCAT-AP 3.0 konforme Open Data Metadatenverwaltung für WordPress. Bereitstellung als maschinenlesbarer JSON-LD-Endpoint für offene Daten. - * Version: 2.35.8 + * Version: 2.36.0 * Requires at least: 6.4 * Requires PHP: 8.1 * Author: nozilla @@ -26,7 +26,7 @@ exit; } -define( 'ODW_VERSION', '2.35.8' ); +define( 'ODW_VERSION', '2.36.0' ); define( 'ODW_PLUGIN_DIR', plugin_dir_path( __FILE__ ) ); define( 'ODW_PLUGIN_URL', plugin_dir_url( __FILE__ ) ); define( 'ODW_PLUGIN_FILE', __FILE__ );