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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user