feat: changeable global alert + fix: cumulative layout shift

3 files changed, 22 insertions, 14 deletions

diff --git a/assets/js/alert-init.js b/assets/js/alert-init.js
new file mode 100644
index 0000000..af3ac32
--- /dev/null
+++ b/assets/js/alert-init.js
@@ -0,0 +1,5 @@
+Object.keys(localStorage).forEach(function(key) {
+  if (/^global-alert-/.test(key)) {
+    document.documentElement.setAttribute('data-global-alert', 'closed');
+  }
+});
\ No newline at end of file
diff --git a/assets/js/alert.js b/assets/js/alert.js
index 0fb2864..1956103 100644
--- a/assets/js/alert.js
+++ b/assets/js/alert.js
@@ -2,16 +2,19 @@ var announcement = document.getElementById('announcement');
 
 if (announcement !== null) {
 
-  if (localStorage.getItem('announcement') === null ) {
-
-    announcement.classList.remove('d-none');
-
-  }
+  var id = announcement.dataset.id;
+
+  Object.keys(localStorage).forEach(function(key) {
+    if (/^global-alert-/.test(key)) {
+      if (key !== id ) {
+        localStorage.removeItem(key);
+        document.documentElement.removeAttribute('data-global-alert');
+      }
+    }
+  });
 
   announcement.addEventListener('closed.bs.alert', () => {
-
-    localStorage.setItem('announcement', 'closed');
-
+    localStorage.setItem(id, 'closed');
   });
 
-}
+}
\ No newline at end of file
diff --git a/assets/scss/components/_alerts.scss b/assets/scss/components/_alerts.scss
index bce819d..d292339 100644
--- a/assets/scss/components/_alerts.scss
+++ b/assets/scss/components/_alerts.scss
@@ -64,15 +64,11 @@
 
 .alert-dismissible .btn-close {
   position: absolute;
-
-  /*
   top: 50%;
   transform: translateY(-50%);
-  */
-  top: 0.75rem;
   right: 1rem;
   z-index: 2;
-  padding: 0.625rem;
+  padding: 0.5rem;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   background-size: 1.5rem;
   filter: invert(1) grayscale(100%) brightness(200%);
@@ -84,6 +80,10 @@
   }
 }
 
+[data-global-alert="closed"] #announcement {
+  display: none;
+}
+
 .alert code {
   background: darken($beige, 5%);
   color: $black;