search

OFFLINE-GmbH / oc-gdpr-plugin

October CMS plugin to make websites GDPR and ePrivacy compliant
https://octobercms.com/plugin/offline-gdpr
MIT License
36 stars 20 forks source link

Re-Code The CSS for The Banner and Cookie Manager #26

Closed ghost closed 6 years ago

ghost commented 6 years ago

Gonna do a Pull Request to update the CSS to work on all Browsers with the added prefix and also create min files to add to the updated doc's at a later date.

CptMeatball commented 6 years ago

Might also be a good idea tot look at general styling of the elements.

There's a min-height on the cookiesmanager for example that's not really necessary I think.

ghost commented 6 years ago

CSS on Banner won't pass basic Web Accessibility standards! Gonna have to throw it in the bin and re-code it properly!

ghost commented 6 years ago

@CptMeatball I will check that as well. Probably lots of issues there as well.

ghost commented 6 years ago

Example on Mobile Device:

untitled

~Best to throw in bin and do it correctly!!!

tobias-kuendig commented 6 years ago

Best to throw in bin and do it correctly!!!

Thank you for these kind words.

Did you add the viewport meta-tag?

<meta name="viewport" content="width=device-width, initial-scale=1">

This is the correct mobile view of the banner:

image

ghost commented 6 years ago

@tobias-kuendig Hi, sorry for my words and yes I did use the viewport tag. But the current CSS will completely fail if you throw it into Lighthouse for example, I strongly do not recommend anyone use the current css and I will do a major update to it today and correct all the errors! That is why I say throw it in bin, as I recommend users to not use the current version!

~Anyway leave it with me I will work on this today.

ghost commented 6 years ago

Old vs New Design: (One on right is easy to read on small device)

mobile

CptMeatball commented 6 years ago

I actually prefer the left one. Also, design is something that probably is different across websites.

The gradient buttons on the new design are not really in sync with the current design trends and I'm also not that fond of the yellow.

The old design seems a bit a cleaner.

tobias-kuendig commented 6 years ago

Thank you @ayumihamsaki for updating the CSS.

I will remove the gradients and clean up the design a bit. I tried to keep the design as simple as possible and make it easy for the enduser to adjust it to the site's design.

Using solid background colors removes the need for vendor prefixes. I don't know what versions of browsers you were targeting but I may also remove some other vendor prefixes like box-shadow and transition since theses properties had good browser support for many month now.