as-ideas / oil

191 stars 56 forks source link

mismatched and unresponsive styling of the Cookie Preference Center #263

Closed kalnode closed 3 years ago

kalnode commented 5 years ago

The CPC (Cookie Preference Center), where the user customizes their cookie settings, appears differently depending on how it's opened, and further is not fully responsive.

Mismatched CPC styling: Case 1 - The user enters the CPC via an optional 'advanced' link in the consent banner they see on their first-visit to the website. Here the CPC is styled in a similar fashion to the main consent banner... a fixed box at the bottom of the screen. It also takes on the dark or light theme as configured in the plugin settings via "theme": "dark".

Case 2 - The user enters the CPC via API call window.AS_OIL.showPreferenceCenter();. What appears is always a light theme, and is always a plain div injection, never a modal like the case 1 CPC.

2a - If called on a specific page, and injected into the page content, it looks ok especially if the page is a typical white-background policy page. On a side note: the "OKAY" button doesn't communicate anything once pressed. Is there success? How do we guide the user to do something after the fact? At least a "Thank you" and home page link, or something?

2b - If called from a custom "Cookie Settings" link at the bottom of every page, among other legal links, as commonly done on many websites... one expects to see a modal appear centered on screen, as many other major cookie managers do. Here the CPC is obviously injected wherever<div id="oil-preference-center"></div> is placed, and in my case I placed it directly after <body>, originally expecting a modal rendering. Instead, the CPC renders as a plain div at the top of my page before content (undesired).

Currently I'm manually styling this as a modal, however I don't want to hack in closing functionality ('X' icon, close button and/or clicking dimmed background).

Responsiveness

Regardless of rendering, the CPC isn't fully mobile optimized. It does breakdown, however for small screens it's still painful to use.

Suggestions: 1 - showPreferenceCenter() should be configurable as to rendering as a modal or plain div injection, should take on the theme of the first-visit banner. The modal should have standard dismiss/close features.

2 - Work on the responsiveness of the CPC, especially for mobile.

3 - A template system so HTML of any banners and CPC can be customized. I feel like restructuring the CPC for my purposes... option for "standard" vs "tabs" view is not enough.