diff --git a/modules/pihole/assets/pihole.css b/modules/pihole/assets/pihole.css index 82bac11..9a3c512 100644 --- a/modules/pihole/assets/pihole.css +++ b/modules/pihole/assets/pihole.css @@ -233,6 +233,53 @@ gap: 6px; } +.pihole-instance-form { + margin-top: 16px; + display: grid; + gap: 18px; +} + +.pihole-instance-form-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: start; +} + +.pihole-form-field-wide { + grid-column: 1 / -1; +} + +.pihole-checkbox-field { + display: inline-flex; + align-items: center; + gap: 10px; + min-height: 44px; + padding: 10px 12px; + border: 1px solid var(--line); + border-radius: 12px; + background: rgba(255, 255, 255, 0.5); + font-weight: 600; + color: var(--text); +} + +.pihole-checkbox-field input { + width: 18px; + height: 18px; + margin: 0; +} + +.pihole-modal-card { + width: min(760px, 96vw); + padding: 20px; +} + +.pihole-modal-actions { + display: flex; + justify-content: flex-end; + gap: 10px; + flex-wrap: wrap; + padding-top: 4px; +} + .icon-button { border: 1px solid var(--line); background: var(--panel); @@ -284,4 +331,8 @@ .pihole-inline input { width: 100%; } + + .pihole-instance-form-grid { + grid-template-columns: 1fr; + } } diff --git a/modules/pihole/assets/pihole_instances.js b/modules/pihole/assets/pihole_instances.js index 4ff15e9..34beada 100644 --- a/modules/pihole/assets/pihole_instances.js +++ b/modules/pihole/assets/pihole_instances.js @@ -69,6 +69,9 @@ const openModal = () => { modal.classList.add('is-open'); modal.setAttribute('aria-hidden', 'false'); + if (idInput) { + window.setTimeout(() => idInput.focus(), 20); + } }; const closeModal = () => { @@ -104,6 +107,21 @@ } if (cancelBtn) { - cancelBtn.addEventListener('click', () => resetForm()); + cancelBtn.addEventListener('click', () => { + resetForm(); + closeModal(); + }); } + + modal.addEventListener('click', (event) => { + if (event.target === modal) { + closeModal(); + } + }); + + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape' && modal.classList.contains('is-open')) { + closeModal(); + } + }); })(); diff --git a/modules/pihole/pages/instances.php b/modules/pihole/pages/instances.php index 0ec5220..4e37a83 100644 --- a/modules/pihole/pages/instances.php +++ b/modules/pihole/pages/instances.php @@ -372,37 +372,43 @@ if ($primaryId === '') {