diff --git a/backend/static/css/components.css b/backend/static/css/components.css index f1f3d1e..ba5dfd0 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -670,6 +670,26 @@ textarea.form-control { } @media (min-width: 768px) { .modal-handle { display: none; } } +.modal-overlay--fullscreen { + padding: 0; +} +.modal-overlay--fullscreen .modal { + width: 100%; + max-width: 100%; + height: 100%; + max-height: 100%; + border-radius: 0; + border: none; +} +.modal-overlay--fullscreen .modal-handle { display: none; } + +.ausweis-frame { + width: 100%; + height: 100%; + border: none; + flex: 1 1 auto; +} + .modal-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--c-border-light); diff --git a/backend/static/js/app.js b/backend/static/js/app.js index e4bb234..2a7a03d 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '119'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '120'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const App = (() => { diff --git a/backend/static/js/pages/dog-profile.js b/backend/static/js/pages/dog-profile.js index 9909b0a..3123faf 100644 --- a/backend/static/js/pages/dog-profile.js +++ b/backend/static/js/pages/dog-profile.js @@ -251,7 +251,7 @@ window.Page_dog_profile = (() => { }); document.getElementById('dp-ausweis-btn')?.addEventListener('click', () => { - window.open(`/ausweis/${dog.id}`, '_blank'); + _showAusweisModal(dog.id); }); document.getElementById('dp-share-btn')?.addEventListener('click', () => { @@ -293,6 +293,19 @@ window.Page_dog_profile = (() => { }); } + // ---------------------------------------------------------- + // AUSWEIS + // ---------------------------------------------------------- + function _showAusweisModal(dogId) { + UI.modal.open({ + title: 'Heimtierausweis', + body: ``, + footer: ` + ${UI.icon('printer')} Drucken`, + size: 'fullscreen', + }); + } + // ---------------------------------------------------------- // TEILEN // ---------------------------------------------------------- diff --git a/backend/static/js/ui.js b/backend/static/js/ui.js index 22f66d0..8f1101e 100644 --- a/backend/static/js/ui.js +++ b/backend/static/js/ui.js @@ -55,11 +55,11 @@ const UI = (() => { const modal = (() => { let _current = null; - function open({ title, body, footer, onClose } = {}) { + function open({ title, body, footer, onClose, size } = {}) { close(); // vorheriges schließen const overlay = document.createElement('div'); - overlay.className = 'modal-overlay'; + overlay.className = 'modal-overlay' + (size ? ` modal-overlay--${size}` : ''); overlay.innerHTML = `