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

prioritise small mobile screens over people zooming in > 300%

Browse Source
This commit is contained in:
Ethan 2025-07-14 12:24:15 +01:00
parent 890cc71d21
commit 9f098312ba
1 changed files with 11 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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