Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Refactor Proxmox server views for improved layout and styling

Browse Source 
- Updated server card component to use a more compact layout with adjusted spacing and styling.
- Enhanced server status display with improved icon sizes and colors.
- Modified quick info row to use smaller text and adjusted labels for clarity.
- Refined server configuration grid for better alignment and spacing.
- Updated modal z-index values for consistent layering across various modals in statistics, storage, subdomain, and system views.
- General styling improvements for better readability and user experience.
This commit is contained in:
Joseph.Rawlings
2025-12-17 14:36:53 -05:00
parent 7794570770
commit a90aba582d
13 changed files with 517 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
extensions/Servers/Proxmox/views/cloud-init.blade.php
View File

@@ -53,7 +53,7 @@
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
<x-ri-question-line class="size-4" />
</button>
<div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center p-4">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6"
x-on:keydown.escape.window="open = false">
@@ -102,7 +102,7 @@
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
<x-ri-question-line class="size-4" />
</button>
<div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center p-4">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6"
x-on:keydown.escape.window="open = false">
@@ -162,7 +162,7 @@
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">Use distro-friendly names. Leave blank to keep the template default.</p>
<div x-cloak x-show="showCiUserModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div x-cloak x-show="showCiUserModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showCiUserModal = false"></div>
<div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showCiUserModal = false">
@@ -225,7 +225,7 @@
<p class="text-xs text-gray-500 dark:text-gray-400">Matches the Overview tab control. Use Save for database only, Save &amp; Apply to push via cloud-init.</p>
@if(isset($server->password) && $server->password)
<div x-cloak x-show="showPasswordViewModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div x-cloak x-show="showPasswordViewModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordViewModal = false"></div>
<div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showPasswordViewModal = false"
@@ -262,7 +262,7 @@
</div>
@endif
<div x-cloak x-show="showPasswordEditModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div x-cloak x-show="showPasswordEditModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()"></div>
<div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()">
@@ -340,7 +340,7 @@
<x-ri-close-line class="inline size-4" />
</button>
<div x-cloak x-show="showKeyModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div x-cloak x-show="showKeyModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showKeyModal = false"></div>
<div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showKeyModal = false">
@@ -378,7 +378,7 @@
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">Add as many keys as needed. The platform management key is always kept but never shown.</p>
<div x-cloak x-show="showAddKeyModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div x-cloak x-show="showAddKeyModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showAddKeyModal = false"></div>
<div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showAddKeyModal = false">
@@ -430,7 +430,7 @@
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
<x-ri-question-line class="size-4" />
</button>
<div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center p-4">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6"
x-on:keydown.escape.window="open = false">
@@ -525,7 +525,7 @@
@endforeach
</div>
<div x-cloak x-show="showNetworkModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div x-cloak x-show="showNetworkModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showNetworkModal = false; $wire.cancelEditingNetwork()"></div>
<div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-2xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()">
@@ -589,7 +589,7 @@
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
<x-ri-question-line class="size-4" />
</button>
<div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center p-4">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6"
x-on:keydown.escape.window="open = false">
@@ -649,7 +649,7 @@
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">Appended to short hostnames for resolution.</p>
<div x-cloak x-show="showDnsDomainModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div x-cloak x-show="showDnsDomainModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showDnsDomainModal = false"></div>
<div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showDnsDomainModal = false">
@@ -704,7 +704,7 @@
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Entries are applied in order. Add one IPv4/IPv6 resolver per line.</p>
<div x-cloak x-show="showAddDnsModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div x-cloak x-show="showAddDnsModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showAddDnsModal = false"></div>
<div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showAddDnsModal = false">
@@ -811,7 +811,7 @@
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
<x-ri-question-line class="size-4" />
</button>
<div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center p-4">
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6"
x-on:keydown.escape.window="open = false">