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

67
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,16 +2300,21 @@
<!-- 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">
<!-- 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>
@@ -2445,10 +2455,21 @@
@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,11 +2524,7 @@
</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>
<div class="flex gap-3 justify-end pt-4 border-t border-neutral/20">
<button