Joseph.Rawlings
a7cb561053
- Implemented page load animations using Alpine.js for smoother transitions in various views including firewall, help, index, network, overview, reinstall, server, statistics, storage, subdomain, and system. - Added opacity and translate effects to elements for improved visual feedback during loading. - Enhanced hover effects on cards and buttons for better user interaction. - Adjusted transition timings and delays for a more cohesive user experience.
37 lines
1.6 KiB
PHP
37 lines
1.6 KiB
PHP
{{-- Server Listing - TailServer Theme --}}
|
|
<div class="flex flex-col flex-1"
|
|
style="min-height: calc(100vh - 30rem);"
|
|
x-data="{ pageLoaded: false }"
|
|
x-init="setTimeout(() => pageLoaded = true, 50)">
|
|
{{-- Page Header --}}
|
|
<div :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
|
|
class="transition-all duration-500 ease-out">
|
|
<x-proxmox::ui.section-header
|
|
title="Servers"
|
|
icon="ri-server-line"
|
|
subtitle="Manage your virtual private servers"
|
|
/>
|
|
</div>
|
|
|
|
{{-- Server Cards Grid --}}
|
|
<div class="flex flex-col gap-4 flex-1 mt-4"
|
|
:class="pageLoaded ? 'opacity-100' : 'opacity-0'"
|
|
style="transition: opacity 0.5s ease-out 0.15s;">
|
|
@forelse($servers as $index => $server)
|
|
<div class="transform transition-all duration-500 ease-out"
|
|
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
|
|
:style="'transition-delay: {{ ($index + 1) * 100 }}ms'">
|
|
<livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
|
|
</div>
|
|
@empty
|
|
<div :class="pageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"
|
|
class="transition-all duration-500 ease-out delay-200">
|
|
<x-proxmox::ui.empty-state
|
|
title="No Servers Found"
|
|
description="You don't have any servers yet. Purchase a server to get started."
|
|
icon="ri-server-line"
|
|
/>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div> |