Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Enhance UI transitions and loading effects across Proxmox views

Browse Source 
- 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.
This commit is contained in:
Joseph.Rawlings
2025-12-17 19:50:05 -05:00
parent 801898e295
commit a7cb561053
21 changed files with 307 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php
View File

@@ -111,9 +111,15 @@
'empty-state-lte-regular' => !$compact,
'empty-state-lte-compact' => $compact,
]) }}
x-data="{ loaded: false }"
x-init="setTimeout(() => loaded = true, 100)"
:class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
style="transition: all 0.5s ease-out;"
>
@if($icon)
<div class="empty-state-lte-icon {{ $compact ? 'empty-state-lte-icon-compact' : 'empty-state-lte-icon-regular' }}">
<div class="empty-state-lte-icon {{ $compact ? 'empty-state-lte-icon-compact' : 'empty-state-lte-icon-regular' }} transition-transform duration-300 hover:scale-110"
:class="loaded ? 'scale-100' : 'scale-90'"
style="transition: transform 0.5s ease-out 0.1s;">
<x-dynamic-component
:component="$icon"
class="{{ $iconClass ?? '' }}"
@@ -121,18 +127,24 @@
</div>
@endif
<h3 class="empty-state-lte-title {{ $compact ? 'empty-state-lte-title-compact' : 'empty-state-lte-title-regular' }}">
<h3 class="empty-state-lte-title {{ $compact ? 'empty-state-lte-title-compact' : 'empty-state-lte-title-regular' }}"
:class="loaded ? 'opacity-100' : 'opacity-0'"
style="transition: opacity 0.4s ease-out 0.15s;">
{{ $title }}
</h3>
@if($description)
<p class="empty-state-lte-description {{ $compact ? 'empty-state-lte-description-compact' : 'empty-state-lte-description-regular' }}">
<p class="empty-state-lte-description {{ $compact ? 'empty-state-lte-description-compact' : 'empty-state-lte-description-regular' }}"
:class="loaded ? 'opacity-100' : 'opacity-0'"
style="transition: opacity 0.4s ease-out 0.25s;">
{{ $description }}
</p>
@endif
@if($slot->isNotEmpty())
<div class="{{ $compact ? 'empty-state-lte-actions-compact' : 'empty-state-lte-actions-regular' }}">
<div class="{{ $compact ? 'empty-state-lte-actions-compact' : 'empty-state-lte-actions-regular' }}"
:class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'"
style="transition: all 0.4s ease-out 0.35s;">
{{ $slot }}
</div>
@endif