Make the consent notice styleable and keep the back-to-top button reachable in 1.14.1
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>
This commit is contained in:
1 parent
860bed9199
commit
0bdcc7f90e
18 files changed
+300
-56
No files matched your search
+40
-1
@@ -3475,7 +3475,8 @@ final class CmsTest extends TestCase
|
||||
self::assertStringNotContainsString('#2c6b4f', $site, 'Der Einwilligungsdialog nimmt die Farbe der Website.');
|
||||
// Und er lässt sich eigens färben: eine Palettenfarbe mit dem Schlüssel „consent“ gewinnt
|
||||
// über die Primärfarbe, ohne dass es dafür eine weitere Einstellung braucht.
|
||||
self::assertStringContainsString('background:var(--k-consent,var(--accent))', $site);
|
||||
// Der Palettenschlüssel `consent` bleibt die Zwischenstufe hinter der eigenen Einstellung.
|
||||
self::assertStringContainsString('background:var(--kant-consent-accent,var(--k-consent,var(--accent)))', $site);
|
||||
self::assertStringNotContainsString('outline:3px solid #b85c12', $site, 'Auch der Fokusring folgt der Palette.');
|
||||
}
|
||||
|
||||
@@ -3910,6 +3911,44 @@ Achern']);
|
||||
self::assertSame(404, $this->request('/einwilligung')->getStatusCode());
|
||||
}
|
||||
|
||||
public function testTheConsentQuestionTakesLayoutShapeAndColoursFromTheSettings(): void
|
||||
{
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', DemoContent::pages()['home'], 0), 1);
|
||||
$this->askConsent();
|
||||
|
||||
// Standard: Karte, abgerundet, Themefarben - im Kopf stehen nur die Radien.
|
||||
$html = $this->request('/')->getContent();
|
||||
self::assertStringContainsString('consent-layout-karte', $html);
|
||||
self::assertStringContainsString('--kant-consent-radius:18px;--kant-consent-button-radius:10px', $html);
|
||||
self::assertStringNotContainsString('--kant-consent-bg', $html);
|
||||
self::assertStringContainsString('Externe Inhalte und Einwilligung', $html);
|
||||
|
||||
// Eigene Werte: Palette wird zur Variablen, ein unbekannter Schlüssel fällt weg statt
|
||||
// auf nichts zu zeigen, die Überschrift steht escaped im Markup.
|
||||
$this->site->save(['homePath' => 'home', 'consentBanner' => '1', 'consentGroups' => ['external'], 'privacyPath' => 'datenschutz',
|
||||
'consentLayout' => 'leiste', 'consentShape' => 'rund', 'consentTitle' => 'Cookies & Co.',
|
||||
'consentColor' => '#101820', 'consentInk' => '#ffffff', 'consentAccent' => '@ink', 'consentAccentInk' => '@nope']);
|
||||
$response = $this->request('/');
|
||||
$html = $response->getContent();
|
||||
self::assertStringContainsString('consent-layout-leiste', $html);
|
||||
self::assertStringContainsString('--kant-consent-radius:28px;--kant-consent-button-radius:999px;--kant-consent-bg:#101820;--kant-consent-ink:#ffffff;--kant-consent-accent:var(--k-ink)}', $html);
|
||||
self::assertStringNotContainsString('--kant-consent-accent-ink', $html);
|
||||
self::assertStringContainsString('Cookies & Co.', $html);
|
||||
self::assertStringContainsString("style-src 'self' 'sha256-", (string) $response->headers->get('Content-Security-Policy'));
|
||||
|
||||
// Die Einwilligungsseite trägt dieselben Werte, erlaubt per Hash und sonst nichts.
|
||||
$page = $this->request('/einwilligung');
|
||||
self::assertSame(200, $page->getStatusCode());
|
||||
self::assertStringContainsString('--kant-consent-bg:#101820', $page->getContent());
|
||||
$policy = (string) $page->headers->get('Content-Security-Policy');
|
||||
self::assertStringContainsString("style-src 'self' 'sha256-", $policy);
|
||||
self::assertStringContainsString("script-src 'none'", $policy);
|
||||
|
||||
// Eine Farbe, die weder Hex noch Palettenschlüssel ist, wird nicht gespeichert.
|
||||
$this->expectException(InvalidPage::class);
|
||||
$this->site->save(['homePath' => 'home', 'consentBanner' => '1', 'consentGroups' => ['external'], 'privacyPath' => 'datenschutz', 'consentColor' => 'red']);
|
||||
}
|
||||
|
||||
public function testTheQuestionAppearsUntilItIsAnsweredAndCanBeChangedAgain(): void
|
||||
{
|
||||
$document = DemoContent::pages()['home'];
|
||||
|
||||
Reference in new issue
Block a user