Conditional logic for stacking columns

Stirling-Tools · Dec 19, 2024 · 63386ba · 63386ba
1 parent 2a93910
commit 63386ba
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
@@ -366,3 +366,11 @@ span.icon-text::after {
   background-color: #0056b3;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
+
+#stacked {
+  gap: 1rem;
+}
+
+#stacked > .navbar-item {
+  margin: 0;
+}
diff --git a/src/main/resources/static/js/navbar.js b/src/main/resources/static/js/navbar.js
@@ -1,18 +1,45 @@
-function removeElements() {
+function toolsManager() {
   document.addEventListener('DOMContentLoaded', function () {
+    const stackedContainer = document.getElementById('stacked');
+
+    if (stackedContainer) {
+      const convertToPDF = stackedContainer.querySelector('.navbar-item:first-child');
+      const convertFromPDF = stackedContainer.querySelector('.navbar-item:nth-child(2)');
+
+      if (convertToPDF && convertFromPDF) {
+        const dropdownItemsTo = convertToPDF.querySelectorAll('.dropdown-item');
+        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) => {
-      const dropdownItems = element.querySelectorAll('.dropdown-item');
-      const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));
+      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();
+        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();
       }
     });
   });

diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
@@ -5,7 +5,7 @@
   <script th:inline="javascript">
     // Initializing the scripts
     initLanguageSettings();
-    removeElements();
+    toolsManager();
   </script>
   <script th:inline="javascript">
     const currentVersion = /*[[${@appVersion}]]*/ '';
@@ -82,9 +82,9 @@ <h6 class="menu-title" th:text="#{navbar.sections.organize}"></h6>
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}">
                         </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 -->
-                      <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>
                         <div
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'image', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}">
@@ -106,7 +106,7 @@ <h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6>
                         </div>
                       </div>
                       <!-- 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>
                         <div
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'image', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">