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,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',
|
||||
|
||||
Reference in New Issue
Block a user