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,41 +1,10 @@
<x-proxmox::layout :server="$server" view="boot-order" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
<style>
/* Hide sidebar in problematic resolution range (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* Hide the sidebar - must override Tailwind's md:flex which applies display:flex at 768px+ */
/* Using high specificity selectors to ensure override */
html body > div.w-full.flex.flex-grow > aside.w-64.h-screen,
html body > div.w-full.flex > aside.w-64.h-screen,
html body aside.w-64.h-screen.mt-14,
html body aside.w-64.h-screen.mt-24,
body aside.w-64[class*="md:flex"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
max-width: 0 !important;
overflow: hidden !important;
position: absolute !important;
left: -9999px !important;
}
/* Remove left margin from main content container when sidebar is hidden */
html body > div.w-full.flex.flex-grow > div[class*="md:ml-64"],
html body > div.w-full.flex > div[class*="md:ml-64"],
body > div > div[class*="md:ml-64"],
div[class*="md:ml-64"] {
margin-left: 0 !important;
}
/* Remove right margin for RTL when sidebar is hidden */
html body > div.w-full.flex.flex-grow > div[class*="rtl:md:mr-64"],
html body > div.w-full.flex > div[class*="rtl:md:mr-64"],
body > div > div[class*="rtl:md:mr-64"],
div[class*="rtl:md:mr-64"] {
margin-right: 0 !important;
}
}
</style>
<div class="space-y-4 lg:space-y-6 px-2 sm:px-0 overflow-x-hidden">
<div class="flex items-center gap-1.5 text-xs text-base/50 mb-2">
<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">Boot Order</span>
</div>
<div class="bg-info/10 border border-info/30 rounded-lg p-3 lg:p-4"
x-data="{
isCollapsed: localStorage.getItem('boot-order-notice-collapsed') === 'true',