Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2024-12-21 19:08:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Conditional logic for stacking columns

Browse Source
This commit is contained in:
Reece Browne 2024-12-19 12:58:57 +00:00
parent 2a93910da3
commit 63386baa0d
3 changed files with 51 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -366,3 +366,11 @@ span.icon-text::after {
background-color: #0056b3; background-color: #0056b3;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
} }
#stacked {
gap: 1rem;
}
#stacked > .navbar-item {
margin: 0;
}

51
src/main/resources/static/js/navbar.js
View File

@ -1,18 +1,45 @@
function removeElements() { function toolsManager() {
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.navbar-item').forEach((element) => { const stackedContainer = document.getElementById('stacked');
const dropdownItems = element.querySelectorAll('.dropdown-item');
const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));
if (items.length == 0) { if (stackedContainer) {
if ( const convertToPDF = stackedContainer.querySelector('.navbar-item:first-child');
element.previousElementSibling && const convertFromPDF = stackedContainer.querySelector('.navbar-item:nth-child(2)');
element.previousElementSibling.classList.contains('navbar-item') &&
element.previousElementSibling.classList.contains('nav-item-separator') if (convertToPDF && convertFromPDF) {
) { const dropdownItemsTo = convertToPDF.querySelectorAll('.dropdown-item');
element.previousElementSibling.remove(); const dropdownItemsFrom = convertFromPDF.querySelectorAll('.dropdown-item');
const itemsTo = Array.from(dropdownItemsTo).filter((item) => !item.querySelector('hr.dropdown-divider'));
const itemsFrom = Array.from(dropdownItemsFrom).filter((item) => !item.querySelector('hr.dropdown-divider'));
const totalItems = itemsTo.length + itemsFrom.length;
if (totalItems > 12) {
stackedContainer.style.flexDirection = 'row';
stackedContainer.classList.remove('col-lg-2');
stackedContainer.classList.add('col-lg-4');
convertToPDF.style.flex = '1 1 50%';
convertFromPDF.style.flex = '1 1 50%';
}
}
}
document.querySelectorAll('.navbar-item').forEach((element) => {
if (!element.closest('#stacked')) {
const dropdownItems = element.querySelectorAll('.dropdown-item');
const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));
if (items.length === 0) {
if (
element.previousElementSibling &&
element.previousElementSibling.classList.contains('navbar-item') &&
element.previousElementSibling.classList.contains('nav-item-separator')
) {
element.previousElementSibling.remove();
}
element.remove();
} }
element.remove();
} }
}); });
}); });

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

@ -5,7 +5,7 @@
<script th:inline="javascript"> <script th:inline="javascript">
// Initializing the scripts // Initializing the scripts
initLanguageSettings(); initLanguageSettings();
removeElements(); toolsManager();
</script> </script>
<script th:inline="javascript"> <script th:inline="javascript">
const currentVersion = /*[[${@appVersion}]]*/ ''; const currentVersion = /*[[${@appVersion}]]*/ '';
@ -82,9 +82,9 @@
th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}"> th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}">
</div> </div>
</div> </div>
<div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2"style="display:flex; flex-direction: column;"> <div id="stacked" class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2"style="display:flex; flex-direction: column;">
<!-- Convert to PDF menu items --> <!-- Convert to PDF menu items -->
<div class="navbar-item py px-xl-1 px-2"> <div class="navbar-item py px-xl-1 px-2" style="margin-bottom: 1rem;">
<h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6> <h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6>
<div <div
th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'image', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}"> th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'image', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}">
@ -106,7 +106,7 @@
</div> </div>
</div> </div>
<!-- Convert from PDF menu items --> <!-- Convert from PDF menu items -->
<div class="navbar-item py px-xl-1" style="margin-top: 1rem;"> <div class="navbar-item py px-xl-1">
<h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6> <h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6>
<div <div
th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'image', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}"> th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'image', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">