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/stat-card.blade.php
View File

@@ -62,22 +62,22 @@
<{{ $tag }}
@if($href) href="{{ $href }}" @endif
{{ $attributes->class([
'lte-small-box lte-fade-in',
'lte-small-box lte-fade-in transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 hover:scale-[1.01]',
$variantConfig[$variant]['class'] ?? 'lte-bg-primary',
]) }}
>
<div class="lte-inner">
<h3>{{ $prefix }}{{ $value }}@if($suffix)<sup style="font-size: 0.6em;">{{ $suffix }}</sup>@endif</h3>
<p>{{ $label }}</p>
<h3 class="transition-transform duration-200 group-hover:scale-105">{{ $prefix }}{{ $value }}@if($suffix)<sup style="font-size: 0.6em;">{{ $suffix }}</sup>@endif</h3>
<p class="transition-opacity duration-200 opacity-90 group-hover:opacity-100">{{ $label }}</p>
</div>
@if($icon)
<div class="lte-icon">
<div class="lte-icon transition-transform duration-300 hover:scale-110 hover:rotate-3">
<x-dynamic-component :component="$icon" style="font-size: 70px; width: 70px; height: 70px;" />
</div>
@endif
@if($statusText)
<div class="lte-small-box-footer">
{{ $statusText }} <x-ri-arrow-right-line class="inline size-4" />
<div class="lte-small-box-footer transition-colors duration-200 hover:bg-black/10">
{{ $statusText }} <x-ri-arrow-right-line class="inline size-4 transition-transform duration-200 group-hover:translate-x-1" />
</div>
@endif
</{{ $tag }}>
@@ -86,18 +86,18 @@
<{{ $tag }}
@if($href) href="{{ $href }}" @endif
{{ $attributes->class([
'lte-info-box lte-fade-in',
'lte-info-box lte-fade-in group transition-all duration-300 hover:shadow-md hover:-translate-y-0.5',
'cursor-pointer' => $href || $clickable,
]) }}
>
@if($icon)
<span class="lte-info-box-icon lte-bg-primary rounded" style="color: #fff;">
<span class="lte-info-box-icon lte-bg-primary rounded transition-transform duration-300 group-hover:scale-110" style="color: #fff;">
<x-dynamic-component :component="$icon" class="size-6 {{ $iconClass }}" />
</span>
@endif
<div class="lte-info-box-content">
<span class="lte-info-box-text">{{ $label }}</span>
<span class="lte-info-box-number">
<span class="lte-info-box-text transition-opacity duration-200 opacity-80 group-hover:opacity-100">{{ $label }}</span>
<span class="lte-info-box-number transition-colors duration-200 group-hover:text-primary">
@if($prefix)<small class="lte-text-muted">{{ $prefix }}</small>@endif{{ $value }}@if($suffix)<small class="lte-text-muted">{{ $suffix }}</small>@endif
</span>
@if($change !== null || $changeLabel)