Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki 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 -->
@if($error && $showErrorModal)
<div class="fixed inset-0 flex items-center justify-center z-[9999] bg-black/50 backdrop-blur-sm"
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>
<!-- Modal Backdrop -->
<div wire:click="$set('error', ''); $set('showErrorModal', false)"
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">
<x-ri-error-warning-fill class="size-6 text-error flex-shrink-0 mt-0.5" />
<div class="flex-1">
@@ -2283,11 +2293,6 @@
<p class="text-sm text-error/90 leading-relaxed whitespace-pre-wrap break-words">{{ $error }}</p>
</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>
@@ -2295,17 +2300,22 @@
<!-- Add/Edit Rule Modal -->
@if($showRuleForm)
<div class="fixed inset-0 flex items-center justify-center z-[9999] bg-black/50 backdrop-blur-sm"
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>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">{{ $editingRulePos !== null ? 'Edit Rule' : 'Create New Rule' }}</h3>
<button
wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"
class="text-base/50 hover:text-base transition-colors">
<x-ri-close-line class="size-5" />
</button>
</div>
<!-- Modal Backdrop -->
<div wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"
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-4xl 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="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"
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>
<label class="block text-sm font-medium mb-2">Action</label>
@@ -2436,19 +2446,30 @@
Cancel
</button>
</div>
</div>
</div>
@endif
</div>
@endif
<!-- Delete Rule Confirmation Modal -->
@if($showDeleteModal && $deletingRulePos !== null)
@php
$ruleToDelete = collect($rules)->firstWhere('pos', $deletingRulePos);
@endphp
<div class="fixed inset-0 flex items-center justify-center z-[9999] bg-black/60 backdrop-blur-sm transition-opacity"
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>
<div class="flex items-start gap-4 mb-6">
<!-- Modal Backdrop -->
<div wire:click="cancelDeleteRule"
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-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">
<x-ri-delete-bin-fill class="size-6 text-error" />
</div>
@@ -2503,13 +2524,9 @@
</div>
@endif
</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 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
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">
@@ -2530,6 +2547,6 @@
<span wire:loading wire:target="deleteRule">Deleting...</span>
</button>
</div>
</div>
</div>
@endif
</div>
@endif