saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-26 22:29:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Even more scaling changes

Browse Source
This commit is contained in:
Reece 2025-07-03 15:23:46 +01:00
parent 25447721e3
commit b6c5349240
5 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -479,9 +479,8 @@ html[dir="rtl"] .dropdown-menu[data-bs-popper] {
display: flex;
gap: 30px;
justify-content: center;
width: 140%;
width: 100%;
position: relative;
left: -20%;
}
.feature-group {

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

@ -32,8 +32,8 @@
// Counter-scale to maintain same visual size
const navScale = 1.1 / currentDPR;
// Scale dropdowns relative to navbar scaling to keep them proportional
const dropdownScale = Math.min(1.1, 1.1 / Math.sqrt(currentDPR));
// Dropdowns at 100% (no additional scaling)
const dropdownScale = 1.0;
console.log('DPR:', currentDPR, 'navScale:', navScale, 'will apply scaling');
@ -51,16 +51,28 @@
const marginAdjustment = scaledHeight - baseHeight;
navbar.style.marginBottom = `${marginAdjustment}px`;
// Adjust responsive breakpoint based on effective width after scaling
const effectiveWidth = window.innerWidth / navScale;
if (effectiveWidth >= 1200) {
navbar.classList.add('navbar-expand-lg');
navbar.classList.remove('navbar-expand-xl');
} else {
navbar.classList.add('navbar-expand-xl');
navbar.classList.remove('navbar-expand-lg');
}
console.log('Applied navbar scale:', navScale);
console.log('Applied navbar scale:', navScale, 'effective width:', effectiveWidth);
}
setTimeout(() => {
const dropdowns = document.querySelectorAll('.dropdown-menu');
dropdowns.forEach(dropdown => {
dropdown.style.transform = `scale(${dropdownScale})`;
// Scale content, not container
dropdown.style.fontSize = `${dropdownScale}em`;
// Reset any container scaling
dropdown.style.transform = '';
});
console.log('Applied dropdown scale:', dropdownScale);
console.log('Applied dropdown content scale:', dropdownScale);
}, 100);
}
@ -68,14 +80,13 @@
document.addEventListener('DOMContentLoaded', scaleNav);
// Poll for DPR changes every 200ms
setInterval(() => {
const currentDPR = window.devicePixelRatio;
if (Math.abs(currentDPR - lastDPR) > 0.01) {
lastDPR = currentDPR;
scaleNav();
}
}, 200);
}, 100);
</script>
<script th:src="@{'/js/thirdParty/pdf-lib.min.js'}"></script>
<script th:src="@{'/js/fetch-utils.js'}"></script>

2
stirling-pdf/src/main/resources/templates/fragments/footer.html
View File

@ -1,7 +1,7 @@
<footer th:fragment="footer" id="footer" class="text-center">
<script type="module" th:src="@{'/js/thirdParty/cookieconsent-config.js'}"></script>
<div class="footer-center pb-4">
<div class="footer-center">
<!-- Links section -->
<div class="d-flex justify-content-center">
<ul class="list-unstyled footer-link-list">

2
stirling-pdf/src/main/resources/templates/fragments/navbar.html
View File

@ -23,7 +23,7 @@
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: var(--md-nav-color-on-seperator)">
<div class="container ">
<div class="container " style="max-width: 100%;">
<a class="navbar-brand" th:href="${@contextPath}" style="display: flex;">
<img class="main-icon" th:src="@{'/favicon.svg'}" alt="icon">
<span class="icon-text" th:text="${@navBarText}"></span>

24
stirling-pdf/src/main/resources/templates/home.html
View File

@ -7,9 +7,9 @@
</head>
<body>
<div class="page-container" style="height:98vh; max-height:98vh; overflow-x:hidden;">
<div class="page-container" style="max-height:100vh;">
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
<div style="transform-origin: center top; flex:0 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;" id="scale-wrap">
<div style="transform-origin: center top; flex:0 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; " id="scale-wrap">
<br class="d-md-none">
<!-- Features -->
<script th:src="@{'/js/homecard.js'}"></script>
@ -99,6 +99,7 @@
</div>
<div>
</div>
<div style="width:100%; overflow-x:visible;">
<div class="features-container" style=" border-top: 1px;
border-top-style: solid;
border-color: var(--md-nav-color-on-seperator);
@ -115,7 +116,7 @@
</div>
</div>
</div>
</div>
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
</div>
@ -231,19 +232,26 @@
const space = container.offsetHeight - navH;
const origH = el.scrollHeight;
let finalS = Math.min(s * 0.75, (space * 0.98) / origH);
finalS = Math.max(0.5, finalS);
// Adjust for taller screens - use more vertical space on tall aspect ratios
const aspectRatio = window.innerWidth / window.innerHeight;
const tallScreenBonus = aspectRatio < 1.5 ? 0.1 : 0; // 10% bonus for tall screens
let finalS = Math.min(s * 0.75, (space * (0.98 + tallScreenBonus)) / origH);
finalS = Math.max(0.7, finalS);
el.style.transform = `scale(${finalS})`;
el.style.transformOrigin = 'top center';
el.style.height = `${origH * finalS}px`;
// Adjust features container width to use full available space
// Dynamically adjust features container width based on scale
const featuresContainer = document.querySelector('.features-container');
if (featuresContainer) {
const compensatedWidth = Math.min(140, 100 / finalS); // Max 140%, min what's needed
featuresContainer.style.width = `${compensatedWidth}%`;
const dynamicWidth = Math.min(140, 100 / finalS);
const leftOffset = (dynamicWidth - 100) / 2;
featuresContainer.style.width = `${dynamicWidth}%`;
featuresContainer.style.left = `-${leftOffset}%`;
}
}
let prevW = window.innerWidth;
let prevH = window.innerHeight;