feat: Redesign the [odw_dataset] download card (v2.18.0)

CHANGELOG.md

@@ -7,6 +7,18 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/spec/v2.0.0.ht
 
 ---
 
+## [2.18.0] — 2026-07-09
+
+### 💅 Changed — Download-Card (`[odw_dataset]`) neu gestaltet
+- **Datensatzname groß** oben, rechts daneben ein Link **„Metadaten JSON"** (lädt das JSON-LD herunter).
+- Prominenter **Download-Button** zur bereitgestellten Datei (Download-URL → Mediathek-Datei → Zugriffs-URL).
+- Darunter **bunte Badges** in kleiner Schrift: **Dateiformat · Dateigröße · Lizenz**.
+- **Aufklappbares Accordion** („Alle Metadaten anzeigen") mit **allen angegebenen Metadatenfeldern**
+  (Herausgeber, Beschreibung, Thema, CESSDA, Sprache, Schlagworte, URLs, Format, Zeitraum, Kontakt u. v. m.).
+- Frontend-CSS entsprechend überarbeitet; 18 neue UI-Strings in `en_US` übersetzt.
+
+---
+
 ## [2.17.0] — 2026-07-09
 
 ### ✨ Added

README.md

@@ -7,7 +7,7 @@
 ![PHP Version](https://img.shields.io/badge/PHP-%3E%3D%208.1-8892BF?style=flat-square&logo=php&logoColor=white)
 ![WordPress](https://img.shields.io/badge/WordPress-compatible-21759B?style=flat-square&logo=wordpress&logoColor=white)
 ![DCAT-AP](https://img.shields.io/badge/DCAT--AP-3.0-brightgreen?style=flat-square)
-![Version](https://img.shields.io/badge/Version-2.17.0-brightgreen?style=flat-square)
+![Version](https://img.shields.io/badge/Version-2.18.0-brightgreen?style=flat-square)
 ![PRs Welcome](https://img.shields.io/badge/PRs-willkommen-brightgreen?style=flat-square)
 
 📖 [Dokumentation](DOCUMENTATION.md) · 📐 [Technische Spezifikation](TECHNICAL-SPEC.md) · 📝 [Changelog](CHANGELOG.md) · 🛡️ [Security](SECURITY.md) · ⚖️ [Lizenz](LICENSE)

assets/css/frontend.css

@@ -1,161 +1,166 @@
 /**
  * Open Data Wizard — Frontend Styles (Download-Card)
  *
- * Nur strukturelle Styles (Abstände, Layout, Rahmen).
- * Farben und Schriften werden vom aktiven Theme geerbt.
+ * Aufbau: Name groß + „Metadaten JSON" rechts · Download-Button · bunte Badges
+ * (Format/Größe/Lizenz) · Accordion mit allen Metadatenfeldern.
+ *
+ * Struktur erbt Theme-Farben (currentColor); die Badges und der Download-Button
+ * verwenden bewusst eigene Akzentfarben, damit sie „bunt" hervorstechen.
  */
 
-/* =========================================================================
-   Download-Card
-   ========================================================================= */
-
 .odw-download-card {
-    border: 1px solid currentColor;
-    border-radius: 4px;
-    padding: 1.25rem;
+    border: 1px solid rgba(128, 128, 128, 0.35);
+    border-radius: 8px;
+    padding: 1.25rem 1.4rem;
     margin: 1.5rem 0;
-    opacity: 0.99; /* Stacking context für border-color inherit */
 }
 
-/* Header: Titel + Thema-Badge nebeneinander */
-.odw-download-card__header {
+/* --- Kopf: Titel groß + Metadaten-JSON-Link rechts --- */
+.odw-download-card__top {
     display: flex;
     flex-wrap: wrap;
-    align-items: flex-start;
+    align-items: baseline;
     justify-content: space-between;
-    gap: 0.5rem 0.75rem;
-    margin-bottom: 0.875rem;
+    gap: 0.4rem 1rem;
+    margin-bottom: 1rem;
 }
 
 .odw-download-card__title {
     margin: 0;
-    font-size: 1.1em;
-    font-weight: 600;
-    line-height: 1.3;
+    font-size: 1.6em;
+    font-weight: 700;
+    line-height: 1.25;
     flex: 1 1 auto;
 }
 
-.odw-download-card__theme {
+.odw-download-card__metajson {
     flex-shrink: 0;
-    display: inline-block;
-    padding: 0.2em 0.65em;
-    border: 1px solid currentColor;
-    border-radius: 99px;
-    font-size: 0.8em;
-    opacity: 0.65;
+    font-size: 0.82em;
+    text-decoration: none;
+    opacity: 0.75;
     white-space: nowrap;
 }
 
-/* Metadaten-Liste */
-.odw-download-card__meta {
-    display: grid;
-    grid-template-columns: max-content 1fr;
-    gap: 0.3rem 1rem;
-    margin: 0 0 1rem;
-    padding: 0;
-    font-size: 0.9em;
-}
-
-.odw-download-card__meta-row {
-    display: contents;
+.odw-download-card__metajson:hover {
+    opacity: 1;
+    text-decoration: underline;
 }
 
-.odw-download-card__meta dt {
-    font-weight: 500;
-    opacity: 0.65;
+/* --- Download-Button (Akzent) --- */
+.odw-download-card__download {
+    display: inline-block;
+    padding: 0.6em 1.4em;
+    background: #2563eb;
+    color: #fff;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 1em;
+    text-decoration: none;
+    line-height: 1.3;
+    transition: background 0.15s ease;
 }
 
-.odw-download-card__meta dd {
-    margin: 0;
+.odw-download-card__download:hover,
+.odw-download-card__download:focus {
+    background: #1d4ed8;
+    color: #fff;
 }
 
-/* Footer: Download-Button + Datei-Info */
-.odw-download-card__footer {
+/* --- Bunte Badges: Format · Größe · Lizenz --- */
+.odw-download-card__badges {
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
-    gap: 0.625rem;
-    padding-top: 0.875rem;
-    border-top: 1px solid currentColor;
-    opacity: inherit;
+    gap: 0.4rem;
+    margin: 0.9rem 0 0;
 }
 
-.odw-download-card__button {
+.odw-badge {
     display: inline-block;
-    padding: 0.45em 1.1em;
-    border: 1px solid currentColor;
-    border-radius: 3px;
+    padding: 0.2em 0.7em;
+    border-radius: 99px;
+    font-size: 0.78em;
     font-weight: 600;
-    font-size: 0.9em;
-    text-decoration: none;
-    line-height: 1.4;
+    line-height: 1.5;
 }
 
-.odw-download-card__button:hover {
-    opacity: 0.8;
-}
+.odw-badge--format  { background: #e7f0fd; color: #1c4e80; }
+.odw-badge--size    { background: #e6f4ea; color: #1a7f37; }
+.odw-badge--license { background: #fdf3e2; color: #8a5a00; }
 
-.odw-download-card__file-info {
-    font-size: 0.85em;
-    opacity: 0.65;
+/* --- Accordion mit allen Metadatenfeldern --- */
+.odw-download-card__details {
+    margin-top: 1.1rem;
+    border-top: 1px solid rgba(128, 128, 128, 0.25);
+    padding-top: 0.75rem;
 }
 
-.odw-download-card__button--meta {
-    margin-left: auto;
-    font-weight: normal;
-    opacity: 0.75;
-    font-size: 0.85em;
+.odw-download-card__details summary {
+    cursor: pointer;
+    font-size: 0.9em;
+    font-weight: 600;
+    opacity: 0.85;
+    list-style-position: inside;
 }
 
-.odw-download-card__button--meta:hover {
+.odw-download-card__details summary:hover {
     opacity: 1;
 }
 
-/* Keywords */
-.odw-download-card__keywords {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.35rem;
-    margin-bottom: 1rem;
+.odw-download-card__details[open] summary {
+    margin-bottom: 0.75rem;
 }
 
-.odw-download-card__keyword {
-    display: inline-block;
-    padding: 0.15em 0.6em;
-    border: 1px solid currentColor;
-    border-radius: 99px;
-    font-size: 0.8em;
+.odw-download-card__metalist {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: 0.45rem 1.1rem;
+    margin: 0;
+    font-size: 0.9em;
+}
+
+.odw-metarow {
+    display: contents;
+}
+
+.odw-download-card__metalist dt {
+    font-weight: 600;
     opacity: 0.6;
 }
 
+.odw-download-card__metalist dd {
+    margin: 0;
+    word-break: break-word;
+}
+
+.odw-download-card__metalist a {
+    word-break: break-all;
+}
+
 /* =========================================================================
    Responsive
    ========================================================================= */
 
 @media screen and (max-width: 480px) {
-    .odw-download-card__header {
-        flex-direction: column;
-    }
-
-    .odw-download-card__meta {
-        grid-template-columns: 1fr;
-        gap: 0;
+    .odw-download-card__title {
+        font-size: 1.35em;
     }
 
-    .odw-download-card__meta-row {
+    .odw-download-card__download {
         display: block;
-        margin-bottom: 0.4rem;
+        text-align: center;
     }
 
-    .odw-download-card__meta dt {
-        display: inline;
+    .odw-download-card__metalist {
+        grid-template-columns: 1fr;
+        gap: 0;
     }
 
-    .odw-download-card__meta dt::after {
-        content: ': ';
+    .odw-metarow {
+        display: block;
+        margin-bottom: 0.5rem;
     }
 
-    .odw-download-card__meta dd {
-        display: inline;
+    .odw-download-card__metalist dt {
+        display: block;
     }
 }