Unverified Commit aaef8824 authored by Henk Verlinde's avatar Henk Verlinde Committed by GitHub
Browse files

Merge pull request #613 from h-enk/global-alert 

feat: changeable global alert + fix: cumulative layout shift
parents 7123e6df 1c41ccd5

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/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',

layouts/index.headers

+1 −1
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ 
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

  X-Content-Type-Options: nosniff

  X-XSS-Protection: 1; mode=block

  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; img-src 'self' https://*.netlify.app data:; script-src 'self' https://*.netlify.app 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg=='; style-src 'self' https://*.netlify.app 'unsafe-inline'

  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; img-src 'self' https://*.netlify.app data:; script-src 'self' https://*.netlify.app 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg==' 'sha256-aWZ3y/RxbBYKHXH0z8+8ljrHG1mSBvyzSfxSMjBSaXk='; style-src 'self' https://*.netlify.app 'unsafe-inline'

  X-Frame-Options: SAMEORIGIN

  Referrer-Policy: strict-origin

  Feature-Policy: geolocation 'self'