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

Scaling fix

Browse Source
This commit is contained in:
Reece 2025-07-01 22:15:41 +01:00
parent 5e264db67e
commit 5dc6b820bc
1 changed files with 7 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,10 +6,10 @@
<th:block th:insert="~{fragments/common :: head(title='')}"></th:block> <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
</head> </head>
<body style="height:100vh; margin:0; padding:0;"> <body>
<div class="page-container" style="min-height:98vh; overflow-x:hidden; display:flex; flex-direction:column;"> <div class="page-container" style="min-height:98vh; overflow-x:hidden; display:flex; flex-direction:column;">
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block> <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
<div class="main-content" style="flex:1;"> <div class="main-content " style="transform-origin: center top; zoom:68%; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;" >
<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>
@ -52,10 +52,9 @@
</div> </div>
</div> </div>
<span class="material-symbols-rounded search-icon"> <div style="display: flex; align-items: center; gap: 0.5rem;">
search
</span>
<input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus> <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
</div>
<div style="display: flex; column-gap: 3rem; flex-wrap: wrap; margin-left:1rem"> <div style="display: flex; column-gap: 3rem; flex-wrap: wrap; margin-left:1rem">
<div <div
@ -119,8 +118,10 @@
</div> </div>
</div> </div>
<div style="scale:70%" >
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block> <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
</div> </div>
</div>
<!-- Survey Modal --> <!-- Survey Modal -->
@ -216,21 +217,6 @@
window.showSurvey = /*[[${showSurveyFromDocker}]]*/ true window.showSurvey = /*[[${showSurveyFromDocker}]]*/ true
</script> </script>
<script th:src="@{'/js/pages/home.js'}" th:inline="javascript"></script> <script th:src="@{'/js/pages/home.js'}" th:inline="javascript"></script>
<script>
function applyScale() {
const baseWidth = 1440;
const baseHeight = 1000;
const scaleX = window.innerWidth / baseWidth;
const scaleY = window.innerHeight / baseHeight;
const scale = Math.max(0.9, Math.min(scaleX, scaleY)); // keep aspect ratio, honor minScale
const ui = document.getElementById('scale-wrap');
ui.style.transform = `scale(${scale*0.75})`;
}
window.addEventListener('resize', applyScale);
window.addEventListener('load', applyScale);
</script>
</body> </body>