ResiLien/portails
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: changeable global alert + fix: cumulative layout shift

Browse Source
This commit is contained in:
Henk Verlinde
2022-01-14 12:14:35 +01:00
parent 7123e6dfae
commit 04a5b32ee5
9 changed files with 35 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/js/alert-init.js Normal file
View File

@ -0,0 +1,5 @@
Object.keys(localStorage).forEach(function(key) {
if (/^global-alert-/.test(key)) {
document.documentElement.setAttribute('data-global-alert', 'closed');
}
});

23
assets/js/alert.js
View File

@ -2,16 +2,19 @@ var announcement = document.getElementById('announcement');
if (announcement !== null) {
if (localStorage.getItem('announcement') === null ) {
announcement.classList.remove('d-none');
}
announcement.addEventListener('closed.bs.alert', () => {
localStorage.setItem('announcement', 'closed');
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(id, 'closed');
});
}

10
assets/scss/components/_alerts.scss
View File

@ -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;