fix: Vollbildmodus durch seitenfüllende Dokumentansicht ersetzen

README.md

@@ -12,7 +12,7 @@ Ein in NetBox integriertes Markdown-Wiki für Betriebsdokumentationen und Anleit
 - Formatierte Word-Inhalte inklusive Tabellen und unterstützten Zwischenablage-Bildern einfügen
 - Mehrere Dokumentationen mit Ordnern, Zuordnungen und Anhängen als ZIP exportieren und wieder importieren
 - Druckoptimierte A4-Ansicht zum Drucken oder Speichern als PDF
-- Vollbild-Lesemodus für einzelne Dokumentationen
+- Seitenfüllende Großansicht per Schaltfläche oder Klick auf eine Tabelle
 - Lesbare Tabellen mit vollständigen Zellrahmen und horizontalem Inhalts-Scrolling
 - Tabellen-Presets, farbige Kopfzeilen und Zellhervorhebungen im WYSIWYG-Editor
 - Excel-Mehrblattimport: je Arbeitsblatt eine Dokumentation in einem gewählten Zielordner
@@ -27,7 +27,7 @@ Ein in NetBox integriertes Markdown-Wiki für Betriebsdokumentationen und Anleit
 
 ## Kompatibilität
 
-Die Version `0.6.0` zielt auf NetBox 4.x (mindestens 4.0). Vor einem produktiven Rollout sollte das Plugin gegen die konkret eingesetzte NetBox-Minor-Version in einer Testinstanz geprüft werden.
+Die Version `0.6.1` zielt auf NetBox 4.x (mindestens 4.0). Vor einem produktiven Rollout sollte das Plugin gegen die konkret eingesetzte NetBox-Minor-Version in einer Testinstanz geprüft werden.
 
 ## Installation
 

netbox_documentation/__init__.py

@@ -5,7 +5,7 @@ class DocumentationConfig(PluginConfig):
     name = "netbox_documentation"
     verbose_name = "NetBox Dokumentation"
     description = "Wiki und Office-Dokumentation direkt in NetBox"
-    version = "0.6.0"
+    version = "0.6.1"
     author = "LKE"
     base_url = "documentation"
     min_version = "4.0.0"

netbox_documentation/templates/netbox_documentation/document.html

@@ -50,24 +50,30 @@
     .documentation-content .doc-cell-blue { background: #dbeafe !important; color: #212529; }
     .documentation-content .doc-cell-middle { vertical-align: middle !important; }
     .documentation-content p { max-width: 90rem; }
-    #documentation-viewer:fullscreen {
+    .documentation-content table { cursor: zoom-in; }
-      width: 100%;
+    #documentation-viewer.documentation-page-focus {
+      position: fixed;
+      inset: 0;
+      z-index: 1055;
+      width: 100vw;
       max-width: none;
-      height: 100%;
+      height: 100vh;
-      padding: 1.25rem;
+      padding: 1.5rem;
       overflow: auto;
       background: var(--tblr-body-bg, #fff);
     }
-    #documentation-viewer:fullscreen .card { min-height: calc(100vh - 2.5rem); }
+    #documentation-viewer.documentation-page-focus .card { min-height: calc(100vh - 5rem); }
-    #documentation-viewer:fullscreen .fullscreen-document-title,
+    #documentation-viewer.documentation-page-focus .fullscreen-document-title,
-    #documentation-viewer:fullscreen .fullscreen-exit { display: block !important; }
+    #documentation-viewer.documentation-page-focus .fullscreen-exit { display: block !important; }
+    #documentation-viewer.documentation-page-focus .documentation-content table { cursor: default; }
+    body.documentation-page-focus-open { overflow: hidden; }
     .fullscreen-document-title { display: none; margin: 0 4rem 1rem 0; }
     .fullscreen-exit { display: none; position: fixed; top: 1rem; right: 1rem; z-index: 10; }
   </style>
 {% endblock head %}
 {% block extra_controls %}
   <button type="button" id="documentation-fullscreen" class="btn btn-outline-secondary">
-    <i class="mdi mdi-fullscreen"></i> Vollbild
+    <i class="mdi mdi-arrow-expand-all"></i> Großansicht
   </button>
   <a href="{% url 'plugins:netbox_documentation:document_print' pk=object.pk %}" target="_blank" class="btn btn-outline-secondary">
     <i class="mdi mdi-printer"></i> Drucken / PDF
@@ -77,7 +83,7 @@
 <div class="row">
   <div class="col col-md-9" id="documentation-viewer">
     <h1 class="fullscreen-document-title">{{ object.title }}</h1>
-    <button type="button" class="btn btn-secondary fullscreen-exit" id="documentation-fullscreen-exit"><i class="mdi mdi-fullscreen-exit"></i> Vollbild beenden</button>
+    <button type="button" class="btn btn-secondary fullscreen-exit" id="documentation-fullscreen-exit"><i class="mdi mdi-arrow-collapse-all"></i> Großansicht beenden</button>
     {% if object.summary %}<p class="lead">{{ object.summary }}</p>{% endif %}
     <div class="card"><div class="card-body rendered-markdown documentation-content">{{ object.rendered_body|safe }}</div></div>
   </div>
@@ -100,13 +106,28 @@
       const viewer = document.getElementById('documentation-viewer');
       const openButton = document.getElementById('documentation-fullscreen');
       const closeButton = document.getElementById('documentation-fullscreen-exit');
-      if (!viewer || !openButton || !viewer.requestFullscreen) {
+      if (!viewer || !openButton || !closeButton) return;
-        if (openButton) openButton.style.display = 'none';
+      const openViewer = () => {
-        return;
+        viewer.classList.add('documentation-page-focus');
-      }
+        document.body.classList.add('documentation-page-focus-open');
-      openButton.addEventListener('click', () => viewer.requestFullscreen());
+        viewer.scrollTop = 0;
-      closeButton.addEventListener('click', () => {
+      };
-        if (document.fullscreenElement) document.exitFullscreen();
+      const closeViewer = () => {
+        viewer.classList.remove('documentation-page-focus');
+        document.body.classList.remove('documentation-page-focus-open');
+      };
+      openButton.addEventListener('click', openViewer);
+      closeButton.addEventListener('click', closeViewer);
+      viewer.querySelectorAll('.documentation-content table').forEach(table => {
+        table.title = 'Tabelle in Großansicht öffnen';
+        table.addEventListener('click', event => {
+          if (viewer.classList.contains('documentation-page-focus')) return;
+          if (event.target.closest('a, button, input, select, textarea')) return;
+          openViewer();
+        });
+      });
+      document.addEventListener('keydown', event => {
+        if (event.key === 'Escape' && viewer.classList.contains('documentation-page-focus')) closeViewer();
       });
     });
   </script>

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "netbox-documentation"
-version = "0.6.0"
+version = "0.6.1"
 description = "Integrated Markdown wiki and office document importer for NetBox"
 readme = "README.md"
 requires-python = ">=3.10"