diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css index a437f0ec..71c57398 100644 --- a/src/main/resources/static/css/navbar.css +++ b/src/main/resources/static/css/navbar.css @@ -366,3 +366,11 @@ span.icon-text::after { background-color: #0056b3; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } + +#stacked { + gap: 1rem; +} + +#stacked > .navbar-item { + margin: 0; +} diff --git a/src/main/resources/static/js/languageSelection.js b/src/main/resources/static/js/languageSelection.js index 383d23da..2c7e0406 100644 --- a/src/main/resources/static/js/languageSelection.js +++ b/src/main/resources/static/js/languageSelection.js @@ -1,5 +1,5 @@ function getStoredOrDefaultLocale() { - const storedLocale = localStorage.getItem("languageCode"); + const storedLocale = localStorage.getItem('languageCode'); return storedLocale || getDetailedLanguageCode(); } @@ -7,10 +7,10 @@ function setLanguageForDropdown(dropdownClass) { const storedLocale = getStoredOrDefaultLocale(); const dropdownItems = document.querySelectorAll(dropdownClass); - dropdownItems.forEach(item => { - item.classList.toggle("active", item.dataset.bsLanguageCode === storedLocale); - item.removeEventListener("click", handleDropdownItemClick); - item.addEventListener("click", handleDropdownItemClick); + dropdownItems.forEach((item) => { + item.classList.toggle('active', item.dataset.bsLanguageCode === storedLocale); + item.removeEventListener('click', handleDropdownItemClick); + item.addEventListener('click', handleDropdownItemClick); }); } @@ -24,62 +24,46 @@ function handleDropdownItemClick(event) { event.preventDefault(); const languageCode = event.currentTarget.dataset.bsLanguageCode; if (languageCode) { - localStorage.setItem("languageCode", languageCode); - updateUrlWithLanguage(languageCode); + localStorage.setItem('languageCode', languageCode); + updateUrlWithLanguage(languageCode); } else { - console.error("Language code is not set for this item."); + console.error('Language code is not set for this item.'); } } function checkUserLanguage(defaultLocale) { - if (!localStorage.getItem("languageCode") || document.documentElement.getAttribute("data-language") != defaultLocale) { - localStorage.setItem("languageCode", defaultLocale); - updateUrlWithLanguage(defaultLocale); + if ( + !localStorage.getItem('languageCode') || + document.documentElement.getAttribute('data-language') != defaultLocale + ) { + localStorage.setItem('languageCode', defaultLocale); + updateUrlWithLanguage(defaultLocale); } } function initLanguageSettings() { - document.addEventListener("DOMContentLoaded", function () { - setLanguageForDropdown(".lang_dropdown-item"); + document.addEventListener('DOMContentLoaded', function () { + setLanguageForDropdown('.lang_dropdown-item'); - const defaultLocale = getStoredOrDefaultLocale(); - checkUserLanguage(defaultLocale); + const defaultLocale = getStoredOrDefaultLocale(); + checkUserLanguage(defaultLocale); - const dropdownItems = document.querySelectorAll(".lang_dropdown-item"); - dropdownItems.forEach(item => { - item.classList.toggle("active", item.dataset.bsLanguageCode === defaultLocale); - }); - }); -} - -function removeElements() { - document.addEventListener("DOMContentLoaded", function () { - document.querySelectorAll(".navbar-item").forEach((element) => { - const dropdownItems = element.querySelectorAll(".dropdown-item"); - const items = Array.from(dropdownItems).filter(item => !item.querySelector("hr.dropdown-divider")); - - if (items.length <= 2) { - if ( - element.previousElementSibling && - element.previousElementSibling.classList.contains("navbar-item") && - element.previousElementSibling.classList.contains("nav-item-separator") - ) { - element.previousElementSibling.remove(); - } - element.remove(); - } - }); + const dropdownItems = document.querySelectorAll('.lang_dropdown-item'); + dropdownItems.forEach((item) => { + item.classList.toggle('active', item.dataset.bsLanguageCode === defaultLocale); + }); }); } function sortLanguageDropdown() { - document.addEventListener("DOMContentLoaded", function () { - const dropdownMenu = document.querySelector('.dropdown-menu .dropdown-item.lang_dropdown-item').parentElement; - if (dropdownMenu) { - const items = Array.from(dropdownMenu.children).filter(child => child.matches('a')); - items.sort((a, b) => a.dataset.bsLanguageCode.localeCompare(b.dataset.bsLanguageCode)) - .forEach(node => dropdownMenu.appendChild(node)); - } + document.addEventListener('DOMContentLoaded', function () { + const dropdownMenu = document.querySelector('.dropdown-menu .dropdown-item.lang_dropdown-item').parentElement; + if (dropdownMenu) { + const items = Array.from(dropdownMenu.children).filter((child) => child.matches('a')); + items + .sort((a, b) => a.dataset.bsLanguageCode.localeCompare(b.dataset.bsLanguageCode)) + .forEach((node) => dropdownMenu.appendChild(node)); + } }); } diff --git a/src/main/resources/static/js/navbar.js b/src/main/resources/static/js/navbar.js new file mode 100644 index 00000000..97272a5b --- /dev/null +++ b/src/main/resources/static/js/navbar.js @@ -0,0 +1,46 @@ +function toolsManager() { + document.addEventListener('DOMContentLoaded', function () { + const stackedContainer = document.getElementById('stacked'); + + if (stackedContainer) { + const convertToPDF = stackedContainer.querySelector('.navbar-item:first-child'); + const convertFromPDF = stackedContainer.querySelector('.navbar-item:nth-child(2)'); + + if (convertToPDF && convertFromPDF) { + const dropdownItemsTo = convertToPDF.querySelectorAll('.dropdown-item'); + const dropdownItemsFrom = convertFromPDF.querySelectorAll('.dropdown-item'); + + const itemsTo = Array.from(dropdownItemsTo).filter((item) => !item.querySelector('hr.dropdown-divider')); + const itemsFrom = Array.from(dropdownItemsFrom).filter((item) => !item.querySelector('hr.dropdown-divider')); + + const totalItems = itemsTo.length + itemsFrom.length; + + if (totalItems > 12) { + stackedContainer.style.flexDirection = 'row'; + stackedContainer.classList.remove('col-lg-2'); + stackedContainer.classList.add('col-lg-4'); + convertToPDF.style.flex = '1 1 50%'; + convertFromPDF.style.flex = '1 1 50%'; + } + } + } + + document.querySelectorAll('.navbar-item').forEach((element) => { + if (!element.closest('#stacked')) { + const dropdownItems = element.querySelectorAll('.dropdown-item'); + const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider')); + + if (items.length === 0) { + if ( + element.previousElementSibling && + element.previousElementSibling.classList.contains('navbar-item') && + element.previousElementSibling.classList.contains('nav-item-separator') + ) { + element.previousElementSibling.remove(); + } + element.remove(); + } + } + }); + }); +} diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html index d3206433..d4cdebbe 100644 --- a/src/main/resources/templates/fragments/navbar.html +++ b/src/main/resources/templates/fragments/navbar.html @@ -1,10 +1,11 @@
+