Commit 04a5b32e authored by Henk Verlinde's avatar Henk Verlinde
Browse files

feat: changeable global alert + fix: cumulative layout shift

parent 7123e6df

assets/js/alert-init.js

0 → 100644
+5 −0
Original line number Diff line number Diff line 
Object.keys(localStorage).forEach(function(key) {

  if (/^global-alert-/.test(key)) {

    document.documentElement.setAttribute('data-global-alert', 'closed');

  }

});
 
 No newline at end of file

assets/js/alert.js

+12 −9
Original line number Diff line number Diff line
@@ -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

assets/scss/components/_alerts.scss

+5 −5
Original line number Diff line number Diff line
@@ -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;

config/_default/params.toml

+1 −1
Original line number Diff line number Diff line
@@ -60,7 +60,7 @@ footer = "Powered by <a href=\"https://www.netlify.com/\">Netlify</a>, <a href=\ 
copyRight = "Copyright (c) 2020-2021 Henk Verlinde"



# Alert

alert = false

alert = true

alertDismissable = true

# alertText = "Introducing the Doks child theme, several DX + UX updates, and more! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\" target=\"_blank\" rel=\"noopener\">Check out Doks v0.2</a>"

alertText = "Introducing the Doks child theme, several DX + UX updates, and more! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\">Check out Doks v0.2</a>"

config/postcss.config.js

+1 −0
Original line number Diff line number Diff line
@@ -21,6 +21,7 @@ module.exports = { 
        'h5',

        'alert-link',

        ...whitelister([

          './assets/scss/components/_alerts.scss',

          './assets/scss/components/_buttons.scss',

          './assets/scss/components/_code.scss',

          './assets/scss/components/_diagrams.scss',