fix: refactor firewall management header for improved layout and accessibility
This commit is contained in:
@@ -187,29 +187,34 @@
|
|||||||
|
|
||||||
{{-- Page Header --}}
|
{{-- Page Header --}}
|
||||||
<div :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'" style="transition: all 0.4s ease-out;">
|
<div :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'" style="transition: all 0.4s ease-out;">
|
||||||
<x-proxmox::ui.section-header
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between group mb-6">
|
||||||
title="Firewall Management"
|
<div class="flex items-start gap-3.5">
|
||||||
icon="ri-shield-line"
|
<div style="width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: .5rem; background: rgba(13, 110, 253, 0.1);" class="transition-transform duration-300 group-hover:scale-105">
|
||||||
subtitle="Configure firewall rules, policies, aliases, and IPSets for your virtual machine."
|
<x-ri-shield-line class="size-5 transition-colors duration-200" style="color: #0d6efd;" />
|
||||||
class="mb-0">
|
</div>
|
||||||
<x-slot name="actions">
|
<div style="display: flex; flex-direction: column; gap: .25rem;">
|
||||||
<x-proxmox::ui.help-modal title="Firewall Management" icon="ri-question-line">
|
<div class="flex items-start gap-2">
|
||||||
<x-slot name="description">
|
<h2 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Firewall Management</h2>
|
||||||
<p class="text-sm text-base/90 mb-4">
|
<x-proxmox::ui.help-modal title="Firewall Management" icon="ri-information-line">
|
||||||
The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies.
|
<x-slot name="description">
|
||||||
</p>
|
<p class="text-sm text-base/90 mb-4">
|
||||||
</x-slot>
|
The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies.
|
||||||
<x-slot name="details">
|
</p>
|
||||||
<div class="space-y-2">
|
</x-slot>
|
||||||
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns.</p>
|
<x-slot name="details">
|
||||||
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Aliases:</span> Define named groups of IP addresses for easier rule management.</p>
|
<div class="space-y-2">
|
||||||
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Sets:</span> Manage collections of IP addresses for advanced filtering.</p>
|
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns.</p>
|
||||||
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">Security Logs:</span> Monitor firewall activity and blocked attempts.</p>
|
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Aliases:</span> Define named groups of IP addresses for easier rule management.</p>
|
||||||
</div>
|
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Sets:</span> Manage collections of IP addresses for advanced filtering.</p>
|
||||||
</x-slot>
|
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">Security Logs:</span> Monitor firewall activity and blocked attempts.</p>
|
||||||
</x-proxmox::ui.help-modal>
|
</div>
|
||||||
</x-slot>
|
</x-slot>
|
||||||
</x-proxmox::ui.section-header>
|
</x-proxmox::ui.help-modal>
|
||||||
|
</div>
|
||||||
|
<p style="font-size: .875rem; color: #6c757d; margin: 0;">Configure firewall rules, policies, aliases, and IPSets for your virtual machine.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Error Modal --}}
|
{{-- Error Modal --}}
|
||||||
|
|||||||
Reference in New Issue
Block a user