Joseph.Rawlings
16cd5f05de
- 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.
52 lines
2.4 KiB
PHP
52 lines
2.4 KiB
PHP
<div class="flex flex-col flex-1" style="min-height: calc(100vh - 30rem);">
|
|
<style>
|
|
@keyframes cardEntrance {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.server-card-enter {
|
|
animation: cardEntrance 0.4s ease-out both;
|
|
}
|
|
</style>
|
|
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pb-5">
|
|
<span class="text-2xl font-bold">Servers</span>
|
|
@if(count($servers) > 1)
|
|
<div class="relative w-full sm:w-64" x-data="{ search: '' }">
|
|
<svg class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-base/40 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
<input type="text"
|
|
x-model="search"
|
|
@input="
|
|
document.querySelectorAll('[data-server-card]').forEach(card => {
|
|
const name = card.dataset.serverName.toLowerCase();
|
|
const ip = card.dataset.serverIp.toLowerCase();
|
|
const q = search.toLowerCase();
|
|
card.style.display = (!q || name.includes(q) || ip.includes(q)) ? '' : 'none';
|
|
});
|
|
"
|
|
placeholder="Filter servers..."
|
|
class="w-full pl-9 pr-3 py-2 text-sm rounded-lg border border-neutral/60 bg-background-secondary focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4 flex-1">
|
|
@foreach($servers as $index => $server)
|
|
<div class="server-card-enter"
|
|
style="animation-delay: {{ min($index * 80, 800) }}ms"
|
|
data-server-card
|
|
data-server-name="{{ $server->hostname ?? $server->service->product->name ?? '' }}"
|
|
data-server-ip="{{ $server->primaryIpv4->ip ?? '' }}">
|
|
<livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div> |