swissmakers_gmbh/fail2ban-ui
12
1
Fork 0
mirror of https://github.com/swissmakers/fail2ban-ui.git synced 2026-04-17 05:53:15 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix z-index and improove modal - over modal handling

Browse Source
This commit is contained in:
Michael Reber
2025-11-17 21:38:01 +01:00
parent 2456162b75
commit 59e3a5e74f
7 changed files with 45 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
pkg/web/templates/index.html
View File

@@ -654,7 +654,7 @@
<!-- Modal Templates START -->
<!-- ******************************************************************* -->
<!-- Jail Config Modal -->
<div id="jailConfigModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
<div id="jailConfigModal" class="hidden fixed inset-0 overflow-y-auto" style="z-index: 60;">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
@@ -692,7 +692,7 @@
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-xl sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
@@ -2755,32 +2755,47 @@
const html = data.jails.map(jail => {
const isEnabled = jail.enabled ? 'checked' : '';
const escapedJailName = escapeHtml(jail.jailName);
// Escape single quotes for JavaScript string
const jsEscapedJailName = jail.jailName.replace(/'/g, "\\'");
return `
<div class="flex items-center justify-between p-3 bg-gray-50">
<span class="text-sm font-medium">${jail.jailName}</span>
<div class="flex items-center justify-between gap-3 p-3 bg-gray-50">
<span class="text-sm font-medium flex-1">${escapedJailName}</span>
<!-- slider -->
<label class="inline-flex relative items-center cursor-pointer">
<input
type="checkbox"
id="toggle-${jail.jailName}"
class="sr-only peer"
${isEnabled}
/>
<div class="flex items-center gap-3">
<button
type="button"
onclick="openJailConfigModal('${jsEscapedJailName}')"
class="text-xs px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors whitespace-nowrap"
data-i18n="modal.filter_config_edit"
title="${t('modal.filter_config_edit', 'Edit Filter')}"
>
${t('modal.filter_config_edit', 'Edit Filter')}
</button>
<!-- track -->
<div
class="w-11 h-6 bg-gray-200 rounded-full
peer-focus:ring-4 peer-focus:ring-blue-300
peer-checked:bg-blue-600 transition-colors"
></div>
<!-- slider -->
<label class="inline-flex relative items-center cursor-pointer">
<input
type="checkbox"
id="toggle-${jail.jailName.replace(/[^a-zA-Z0-9]/g, '_')}"
class="sr-only peer"
${isEnabled}
/>
<!-- thumb -->
<span
class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full
transition-transform peer-checked:translate-x-5"
></span>
</label>
<!-- track -->
<div
class="w-11 h-6 bg-gray-200 rounded-full
peer-focus:ring-4 peer-focus:ring-blue-300
peer-checked:bg-blue-600 transition-colors"
></div>
<!-- thumb -->
<span
class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full
transition-transform peer-checked:translate-x-5"
></span>
</label>
</div>
</div>
`;
}).join('');