fix: refactor firewall management header for improved layout and accessibility
This commit is contained in:
@@ -187,29 +187,34 @@
|
||||
|
||||
{{-- Page Header --}}
|
||||
<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
|
||||
title="Firewall Management"
|
||||
icon="ri-shield-line"
|
||||
subtitle="Configure firewall rules, policies, aliases, and IPSets for your virtual machine."
|
||||
class="mb-0">
|
||||
<x-slot name="actions">
|
||||
<x-proxmox::ui.help-modal title="Firewall Management" icon="ri-question-line">
|
||||
<x-slot name="description">
|
||||
<p class="text-sm text-base/90 mb-4">
|
||||
The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies.
|
||||
</p>
|
||||
</x-slot>
|
||||
<x-slot name="details">
|
||||
<div class="space-y-2">
|
||||
<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">IP Aliases:</span> Define named groups of IP addresses for easier rule management.</p>
|
||||
<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">Security Logs:</span> Monitor firewall activity and blocked attempts.</p>
|
||||
</div>
|
||||
</x-slot>
|
||||
</x-proxmox::ui.help-modal>
|
||||
</x-slot>
|
||||
</x-proxmox::ui.section-header>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between group mb-6">
|
||||
<div class="flex items-start gap-3.5">
|
||||
<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">
|
||||
<x-ri-shield-line class="size-5 transition-colors duration-200" style="color: #0d6efd;" />
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: .25rem;">
|
||||
<div class="flex items-start gap-2">
|
||||
<h2 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Firewall Management</h2>
|
||||
<x-proxmox::ui.help-modal title="Firewall Management" icon="ri-information-line">
|
||||
<x-slot name="description">
|
||||
<p class="text-sm text-base/90 mb-4">
|
||||
The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies.
|
||||
</p>
|
||||
</x-slot>
|
||||
<x-slot name="details">
|
||||
<div class="space-y-2">
|
||||
<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">IP Aliases:</span> Define named groups of IP addresses for easier rule management.</p>
|
||||
<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">Security Logs:</span> Monitor firewall activity and blocked attempts.</p>
|
||||
</div>
|
||||
</x-slot>
|
||||
</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>
|
||||
|
||||
{{-- Error Modal --}}
|
||||
|
||||
Reference in New Issue
Block a user