Enhance Proxmox views with improved loading states and UI updates

- Updated serverplaceholder.blade.php to enhance loading skeletons for server details.
- Added navigation breadcrumbs to statistics, subdomain, and system views for better user experience.
- Improved loading indicators for CPU, network, memory, and disk charts in statistics.blade.php.
- Refined storage.blade.php layout with section dividers and improved drive display, including bus type indicators and quota usage.
- Enhanced VNC and Xterm popups with a new header design, loading animations, and reconnect functionality.
- Added error handling for VNC and Xterm connections to inform users when unable to connect.
This commit is contained in:
2026-02-24 19:51:46 -05:00
parent af62a16354
commit 16cd5f05de
40 changed files with 1423 additions and 475 deletions

View File

@@ -1,4 +1,9 @@
<x-proxmox::layout :server="$server" view="display" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
<div class="flex items-center gap-1.5 text-xs text-base/50 mb-4">
<a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate class="hover:text-primary transition-colors">Overview</a>
<x-ri-arrow-right-s-line class="size-3" />
<span class="text-base/70">Display</span>
</div>
<div class="flex items-center justify-between mb-6">
<div>
<div class="flex items-center gap-2 min-w-0">
@@ -144,7 +149,7 @@
<select
id="display-adapter"
wire:model.live="selectedDisplay"
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-secondary"
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors"
>
@foreach($this->displayOptions as $value => $meta)
<option value="{{ $value }}">{{ $meta['label'] }}</option>
@@ -177,7 +182,7 @@
max="256"
step="16"
wire:model.live="displayMemory"
class="w-24 bg-background border border-neutral rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-secondary"
class="w-24 bg-background border border-neutral rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors"
/>
</div>
<p class="text-xs text-base/60">VirtIO-GPU supports up to 256 MB. Pick the lowest value your workload requires.</p>
@@ -192,6 +197,8 @@
<div class="text-sm text-error">{{ $message }}</div>
@enderror
<div class="border-t border-neutral/30 pt-4"></div>
<div class="flex flex-col gap-2">
<label class="inline-flex items-start gap-3 bg-background border border-neutral rounded-md px-3 py-3">
<input type="checkbox" wire:model.live="tabletEnabled" class="rounded border-neutral text-secondary focus:ring-secondary mt-1">
@@ -202,6 +209,8 @@
</label>
</div>
<div class="border-t border-neutral/30 pt-4"></div>
<div class="flex flex-col gap-2">
<div class="flex flex-wrap gap-3">
<x-button.primary wire:click="saveDisplaySettings" wire:loading.attr="disabled">