kantarciandClaude Fable 5.1
0aa1ff6d3e
"Einzeln wählen" sits on the left and the legal links on the right, on one baseline; opened, the disclosure takes the full width and the links move below it, right-aligned. `.consent-bar p` outranked `.consent-links` and took the right margin away, so the links selector now carries the element. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
47 lines
3.1 KiB
Twig
47 lines
3.1 KiB
Twig
{# The consent question, rendered by the server and answered by a form.
|
|
|
|
No JavaScript: the public pages run with script-src 'none' by default, and a banner that needs
|
|
a script would be the one thing that breaks that. Accepting and refusing are the same kind of
|
|
button, next to each other, with the same weight - a refusal hidden behind a link would not be
|
|
a free choice. The per-group selection sits in a disclosure so the first view stays readable.
|
|
|
|
Anordnung, Form, Farben und Ueberschrift kommen aus den Einstellungen: die Anordnung als
|
|
Klasse, der Rest als Variablen im Kopf der Seite (Consent::styles). #}
|
|
<section class="consent-bar consent-layout-{{ consent.layout|default('karte') }}" role="region" aria-labelledby="consent-heading">
|
|
<div class="consent-body">
|
|
<h2 id="consent-heading"><svg class="consent-icon" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3 5 6v6c0 4.4 2.9 7.9 7 9 4.1-1.1 7-4.6 7-9V6Zm-2.5 9 2 2 4-4.5"/></svg><span>{{ consent.title|default('') ?: 'Externe Inhalte und Einwilligung' }}</span></h2>
|
|
<p>{{ consent.text ?: 'Diese Website lädt bestimmte Inhalte erst, wenn du zustimmst. Ohne Zustimmung wird die Seite vollständig angezeigt, nur eingebettete Inhalte anderer Anbieter bleiben leer.' }}</p>
|
|
</div>
|
|
<form method="post" action="{{ path('consent_save') }}" class="consent-form">
|
|
<input type="hidden" name="back" value="{{ back }}">
|
|
<div class="consent-actions">
|
|
<button class="consent-button consent-accept" type="submit" name="choice" value="all">Alle akzeptieren</button>
|
|
<button class="consent-button consent-decline" type="submit" name="choice" value="none">Nur notwendige</button>
|
|
</div>
|
|
{# Eine Zeile: links die Einzelwahl, rechts die Rechtslinks. Aufgeklappt nimmt die
|
|
Einzelwahl die ganze Breite, die Links rutschen darunter. #}
|
|
<div class="consent-foot">
|
|
<details class="consent-details">
|
|
<summary>Einzeln wählen</summary>
|
|
<ul class="consent-groups">
|
|
{% for group in consent.groups %}
|
|
<li>
|
|
<label for="consent-{{ group.key }}">
|
|
<input id="consent-{{ group.key }}" type="checkbox" name="groups[]" value="{{ group.key }}"{{ group.granted ? ' checked' : '' }}>
|
|
<span><strong>{{ group.name }}</strong> {{ group.help }}</span>
|
|
</label>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<button class="consent-button consent-choice" type="submit" name="choice" value="some">Auswahl speichern</button>
|
|
</details>
|
|
{% if consent.privacyPath or consent.imprintPath %}
|
|
<p class="consent-links">
|
|
{% if consent.privacyPath %}<a href="/{{ consent.privacyPath }}">Datenschutz</a>{% endif %}
|
|
{% if consent.imprintPath %}<a href="/{{ consent.imprintPath }}">Impressum</a>{% endif %}
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</section>
|