Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

refactor: enhance modal structure and styling in Proxmox firewall view for improved user experience and consistency

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 12:55:18 -05:00
parent 1f74444d97
commit f66efdd276
1 changed files with 50 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
extensions/Servers/Proxmox/views/firewall.blade.php
View File

@@ -2272,9 +2272,19 @@
<!-- Error Message Modal --> <!-- Error Message Modal -->
@if($error && $showErrorModal) @if($error && $showErrorModal)
<div class="fixed inset-0 flex items-center justify-center z-[9999] bg-black/50 backdrop-blur-sm" <!-- Modal Backdrop -->
wire:click="$set('error', ''); $set('showErrorModal', false)"> <div wire:click="$set('error', ''); $set('showErrorModal', false)"
<div class="bg-error/20 border-2 border-error rounded-lg p-6 shadow-lg max-w-3xl w-full mx-4 max-h-[80vh] overflow-y-auto" wire:click.stop> class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: block;">
</div>
<!-- Modal -->
<div class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: block;">
<div class="relative w-full max-w-3xl max-h-[80vh] overflow-y-auto bg-error/20 border-2 border-error rounded-xl shadow-2xl p-6" wire:click.stop>
<button wire:click="$set('error', ''); $set('showErrorModal', false)"
class="absolute top-4 right-4 text-error/70 hover:text-error transition-colors">
<x-ri-close-line class="size-5" />
</button>
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<x-ri-error-warning-fill class="size-6 text-error flex-shrink-0 mt-0.5" /> <x-ri-error-warning-fill class="size-6 text-error flex-shrink-0 mt-0.5" />
<div class="flex-1"> <div class="flex-1">
@@ -2283,11 +2293,6 @@
<p class="text-sm text-error/90 leading-relaxed whitespace-pre-wrap break-words">{{ $error }}</p> <p class="text-sm text-error/90 leading-relaxed whitespace-pre-wrap break-words">{{ $error }}</p>
</div> </div>
</div> </div>
<button
wire:click="$set('error', ''); $set('showErrorModal', false)"
class="text-error/70 hover:text-error transition-colors flex-shrink-0">
<x-ri-close-line class="size-5" />
</button>
</div> </div>
</div> </div>
</div> </div>
@@ -2295,17 +2300,22 @@
<!-- Add/Edit Rule Modal --> <!-- Add/Edit Rule Modal -->
@if($showRuleForm) @if($showRuleForm)
<div class="fixed inset-0 flex items-center justify-center z-[9999] bg-black/50 backdrop-blur-sm" <!-- Modal Backdrop -->
wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"> <div wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"
<div class="bg-background border border-neutral rounded-lg p-6 shadow-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto" wire:click.stop> class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
<div class="flex items-center justify-between mb-4"> style="display: block;">
<h3 class="text-lg font-semibold">{{ $editingRulePos !== null ? 'Edit Rule' : 'Create New Rule' }}</h3> </div>
<button <!-- Modal -->
wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()" <div class="fixed inset-0 z-50 flex items-center justify-center p-4"
class="text-base/50 hover:text-base transition-colors"> style="display: block;">
<x-ri-close-line class="size-5" /> <div class="relative w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6" wire:click.stop>
</button> <button wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"
</div> class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
<x-ri-close-line class="size-5" />
</button>
<div class="mb-4 pr-8">
<h3 class="text-lg font-semibold">{{ $editingRulePos !== null ? 'Edit Rule' : 'Create New Rule' }}</h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label class="block text-sm font-medium mb-2">Action</label> <label class="block text-sm font-medium mb-2">Action</label>
@@ -2436,19 +2446,30 @@
Cancel Cancel
</button> </button>
</div> </div>
</div>
</div> </div>
@endif </div>
@endif
<!-- Delete Rule Confirmation Modal --> <!-- Delete Rule Confirmation Modal -->
@if($showDeleteModal && $deletingRulePos !== null) @if($showDeleteModal && $deletingRulePos !== null)
@php @php
$ruleToDelete = collect($rules)->firstWhere('pos', $deletingRulePos); $ruleToDelete = collect($rules)->firstWhere('pos', $deletingRulePos);
@endphp @endphp
<div class="fixed inset-0 flex items-center justify-center z-[9999] bg-black/60 backdrop-blur-sm transition-opacity" <!-- Modal Backdrop -->
wire:click="cancelDeleteRule"> <div wire:click="cancelDeleteRule"
<div class="bg-background border border-neutral/30 rounded-xl p-6 shadow-2xl max-w-lg w-full mx-4 transform transition-all" wire:click.stop> class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
<div class="flex items-start gap-4 mb-6"> style="display: block;">
</div>
<!-- Modal -->
<div class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: block;">
<div class="relative w-full max-w-lg max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6" wire:click.stop>
<button wire:click="cancelDeleteRule"
class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
<x-ri-close-line class="size-5" />
</button>
<div class="mb-6 pr-8">
<div class="flex items-start gap-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-error/10 flex-shrink-0"> <div class="flex items-center justify-center w-12 h-12 rounded-full bg-error/10 flex-shrink-0">
<x-ri-delete-bin-fill class="size-6 text-error" /> <x-ri-delete-bin-fill class="size-6 text-error" />
</div> </div>
@@ -2503,13 +2524,9 @@
</div> </div>
@endif @endif
</div> </div>
<button
wire:click="cancelDeleteRule"
class="text-base/40 hover:text-base transition-colors flex-shrink-0">
<x-ri-close-line class="size-5" />
</button>
</div> </div>
<div class="flex gap-3 justify-end pt-4 border-t border-neutral/20"> </div>
<div class="flex gap-3 justify-end pt-4 border-t border-neutral/20">
<button <button
wire:click="cancelDeleteRule" wire:click="cancelDeleteRule"
class="px-5 py-2.5 bg-background-secondary border border-neutral/30 rounded-lg hover:bg-background hover:border-neutral/50 transition-all text-sm font-medium text-base/80"> class="px-5 py-2.5 bg-background-secondary border border-neutral/30 rounded-lg hover:bg-background hover:border-neutral/50 transition-all text-sm font-medium text-base/80">
@@ -2530,6 +2547,6 @@
<span wire:loading wire:target="deleteRule">Deleting...</span> <span wire:loading wire:target="deleteRule">Deleting...</span>
</button> </button>
</div> </div>
</div>
</div> </div>
@endif </div>
@endif