.cc-active-für HTML-Tag

[Anke]

Hallo,

auf mobilen Endgeräten kommt es leicht zu Überschneidungen der drei absolut positionierten Elemente (input, label, button). Für uns habe ich das angepasst, aber wäre da nicht generell eine Flexbox-Anordnung eleganter?

Einen kleinen feature request hätte ich noch: Wenn die Klasse cc-active auch dem HTML-Tag zugewiesen würde, könnte man mit einem overflow:hidden das Scrollen der Website unter dem Overlay verhindern, was vor allem auf mobilen Endgeräten vorteilhaft wäre.

Viele Grüße, Anke

[doishub]

Hallo Anke,

wann und wie genau überschneiden sich die Button? Ich schätze Du verwendest das Template cookiebar_simple? Ich kann das leider nicht reproduzieren, da unter einer Breite von 768px alle Button auf volle Breite und untereinander dargestellt werden.

Einen kleinen feature request hätte ich noch: Wenn die Klasse cc-active auch dem HTML-Tag zugewiesen würde, könnte man mit einem overflow:hidden das Scrollen der Website unter dem Overlay verhindern, was vor allem auf mobilen Endgeräten vorteilhaft wäre.

Reicht für diesen Fall nicht die Auswahl "Blockierend" in der Konfiguration? Sollte die Cookiebar selber nicht größer als der Viewport sein, kann natürlich auch hier der Hintergrund gescrollt werden. Vielleicht wäre es sinnvoll das scrollen ausschließlich in diesem Modus zu verhindern, sodass nicht selber auf eine Klasse geprüft werden muss.

[Anke]

Hallöchen!

Es geht nicht um die Speicherbuttons, sondern um die Zeile, in der man Cookies de-/aktivieren kann. Nachfolgend links ein Screenshot der Standardvariante, rechts für Mobilgeräte etwas nachgebessert:

Auf dieser Website ist die Cookiebar größer als der Viewport, deshalb ist Scrollen auf Handys unerlässlich. Und da bewegt sich der Hintergrund automatisch mit und es kommt meist noch zu "Hüpfern", ein Phänomen, das auf vielen Websites zu sehen und unschön ist.

Wenn im HTML-Tag die Klasse cc-active vorhanden wäre, solange das Cookiebar-Overlay offen ist, könnte ich html.cc-active {overflow:hidden} setzen, um den Hintergrund stillzulegen. Eure Option "Blockierend" legt, glaube ich, nur das Overlay drüber, jedenfalls ändert es nicht das Scrollverhalten.

[doishub]

Das mit den Cookie-Gruppen schaue ich mir an. 👍

Eure Option "Blockierend" legt, glaube ich, nur das Overlay drüber, jedenfalls ändert es nicht das Scrollverhalten.

Ja das ist richtig. Im Hintergrund würde dennoch gescrollt werden können (auf Touch-Geräten), andere Interaktionen wären hier jedoch nicht möglich.

Ich sehe leider noch ein Problem mit der CSS-Klassen-Variante in Verbindung mit overflow: hidden;. Durch Browser-Erweiterungen wie "I don't care about cookies" würde die Cookiebar nicht angezeigt werden, weswegen auch eine Interaktion mit dieser nicht mehr möglich ist und die CSS-Klasse somit niemals entfernt werden würde um das Scrollen wieder freizugeben. Im Umkehrschluss würden Besucher mit einer solchen Erweiterung nicht mehr korrekt auf der Seite surfen können.

[Anke]

Ich sehe leider noch ein Problem mit der CSS-Klassen-Variante in Verbindung mit overflow: hidden;. Durch Browser-Erweiterungen wie "I don't care about cookies" würde die Cookiebar nicht angezeigt werden, weswegen auch eine Interaktion mit dieser nicht mehr möglich ist und die CSS-Klasse somit niemals entfernt werden würde um das Scrollen wieder freizugeben. Im Umkehrschluss würden Besucher mit einer solchen Erweiterung nicht mehr korrekt auf der Seite surfen können.

Diese Erweiterung kenne ich nicht, das ist natürlich blöd...

