1. Version mit DB

mod_pdf_tree/tmpl/default.php

@@ -1,11 +1,45 @@
-
 <?php defined('_JEXEC') or die; ?>
 
 <!-- Styles für Struktur, Vorschau und Icons -->
 <style>
 /* Baum und Vorschau nebeneinander */
-.pdf-tree-wrapper { display: flex; }
-.pdf-tree-container { flex: 1; }
+.pdf-tree-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 1em;
+  background: #f9f9f9;
+  padding: 1em;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+}
+
+/* Linke Spalte: Verzeichnisbaum */
+.pdf-tree-container {
+  flex: 0 0 30%;
+  height: 95vh;
+  overflow: auto;
+}
+
+/* Vorschaufenster rechts */
+#pdf-preview {
+  flex: 1;
+  min-width: 800px;
+  height: 95vh;
+  border: 1px solid #ccc;
+  background: #fff;
+  display: none;
+}
+
+/* Vorschau-Inhalt (PDF) */
+#pdf-preview iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: block;
+}
 
 /* Verzeichnisliste zurücksetzen */
 .pdf-tree, .pdf-tree ul {
@@ -13,14 +47,26 @@
   margin: 0;
   padding: 0;
 }
-.pdf-tree li { margin: 0.3em 0; }
+.pdf-tree li {
+  margin: 0.3em 0;
+}
 
 /* Ordner-Icons & Pfeile */
-.folder > .toggle { cursor: pointer; display: inline-block; width: 1em; }
-.folder-icon::before { content: "📁"; margin-right: 4px; }
+.folder > .toggle {
+  cursor: pointer;
+  display: inline-block;
+  width: 1em;
+}
+.folder-icon::before {
+  content: "📁";
+  margin-right: 4px;
+}
 
 /* Datei-Icon */
-.file-icon::before   { content: "📄"; margin-right: 4px; }
+.file-icon::before {
+  content: "📄";
+  margin-right: 4px;
+}
 
 /* Standard: Unterverzeichnisse einklappen */
 .pdf-tree ul {
@@ -28,29 +74,19 @@
   margin-left: 1.5em;
 }
 
-/* Vorschaufenster rechts */
-#pdf-preview {
-  flex: 1;
-  margin-left: 1em;
-  border: 1px solid #ccc;
-  background: #fff;
-  display: none;
-}
-#pdf-preview iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-}
-
 /* Buttons oben */
-.expand-collapse { margin-bottom: 0.5em; }
-.expand-collapse button { margin-right: 0.5em; }
+.expand-collapse {
+  margin-bottom: 0.5em;
+}
+.expand-collapse button {
+  margin-right: 0.5em;
+}
 </style>
 
 <!-- Steuerbuttons oben -->
 <div class="expand-collapse">
-  <button id="expand-all">Expand All</button>
-  <button id="collapse-all">Collapse All</button>
+  <button id="expand-all">ausklappen</button>
+  <button id="collapse-all">einklappen</button>
 </div>
 
 <div class="pdf-tree-wrapper">
@@ -107,7 +143,8 @@ document.addEventListener('DOMContentLoaded', function() {
         link.addEventListener('click', function(e) {
             e.preventDefault();
             preview.style.display = 'block';
-            preview.innerHTML = '<iframe src="' + this.href + '"></iframe>';
+            preview.innerHTML = '<iframe src="' + this.href + '" loading="lazy"></iframe>';
+
         });
     });
 });