Improve cookiebanner.

README.md

@@ -556,7 +556,7 @@ It it recommended to add a link or button to allow users to change their choice.
 
 ```html
 <button class="clearcookieconsent">Cookie settings</button>
-<a src="" class="clearcookieconsent">Cookie settings</a>
+<a href="#" class="clearcookieconsent">Cookie settings</a>
 ```
 
 When a user clickes the button/link the localStorage item "cookieconsent" is cleared and the cookieconsent dialog is shown again.

assets/js/cookieconsent.js

@@ -8,20 +8,20 @@
   const cookieconsent = localStorage.getItem('cookieconsent');
 
   if (cookiebanner && !cookieconsent) {
-    cookiebanner.classList.remove('hidden');
-    cookiebanner.classList.add('js-cookieconsent-open');
+    cookiebanner.hidden = false;
+    cookiebanner.dataset.cookieconsentopen = true;
   }
 
   const cookie_buttons = document.querySelectorAll('button[data-consent]');
   cookie_buttons.forEach(function (button) {
     button.addEventListener('click', function () {
-      if (button.getAttribute('data-consent') === 'true') {
+      if (button.dataset.consent === 'true') {
         localStorage.setItem('cookieconsent', 'accept');
       } else {
         localStorage.setItem('cookieconsent', 'decline');
       }
-      cookiebanner.classList.remove('js-cookieconsent-open');
-      cookiebanner.classList.add('hidden');
+      delete cookiebanner.dataset.cookieconsentopen;
+      cookiebanner.hidden = true;
     });
   });
 
@@ -31,8 +31,8 @@
       e.preventDefault();
       if (cookiebanner && cookieconsent) {
         localStorage.removeItem('cookieconsent');
-        cookiebanner.classList.remove('hidden');
-        cookiebanner.classList.add('js-cookieconsent-open');
+        cookiebanner.hidden = false;
+        cookiebanner.dataset.cookieconsentopen = true;
       }
     });
   });

assets/sass/components/cookieconsent/_cookieconsent.scss

@@ -8,7 +8,7 @@
   position: sticky;
   bottom: 0;
   width: 100%;
-  padding-block-start: .5rem;
+  padding: var(--spacing-xs);
   color: var(--color-warning);
   background-color: var(--color-warning-bg);
   border-block-start: 4px solid var(--color-warning-border);
@@ -16,6 +16,11 @@
   transform: translateY(100vh);
   transition: all 130ms ease-out;
   z-index: 99;
+
+  &__actions {
+    display: flex;
+    gap: .5rem;
+  }
 }
 
 .button {
@@ -28,6 +33,6 @@
   }
 }
 
-.js-cookieconsent-open {
+[data-cookieconsentopen] {
   transform: translateY(0);
 }

layouts/partials/cookieconsent.html

@@ -1,4 +1,4 @@
-<div class="cookieconsent layout__cookieconsent hidden">
+<div class="cookieconsent layout__cookieconsent" hidden>
   <div class="cookieconsent__message">
     {{ i18n "cookieconsent_message" }}
   </div>