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

nav issues with wide screen fix

Browse Source
This commit is contained in:
Ethan 2025-07-12 00:22:21 +01:00
parent 873156c4a6
commit 890cc71d21
2 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -581,6 +581,8 @@ html[dir="rtl"] .dropdown-menu {
margin-left: 0px !important; margin-left: 0px !important;
padding-left: 4px !important; padding-left: 4px !important;
} }
} }
.go-pro-link { .go-pro-link {

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

@ -31,29 +31,50 @@
const isHighDPI = systemDPR > 1.4; const isHighDPI = systemDPR > 1.4;
function scaleNav() { function scaleNav() {
if (window.innerWidth < 800) { if (window.innerWidth < 600) {
// Reset/remove scaling on mobile devices // Scale down navbar on very small screens to reduce height
const currentDPR = window.devicePixelRatio || 1;
const smallScreenScale = Math.max(0.7, 1 / currentDPR * 0.8); // Scale down more on high DPI
const navbarElement = document.querySelector('.navbar'); const navbarElement = document.querySelector('.navbar');
if (navbarElement) { if (navbarElement) {
navbarElement.style.transform = ''; // RTL support - check document direction
navbarElement.style.transformOrigin = ''; const isRTL = document.documentElement.dir === 'rtl' || document.documentElement.getAttribute('dir') === 'rtl';
navbarElement.style.width = '';
navbarElement.style.left = ''; const translateX = isRTL ? '50%' : '-50%';
navbarElement.style.right = ''; navbarElement.style.transform = `translateX(${translateX}) scale(${smallScreenScale})`;
navbarElement.style.marginBottom = ''; navbarElement.style.transformOrigin = 'top center';
navbarElement.style.width = `${100 / smallScreenScale}%`;
if (isRTL) {
navbarElement.style.right = '50%';
navbarElement.style.left = 'auto';
} else {
navbarElement.style.left = '50%';
navbarElement.style.right = 'auto';
}
// Adjust bottom margin to prevent gaps
const baseHeight = 60;
const scaledHeight = baseHeight * smallScreenScale;
const marginAdjustment = scaledHeight - baseHeight;
navbarElement.style.marginBottom = `${marginAdjustment}px`;
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 // Keep dropdowns unscaled for better usability
const dropdowns = document.querySelectorAll('.dropdown-menu'); const dropdowns = document.querySelectorAll('.dropdown-menu');
dropdowns.forEach(dropdown => { dropdowns.forEach(dropdown => {
dropdown.style.transform = ''; dropdown.style.transform = '';
dropdown.style.transformOrigin = ''; dropdown.style.transformOrigin = '';
}); });
// Reset CSS custom property // Set CSS custom property for small screen navbar height
document.documentElement.style.setProperty('--navbar-height', ''); const baseHeight = 60;
const actualScaledHeight = baseHeight * smallScreenScale;
document.documentElement.style.setProperty('--navbar-height', `${actualScaledHeight}px`);
return; return;
} }
const currentDPR = window.devicePixelRatio || 1; const currentDPR = window.devicePixelRatio || 1;