kantarciandClaude Fable 5.1
0bdcc7f90e
The back-to-top button was hidden as long as the consent question was open, on every device - and on a phone the question tends to stay open. Instead of `display:none` it now anchors itself 12px above the bar wherever the bar covers its corner: below 800px for the centred card, at every width for the full-width bar and the corner card. Browsers without anchor positioning keep hiding it there. The bar renders before the button so it can be an anchor, and the reserved bottom padding grows to 320px below 620px, where the bar with its default text is up to 299px tall. The notice itself gets a face. Settings → Einwilligung now carries layout (card, bar, corner), shape (soft, round, square - one setting for the box and its buttons), a heading and four colours, each as #hex or @palette key. `Theme::cssColor()` resolves both, replacing the copy inside the back-to-top code; `Consent::styles()` writes the values as `--kant-consent-*` into the hashed style block. The base layout changes with it: an accent stripe and shield icon, equal-width buttons, a disclosure with a chevron, underlined legal links, a two-column bar on wide screens. Declining stays an outlined button of the same size next to accepting. The archive and the consent page carry the same variables - the archive had no palette at all until now. In the editor, rows with an own value are labelled in orange rather than bold with a dot; the device chips sit 6px apart with the focus ring inside the gap. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
41 lines
2.8 KiB
Twig
41 lines
2.8 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>
|
|
<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>
|
|
<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>
|
|
</form>
|
|
</section>
|