got rid of some warnings, also changes what happens when scaleNav is called on mobile devices. I previously forgot to clear the styles from wider screens, causing the app to need a refresh to fit mobile better

This commit is contained in:
Ethan 2025-07-11 14:17:18 +01:00
parent 58eb913e87
commit 64d4d33a0d
4 changed files with 70 additions and 15 deletions

View File

@ -44,8 +44,16 @@ function updateFavoritesDropdown() {
contentWrapper.style.color = 'inherit';
// Clone the original content
var originalContent = navbarEntry.querySelector('div').cloneNode(true);
var divElement = navbarEntry.querySelector('div');
if (divElement) {
var originalContent = divElement.cloneNode(true);
contentWrapper.appendChild(originalContent);
} else {
// Fallback: create content manually if div is not found
var fallbackContent = document.createElement('div');
fallbackContent.innerHTML = navbarEntry.innerHTML;
contentWrapper.appendChild(fallbackContent);
}
// Create the remove button
var removeButton = document.createElement('button');

View File

@ -55,11 +55,21 @@ function setupDropdowns() {
}
dropdown.addEventListener('show.bs.dropdown', () => {
// Find all other dropdowns and hide them
bootstrap.Dropdown.getAllInstances().forEach((instance) => {
if (instance._element !== toggle) {
// Find all other open dropdowns and hide them
const openDropdowns = document.querySelectorAll('.navbar-nav .dropdown-menu.show');
openDropdowns.forEach((menu) => {
const parentDropdown = menu.closest('.dropdown');
if (parentDropdown && parentDropdown !== dropdown) {
const parentToggle = parentDropdown.querySelector('[data-bs-toggle="dropdown"]');
if (parentToggle) {
// Get or create Bootstrap dropdown instance
let instance = bootstrap.Dropdown.getInstance(parentToggle);
if (!instance) {
instance = new bootstrap.Dropdown(parentToggle);
}
instance.hide();
}
}
});
});
});

View File

@ -56,8 +56,16 @@ document.querySelector("#navbarSearchInput").addEventListener("input", function
contentWrapper.style.textDecoration = "none";
contentWrapper.style.color = "inherit";
var originalContent = item.querySelector("div").cloneNode(true);
var divElement = item.querySelector("div");
if (divElement) {
var originalContent = divElement.cloneNode(true);
contentWrapper.appendChild(originalContent);
} else {
// Fallback: create content manually if div is not found
var fallbackContent = document.createElement("div");
fallbackContent.innerHTML = item.innerHTML;
contentWrapper.appendChild(fallbackContent);
}
contentWrapper.onclick = function () {
window.location.href = itemHref;
@ -77,14 +85,18 @@ document.querySelector("#navbarSearchInput").addEventListener("input", function
const searchDropdown = document.getElementById('searchDropdown');
const searchInput = document.getElementById('navbarSearchInput');
const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
// Create a single dropdown instance
const dropdownInstance = new bootstrap.Dropdown(searchDropdown);
// Check if elements exist before proceeding
if (searchDropdown && searchInput) {
const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
// Create a single dropdown instance
const dropdownInstance = new bootstrap.Dropdown(searchDropdown);
// Function to handle showing the dropdown
function showSearchDropdown() {
if (!dropdownInstance._isShown()) {
const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
if (!dropdownMenu || !dropdownMenu.classList.contains('show')) {
dropdownInstance.show();
}
setTimeout(() => searchInput.focus(), 150); // Focus after animation
@ -94,7 +106,8 @@ function showSearchDropdown() {
searchDropdown.addEventListener('click', function (e) {
if (window.innerWidth < 1200) {
// Let Bootstrap's default toggling handle it, but ensure focus
if (!dropdownInstance._isShown()) {
const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
if (!dropdownMenu || !dropdownMenu.classList.contains('show')) {
// Use a small delay to allow the dropdown to open before focusing
setTimeout(() => searchInput.focus(), 150);
}
@ -132,7 +145,8 @@ searchDropdown.addEventListener('mouseleave', function (e) {
// Hide dropdown if it's open and user clicks outside
document.addEventListener('click', function(e) {
if (!searchDropdown.contains(e.target) && dropdownInstance._isShown()) {
const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
if (!searchDropdown.contains(e.target) && dropdownMenu && dropdownMenu.classList.contains('show')) {
if (searchInput.value.trim().length === 0) {
dropdownInstance.hide();
}
@ -143,3 +157,5 @@ document.addEventListener('click', function(e) {
searchInput.addEventListener('click', function (e) {
e.stopPropagation();
});
} // End of if (searchDropdown && searchInput) block

View File

@ -32,7 +32,28 @@
function scaleNav() {
if (window.innerWidth < 1200) {
// Don't scale nav on mobile
// Reset/remove scaling on mobile
const navbarElement = document.querySelector('.navbar');
if (navbarElement) {
navbarElement.style.transform = '';
navbarElement.style.transformOrigin = '';
navbarElement.style.width = '';
navbarElement.style.left = '';
navbarElement.style.right = '';
navbarElement.style.marginBottom = '';
navbarElement.classList.remove('navbar-expand-lg');
navbarElement.classList.add('navbar-expand-xl');
}
// Reset dropdown scaling
const dropdowns = document.querySelectorAll('.dropdown-menu');
dropdowns.forEach(dropdown => {
dropdown.style.transform = '';
dropdown.style.transformOrigin = '';
});
// Reset CSS custom property
document.documentElement.style.setProperty('--navbar-height', '');
return;
}
const currentDPR = window.devicePixelRatio || 1;