saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-05-11 16:55:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Auto scale (#3490)

Browse Source 
# Description of Changes

Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [x] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.
This commit is contained in:
Reece Browne 2025-05-08 17:54:58 +01:00 committed by GitHub
parent 512e9d7236
commit c4b8df2a1e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/resources/static/css/general.css
View File

@ -1,7 +1,8 @@
#page-container {
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
overflow-x: clip;
}
#content-wrap {

4
src/main/resources/static/css/navbar.css
View File

@ -162,6 +162,7 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
text-wrap: wrap;
word-break: break-word;
width: 80%;
font-size: large;
}
.close-icon {
@ -476,6 +477,9 @@ html[dir="rtl"] .dropdown-menu[data-bs-popper] {
display: flex;
gap: 30px;
justify-content: center;
width: 140%;
position: relative;
left: -20%;
}
.feature-group {

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

@ -1,4 +1,4 @@
<div th:fragment="navbar" class="mx-auto" style="position: sticky; top:0; z-index:10000">
<div th:fragment="navbar" class="mx-auto" style="position: sticky; top:0; z-index:10000; width:100%">
<script th:src="@{'/js/languageSelection.js'}"></script>
<script th:src="@{'/js/navbar.js'}"></script>
<script th:src="@{'/js/additionalLanguageCode.js'}"></script>

33
src/main/resources/templates/home.html
View File

@ -7,20 +7,18 @@
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
<div id="page-container">
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
<div style="transform-origin: top;"
id="scale-wrap">
<br class="d-md-none">
<!-- Features -->
<script th:src="@{'/js/homecard.js'}"></script>
<div style="
width: 100%;
display: flex;
flex-direction: column;">
flex-direction: column;"
>
<div>
<br>
<div style="justify-content: center; display: flex;">
@ -123,9 +121,10 @@
</div>
</div>
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
</div>
</div>
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
</div>
@ -222,7 +221,21 @@
window.showSurvey = /*[[${showSurveyFromDocker}]]*/ true
</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>