Finish modals

app/config.yaml

@@ -181,6 +181,7 @@ navigation:
         class: fa-solid fa-phone
       url: "tel:+491781798023"
       identifier: "+491781798023"
+      target: _top
     - name: Encrypted Email (PGP)
       description: Access my PGP key
       icon:

app/static/js/modal.js

@@ -2,8 +2,13 @@ function openDynamicPopup(subitem) {
   // Schließe alle offenen Modals
   closeAllModals();
 
-  // Setze den Titel
-  document.getElementById('dynamicModalLabel').innerText = subitem.name;
+  // Setze den Titel mit Icon, falls vorhanden
+  const modalTitle = document.getElementById('dynamicModalLabel');
+  if (subitem.icon && subitem.icon.class) {
+      modalTitle.innerHTML = `<i class="${subitem.icon.class}"></i> ${subitem.name}`;
+  } else {
+      modalTitle.innerText = subitem.name;
+  }
 
   // Setze den Identifier, falls vorhanden
   const identifierBox = document.getElementById('dynamicIdentifierBox');
@@ -16,6 +21,16 @@ function openDynamicPopup(subitem) {
       modalContent.value = '';
   }
 
+  // Zeige die Beschreibung, falls keine URL vorhanden ist
+  const descriptionText = document.getElementById('dynamicDescriptionText');
+  if (!subitem.url && subitem.description) {
+      descriptionText.classList.remove('d-none');
+      descriptionText.innerText = subitem.description;
+  } else {
+      descriptionText.classList.add('d-none');
+      descriptionText.innerText = '';
+  }
+
   // Konfiguriere die Warnbox
   const warningBox = document.getElementById('dynamicModalWarning');
   if (subitem.warning) {
@@ -47,9 +62,11 @@ function openDynamicPopup(subitem) {
   }
 
   // Konfiguriere die Alternativen
+  const alternativesSection = document.getElementById('dynamicAlternativesSection');
   const alternativesList = document.getElementById('dynamicAlternativesList');
   alternativesList.innerHTML = ''; // Clear existing alternatives
   if (subitem.alternatives && subitem.alternatives.length > 0) {
+      alternativesSection.classList.remove('d-none');
       subitem.alternatives.forEach(alt => {
           const listItem = document.createElement('li');
           listItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
@@ -62,10 +79,7 @@ function openDynamicPopup(subitem) {
           alternativesList.appendChild(listItem);
       });
   } else {
-      const noAltItem = document.createElement('li');
-      noAltItem.classList.add('list-group-item');
-      noAltItem.innerText = 'No alternatives available.';
-      alternativesList.appendChild(noAltItem);
+      alternativesSection.classList.add('d-none');
   }
 
   // Kopierfunktion für den Identifier

app/templates/moduls/modal.html.j2

@@ -14,6 +14,8 @@
         <div id="dynamicModalInfo" class="alert alert-info d-none" role="alert">
           <i class="fa-solid fa-circle-info"></i> <span id="dynamicModalInfoText"></span>
         </div>
+        <!-- Description text, falls vorhanden -->
+        <div id="dynamicDescriptionText" class="mt-2 d-none"></div>
         <!-- Eingabebox für Identifier -->
         <div id="dynamicIdentifierBox" class="input-group mt-2 d-none">
           <input type="text" id="dynamicModalContent" class="form-control" readonly>
@@ -24,11 +26,9 @@
           <a href="#" target="_blank" class="btn btn-primary w-100" id="dynamicModalLinkHref"></a>
         </div>
         <!-- Alternativen, falls vorhanden -->
-        <div id="dynamicAlternatives" class="mt-4">
+        <div id="dynamicAlternativesSection" class="mt-4 d-none">
           <h6>Alternatives:</h6>
-          <ul class="list-group" id="dynamicAlternativesList">
-            <li class="list-group-item">No alternatives available.</li>
-          </ul>
+          <ul class="list-group" id="dynamicAlternativesList"></ul>
         </div>
       </div>
       <div class="modal-footer">