saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-27 06:39: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; display: flex;
gap: 30px; gap: 30px;
justify-content: center; justify-content: center;
width: 140%; width: 100%;
position: relative; position: relative;
left: -20%;
} }
.feature-group { .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 // Counter-scale to maintain same visual size
const navScale = 1.1 / currentDPR; const navScale = 1.1 / currentDPR;
// Scale dropdowns relative to navbar scaling to keep them proportional // Dropdowns at 100% (no additional scaling)
const dropdownScale = Math.min(1.1, 1.1 / Math.sqrt(currentDPR)); const dropdownScale = 1.0;
console.log('DPR:', currentDPR, 'navScale:', navScale, 'will apply scaling'); console.log('DPR:', currentDPR, 'navScale:', navScale, 'will apply scaling');
@ -51,16 +51,28 @@
const marginAdjustment = scaledHeight - baseHeight; const marginAdjustment = scaledHeight - baseHeight;
navbar.style.marginBottom = `${marginAdjustment}px`; 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(() => { setTimeout(() => {
const dropdowns = document.querySelectorAll('.dropdown-menu'); const dropdowns = document.querySelectorAll('.dropdown-menu');
dropdowns.forEach(dropdown => { 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); }, 100);
} }
@ -68,14 +80,13 @@
document.addEventListener('DOMContentLoaded', scaleNav); document.addEventListener('DOMContentLoaded', scaleNav);
// Poll for DPR changes every 200ms
setInterval(() => { setInterval(() => {
const currentDPR = window.devicePixelRatio; const currentDPR = window.devicePixelRatio;
if (Math.abs(currentDPR - lastDPR) > 0.01) { if (Math.abs(currentDPR - lastDPR) > 0.01) {
lastDPR = currentDPR; lastDPR = currentDPR;
scaleNav(); scaleNav();
} }
}, 200); }, 100);
</script> </script>
<script th:src="@{'/js/thirdParty/pdf-lib.min.js'}"></script> <script th:src="@{'/js/thirdParty/pdf-lib.min.js'}"></script>
<script th:src="@{'/js/fetch-utils.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"> <footer th:fragment="footer" id="footer" class="text-center">
<script type="module" th:src="@{'/js/thirdParty/cookieconsent-config.js'}"></script> <script type="module" th:src="@{'/js/thirdParty/cookieconsent-config.js'}"></script>
<div class="footer-center pb-4"> <div class="footer-center">
<!-- Links section --> <!-- Links section -->
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<ul class="list-unstyled footer-link-list"> <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-style: solid;
border-bottom-width: 1px; border-bottom-width: 1px;
border-color: var(--md-nav-color-on-seperator)"> 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;"> <a class="navbar-brand" th:href="${@contextPath}" style="display: flex;">
<img class="main-icon" th:src="@{'/favicon.svg'}" alt="icon"> <img class="main-icon" th:src="@{'/favicon.svg'}" alt="icon">
<span class="icon-text" th:text="${@navBarText}"></span> <span class="icon-text" th:text="${@navBarText}"></span>

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

@ -7,9 +7,9 @@
</head> </head>
<body> <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> <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"> <br class="d-md-none">
<!-- Features --> <!-- Features -->
<script th:src="@{'/js/homecard.js'}"></script> <script th:src="@{'/js/homecard.js'}"></script>
@ -99,6 +99,7 @@
</div> </div>
<div> <div>
</div> </div>
<div style="width:100%; overflow-x:visible;">
<div class="features-container" style=" border-top: 1px; <div class="features-container" style=" border-top: 1px;
border-top-style: solid; border-top-style: solid;
border-color: var(--md-nav-color-on-seperator); border-color: var(--md-nav-color-on-seperator);
@ -115,7 +116,7 @@
</div> </div>
</div> </div>
</div>
</div> </div>
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block> <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
</div> </div>
@ -231,19 +232,26 @@
const space = container.offsetHeight - navH; const space = container.offsetHeight - navH;
const origH = el.scrollHeight; const origH = el.scrollHeight;
let finalS = Math.min(s * 0.75, (space * 0.98) / origH); // Adjust for taller screens - use more vertical space on tall aspect ratios
finalS = Math.max(0.5, finalS); 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.transform = `scale(${finalS})`;
el.style.transformOrigin = 'top center'; el.style.transformOrigin = 'top center';
el.style.height = `${origH * finalS}px`; 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'); const featuresContainer = document.querySelector('.features-container');
if (featuresContainer) { if (featuresContainer) {
const compensatedWidth = Math.min(140, 100 / finalS); // Max 140%, min what's needed const dynamicWidth = Math.min(140, 100 / finalS);
featuresContainer.style.width = `${compensatedWidth}%`; const leftOffset = (dynamicWidth - 100) / 2;
featuresContainer.style.width = `${dynamicWidth}%`;
featuresContainer.style.left = `-${leftOffset}%`;
} }
} }
let prevW = window.innerWidth; let prevW = window.innerWidth;
let prevH = window.innerHeight; let prevH = window.innerHeight;