fix notification button for medium screen size (right aside collapsed)

This commit is contained in:
Mario
2025-05-03 09:41:41 +00:00
parent 261f0e4120
commit 3653f769d9
2 changed files with 30 additions and 30 deletions

View File

@@ -53,7 +53,7 @@ document.addEventListener('DOMContentLoaded', function () {
testElem.style.display = 'none';
testElem.id = 'css3-calc';
document.body.appendChild(testElem);
if (testElem.offsetWidth === 10) {
window.addEventListener('resize', function () {
if (window.innerWidth < 992) {
@@ -134,17 +134,6 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
document.querySelectorAll('.notifications-btn').forEach(function (element) {
element.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
let navCollapse = document.getElementById('navbar-collapse-2');
if (navCollapse && navCollapse.classList.contains('show')) {
navCollapse.classList.remove('show');
}
});
});
$("input[data-role=cat-tagsinput]").tagsinput({
tagClass: 'badge rounded-pill bg-warning text-dark'
});

View File

@@ -10,26 +10,31 @@
document.addEventListener("DOMContentLoaded", function() {
let notificationsWrapper = document.getElementById('notifications_wrapper');
let notificationsParent = notificationsWrapper ? notificationsWrapper.parentElement.id : null;
let notificationsBtn = document.querySelector('.notifications-btn');
let notificationsBtn = document.querySelectorAll('.notifications-btn');
// Event listener for notifications button
if (notificationsBtn) {
notificationsBtn.addEventListener('click', function() {
// Remove the 'd-none' class to show the notifications wrapper
notificationsWrapper.classList.remove('d-none');
notificationsBtn.forEach(function (element) {
element.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
// Check if the notifications wrapper has the 'fs' class
if (notificationsWrapper.classList.contains('fs')) {
// Prepend the notifications wrapper back to its original parent and hide it
document.getElementById(notificationsParent).appendChild(notificationsWrapper);
notificationsWrapper.classList.add('d-none');
} else {
// Otherwise, prepend the notifications wrapper to 'main'
document.querySelector('main').prepend(notificationsWrapper);
}
// Remove the 'd-none' class to show the notifications wrapper
notificationsWrapper.classList.remove('d-none');
// Toggle the 'fs' class
notificationsWrapper.classList.toggle('fs');
// Check if the notifications wrapper has the 'fs' class
if (notificationsWrapper.classList.contains('fs')) {
// Prepend the notifications wrapper back to its original parent and hide it
document.getElementById(notificationsParent).appendChild(notificationsWrapper);
notificationsWrapper.classList.add('d-none');
} else {
// Otherwise, prepend the notifications wrapper to 'main'
document.querySelector('main').prepend(notificationsWrapper);
}
// Toggle the 'fs' class
notificationsWrapper.classList.toggle('fs');
});
});
}
@@ -621,17 +626,23 @@
}
// Update visibility of notification button and sections
let notificationsBtn = document.querySelector('.notifications-btn');
let notificationsBtn = document.querySelectorAll('.notifications-btn');
let noNotifications = document.querySelector('#no_notifications');
let notifications = document.querySelector('#notifications');
let navbarCollapse = document.querySelector('#navbar-collapse-1');
if (any_available) {
notificationsBtn.style.opacity = 1;
notificationsBtn.forEach(btn => {
btn.style.opacity = 1;
});
noNotifications.style.display = 'none';
notifications.style.display = 'block';
} else {
if (notificationsBtn) notificationsBtn.style.opacity = 0.5;
if (notificationsBtn) {
notificationsBtn.forEach(btn => {
btn.style.opacity = 0.5;
});
}
if (navbarCollapse) navbarCollapse.classList.remove('show');
noNotifications.style.display = 'block';
notifications.style.display = 'none';