BTW: Kennt ihr diesen Banner? https://www.bike-components.de/ Wir finde den sehr ansprechend; werde gelegentlich ausprobieren, wieviel gestalterische Freiheit eure Erweiterung bietet :-), obwohl bei den Bikern ja das nette "Dankeschön" am Ende noch ein i-Tüpfelchen ist.

[doishub]

Diese Erweiterung kenne ich nicht, das ist natürlich blöd...

Ggf. könnten wir eine Methode zur Verfügung stellen (ähnlich wie addModule), welche es erlaubt, beim öffnen und schließen eigenen JS-Code auszuführen. Hier könnte dann sowas wie document.body.style.overflowY="hidden"; verwendet werden, um das Verhalten abzubilden. Da es jedoch solche Erweiterungen gibt und diese mehr und mehr an Beliebtheit gewinnen, würde ich davon abraten.

BTW: Kennt ihr diesen Banner?

Den kannte ich auch noch nicht - Ist auf jeden Fall mal etwas anderes. :)

Gestalterisch sollte da nichts gegen sprechen. Ich empfehle aber definitiv, die _cookiebar.scss-Datei als Grundlage zu verwenden, da hier bereits alle notwendigen Stile wie Ausrichtung, Animationen und Verhalten auf mobilen Endgeräten definiert sind.

[Anke]

Das mache ich, Dank für den Hinweis.

Für den Fall, dass ich dich nicht zu sehr von der Arbeit abhalte: Wäre es theoretisch möglich, den CookieConsent-Dialog optional auf eine normale Contao-Seite zu setzen? Also Seite statt Popup/Lightbox/Overlay? Ist nur ein kleines Gedankenspiel und hätte durchaus auch ein paar attrakltive Vorteile, wenn das Ganze Brumborium schon sein muss, wie z.B. mehr Platz für eine freundliche, "website-integrierte" Ansprache der Besucher und dass solche I don't care about Cookies Erweiterungen vllt ins Leere liefen ... Es ist zwar jedermanns Recht, die Dialoge auszublenden, andererseits hat man als Websitebtreiber ja ggf. eine Nachweispflicht.

[doishub]

Du meinst ein Modul, welches die "Cookiebar" an beliebiger Position auf einer Seite platziert? Wäre durchaus denkbar und dürfte beauftragt werden 😉

Bzgl. der Nachweispflicht sollte es hier meiner Meinung nach keine Probleme geben, da die Cookiebar keine Dienste aktiviert, wenn der User diesen nicht zugestimmt hat. Wenn die Cookiebar über solche Erweiterungen wie "I dont care..." einfach ausgeblendet wird, werden auch keine Dienste ausgespielt, sodass m.E. kein Nachweis stattfinden muss.

[doishub]

auf mobilen Endgeräten kommt es leicht zu Überschneidungen der drei absolut positionierten Elemente (input, label, button). Für uns habe ich das angepasst, aber wäre da nicht generell eine Flexbox-Anordnung eleganter?

Angepasst in 1.9.1

[doishub]

Hallo Anke, ich habe soeben CustomEvents erstellt (1.9.2), mit denen Du das Scrollen selber unterbinden könntest. Das könnte dann so aussehen:

window.addEventListener('cookiebar_init', function (e) {
    if(e.detail.visibility) {
        document.body.style.overflowY = 'hidden';
    }
}, false);

window.addEventListener('cookiebar_save', function (e) {
    document.body.style.overflowY = 'auto';
}, false);

[Anke]

Okay... Vielen Dank für die CustomEvents! Das kommt mir (JS-Laie) allerdings etwas überdimensioniert vor. Ich wollte ja nur, dass das Skript die Klasse .cc-active dem Cookiebar-Container UND dem HTML-Tag hinzufügt/entfernt.

[doishub]

Dann versuch es hiermit ;)

window.addEventListener('cookiebar_init', function (e) {
    if(e.detail.visibility) {
        document.body.classList.add('cc-active');
    }
}, false);

window.addEventListener('cookiebar_save', function (e) {
    document.body.classList.remove('cc-active');
}, false);