Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-09-08 17:51:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

languages container scaling issues fix

Browse Source
This commit is contained in:
Ethan 2025-07-14 15:02:21 +01:00
parent 9f098312ba
commit 394fbcbc33
3 changed files with 107 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
stirling-pdf/src/main/resources/static/css/navbar.css
View File

@ -159,8 +159,23 @@
.scalable-languages-container { .scalable-languages-container {
display: grid; display: grid;
/* Auto-fill columns, with a minimum width of 180px */ grid-template-columns: repeat(1, 1fr);
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (min-width: 400px) {
.scalable-languages-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 600px) {
.scalable-languages-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 900px) {
.scalable-languages-container {
grid-template-columns: repeat(4, 1fr) !important;
}
} }
.scalable-languages-container:not(:has(> :nth-child(4))) .lang-dropdown-item-wrapper:last-child { .scalable-languages-container:not(:has(> :nth-child(4))) .lang-dropdown-item-wrapper:last-child {
@ -236,6 +251,12 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
} }
} }
@media (min-width: 900px) {
#languageSelection.scalable-languages-container {
grid-template-columns: repeat(4, 1fr) !important;
}
}
.dropdown-item .icon-text { .dropdown-item .icon-text {
text-wrap: wrap; text-wrap: wrap;
word-break: break-word; word-break: break-word;
@ -535,6 +556,17 @@ html[dir="rtl"] .dropdown-menu {
width: 100vw !important; width: 100vw !important;
max-width: 100vw !important; max-width: 100vw !important;
left: 0 !important; left: 0 !important;
right: 0 !important;
transform: none !important;
transform-origin: none !important;
}
.navbar .navbar-expand-xl .dropdown-menu,
.navbar-expand .dropdown-menu {
transform: none !important;
transform-origin: none !important;
left: 0 !important;
right: 0 !important;
} }
.navbar-collapse .dropdown-mega .dropdown-menu { .navbar-collapse .dropdown-mega .dropdown-menu {
@ -582,6 +614,27 @@ html[dir="rtl"] .dropdown-menu {
padding-left: 4px !important; padding-left: 4px !important;
} }
#mainNavbarDropdownMenu {
transform: none !important;
transform-origin: none !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
margin-bottom: 0 !important;
}
.dropdown-menu,
.dropdown-menu-tp,
.dropdown-menu-tp.show {
transform: none !important;
transform-origin: none !important;
max-width: 95vw !important;
width: 100vw !important;
left: 0 !important;
right: 0 !important;
margin-bottom: 0 !important;
}
} }

27
stirling-pdf/src/main/resources/static/js/navbar.js
View File

@ -109,7 +109,34 @@ window.tooltipSetup = () => {
}); });
}; };
// Override the bootstrap dropdown styles for mobile
function fixNavbarDropdownStyles() {
if (window.innerWidth < 1200) {
document.querySelectorAll('.navbar .dropdown-menu').forEach(function(menu) {
menu.style.transform = 'none';
menu.style.transformOrigin = 'none';
menu.style.left = '0';
menu.style.right = '0';
menu.style.maxWidth = '95vw';
menu.style.width = '100vw';
menu.style.marginBottom = '0';
});
} else {
document.querySelectorAll('.navbar .dropdown-menu').forEach(function(menu) {
menu.style.transform = '';
menu.style.transformOrigin = '';
menu.style.left = '';
menu.style.right = '';
menu.style.maxWidth = '';
menu.style.width = '';
menu.style.marginBottom = '';
});
}
}
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
tooltipSetup(); tooltipSetup();
setupDropdowns(); setupDropdowns();
fixNavbarDropdownStyles();
}); });
window.addEventListener('resize', fixNavbarDropdownStyles);

43
stirling-pdf/src/main/resources/templates/fragments/common.html
View File

@ -30,30 +30,37 @@
// Determine if this is actually a high DPI screen at page load // Determine if this is actually a high DPI screen at page load
const isHighDPI = systemDPR > 1.4; const isHighDPI = systemDPR > 1.4;
// Reset all navbar and dropdown scaling styles
function resetNavScaling() {
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.remove('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', '');
}
function scaleNav() { function scaleNav() {
if (window.innerWidth < 800) { resetNavScaling();
// Reset/remove scaling on mobile devices if (window.innerWidth < 1200) {
const navbarElement = document.querySelector('.navbar'); const navbarElement = document.querySelector('.navbar');
if (navbarElement) { 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.remove('navbar-expand-lg');
navbarElement.classList.add('navbar-expand-xl'); 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; return;
} }
const currentDPR = window.devicePixelRatio || 1; const currentDPR = window.devicePixelRatio || 1;