mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-10-01 17:51:40 +02:00
9bacebf2e9
# Description of Changes ### Before:  ### After:  As I was reviewing my translation I noticed that there is a problem how Convert button is being displayed as "Convert", after further review I realized Eml-To-pdf.html was a bit inconsistent with other HTMLs. This PR updates the `eml-to-pdf.html`, and addresses consistency issues, as well the visual Convert button problem. Updated the `eml-to-pdf.html` template to improve its structure, styling, and functionality. The changes include enhancements to the layout, better handling of dynamic text, and minor code cleanups. ### Layout and Styling Updates: * Added a new block (`th:block`) to include a common game fragment and adjusted the layout by removing extra `<br>` tags and modifying the container structure for better alignment. * Updated the class of a `<div>` element to include `bg-card` for improved styling. ### Functional Improvements: * Refactored the JavaScript to use a pre-defined `submitText` variable for dynamic button text, improving maintainability. ### Code Cleanup: * Removed unnecessary blank lines and improved the indentation for better readability. --- ## 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) - [ ] 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) - [x] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [x] 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. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
98 lines
4.3 KiB
HTML
98 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
|
|
xmlns:th="https://www.thymeleaf.org">
|
|
|
|
<head>
|
|
<th:block th:insert="~{fragments/common :: head(title=#{EMLToPDF.title}, header=#{EMLToPDF.header})}"></th:block>
|
|
</head>
|
|
|
|
<body>
|
|
<th:block th:insert="~{fragments/common :: game}"></th:block>
|
|
<div id="page-container">
|
|
<div id="content-wrap">
|
|
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
|
|
<div class="mt-4"></div>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 bg-card">
|
|
<div class="tool-header">
|
|
<span class="material-symbols-rounded tool-header-icon convertto">email</span>
|
|
<span class="tool-header-text" th:text="#{EMLToPDF.header}"></span>
|
|
</div>
|
|
<p th:text="#{processTimeWarning}"></p>
|
|
<form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/eml/pdf'}" class="mt-4">
|
|
<div
|
|
th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='.eml,message/rfc822')}">
|
|
</div>
|
|
|
|
<div class="form-check mb-3">
|
|
<input type="checkbox" class="form-check-input" name="downloadHtml" id="downloadHtml">
|
|
<label class="form-check-label" for="downloadHtml" th:text="#{EMLToPDF.downloadHtml}"></label>
|
|
<div class="form-text" th:text="#{EMLToPDF.downloadHtmlHelp}"></div>
|
|
</div>
|
|
|
|
<div id="pdfOnlyOptions">
|
|
<div class="form-check mb-3">
|
|
<input type="checkbox" class="form-check-input" name="includeAttachments" id="includeAttachments" checked>
|
|
<label class="form-check-label" for="includeAttachments" th:text="#{EMLToPDF.includeAttachments}"></label>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="maxAttachmentSizeMB" class="form-label" th:text="#{EMLToPDF.maxAttachmentSize}"></label>
|
|
<input type="number" class="form-control" id="maxAttachmentSizeMB" name="maxAttachmentSizeMB" value="10" min="1" max="100">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#info" aria-expanded="false" aria-controls="info" th:text="#{info}">
|
|
</button>
|
|
<div class="collapse mt-3" id="info">
|
|
<div class="card card-body">
|
|
<p class="mb-2" th:text="#{EMLToPDF.help}"></p>
|
|
<ul class="mb-0">
|
|
<li th:text="#{EMLToPDF.troubleshootingTip1}"></li>
|
|
<li th:text="#{EMLToPDF.troubleshootingTip2}"></li>
|
|
<li th:text="#{EMLToPDF.troubleshootingTip3}"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<br />
|
|
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{EMLToPDF.submit}"></button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
|
|
</div>
|
|
|
|
<script th:inline="javascript">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const downloadHtml = document.getElementById('downloadHtml');
|
|
const pdfOnlyOptions = document.getElementById('pdfOnlyOptions');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const submitText = /*[[#{EMLToPDF.submit}]]*/ 'Convert to PDF';
|
|
const downloadHtmlText = 'Download HTML intermediate file instead of PDF';
|
|
|
|
function updateFormState() {
|
|
if (pdfOnlyOptions && submitBtn) {
|
|
pdfOnlyOptions.style.display = downloadHtml.checked ? 'none' : 'block';
|
|
submitBtn.textContent = downloadHtml.checked ? downloadHtmlText : submitText;
|
|
}
|
|
}
|
|
|
|
if (downloadHtml) {
|
|
downloadHtml.addEventListener('change', updateFormState);
|
|
updateFormState();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|