Ergänzt AJAX-Livesuche für Seiten, Beiträge und Mediathek

templates/admin/media-results.html.twig

@@ -0,0 +1,59 @@
+<div class="section-head">
+    <h2>{{ archived ? 'Alle Bilder einschließlich Archiv' : 'Bilder' }} <span class="count">{{ library.total }}</span></h2>
+    <span class="muted">{{ library.total ? (library.page - 1) * library.perPage + 1 : 0 }}–{{ min(library.page * library.perPage, library.total) }} von {{ library.total }}</span>
+</div>
+
+{% if library.items is empty %}
+<div class="empty">
+    <h3>{{ query ? 'Keine passenden Bilder.' : (archived ? 'Keine Bilder vorhanden.' : 'Keine Bilder in der Mediathek.') }}</h3>
+    <p>{{ query ? 'Ändere oder leere die Suche.' : (is_granted('ROLE_EDITOR') ? 'Lade oben dein erstes Bild hoch.' : 'Ein Redakteur kann Bilder hochladen.') }}</p>
+</div>
+{% else %}
+<ul class="library-grid">
+    {% for item in library.items %}
+    <li class="library-tile">
+        {# The smallest variant is the thumbnail; the largest opens in a new tab. #}
+        <a href="{{ (item.variants|last).src }}" target="_blank" rel="noopener" aria-label="{{ item.title }} in Originalgröße öffnen">
+            <img src="{{ (item.variants|first).src }}" alt="" loading="lazy" width="{{ (item.variants|first).width }}" height="{{ (item.variants|first).height }}">
+        </a>
+        <div class="library-body">
+            <strong>{{ item.title }}</strong>
+            <span class="muted">{{ (item.variants|last).width }} × {{ (item.variants|last).height }} px{% if item.archived %} · archiviert{% endif %}</span>
+            <span class="muted">{{ item.alt ? 'Alternativtext gesetzt' : 'Kein Alternativtext' }}</span>
+            <code>{{ item.id }}</code>
+        </div>
+        {% if is_granted('ROLE_EDITOR') %}
+        <details class="sheet">
+            <summary aria-label="Angaben zu {{ item.title }}">Angaben</summary>
+            <div class="sheet-body">
+                <form action="{{ path('admin_media_save', {id: item.id}) }}" method="post">
+                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('media-form') }}">
+                    <input type="hidden" name="version" value="{{ item.version }}">
+                    <input type="hidden" name="seite" value="{{ library.page }}"><input type="hidden" name="q" value="{{ query }}">
+                    <input type="hidden" name="archiv" value="{{ archived ? '1' : '' }}">
+                    <label for="title-{{ item.id }}">Bildtitel</label>
+                    <input id="title-{{ item.id }}" name="title" maxlength="160" required value="{{ item.title }}">
+                    <label for="alt-{{ item.id }}">Alternativtext</label>
+                    <textarea id="alt-{{ item.id }}" name="alt" maxlength="300" rows="2">{{ item.alt }}</textarea>
+                    <p class="field-help">Beschreibt, was zu sehen ist. Das ist, was Menschen mit Screenreader vom Bild haben. Bei rein dekorativen Bildern leer lassen.</p>
+                    <label class="check-label" for="archived-{{ item.id }}"><input id="archived-{{ item.id }}" name="archived" type="checkbox" value="1"{{ item.archived ? ' checked' : '' }}> Archiviert</label>
+                    <p class="field-help">Archivierte Bilder erscheinen nicht mehr in der Auswahl, bleiben aber ausgeliefert – eine Seite, die das Bild verwendet, verliert es nicht.</p>
+                    <button class="primary" type="submit">Angaben speichern</button>
+                </form>
+            </div>
+        </details>
+        {% endif %}
+    </li>
+    {% endfor %}
+</ul>
+
+{% if library.pages > 1 %}
+<nav class="pager" aria-label="Seiten der Mediathek">
+    {% if library.page > 1 %}<a class="secondary" href="{{ path('admin_media', {seite: library.page - 1, archiv: archived ? 1 : null, q: query}) }}" rel="prev"><span aria-hidden="true">←</span> Neuere</a>{% endif %}
+    <span class="muted">Seite {{ library.page }} von {{ library.pages }} · {{ library.total }} Bilder</span>
+    {% if library.page < library.pages %}<a class="secondary" href="{{ path('admin_media', {seite: library.page + 1, archiv: archived ? 1 : null, q: query}) }}" rel="next">Ältere <span aria-hidden="true">→</span></a>{% endif %}
+</nav>
+{% endif %}
+{% endif %}
+
+<p class="footnote">KantSites · Arbeitsstand</p>