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

27
extensions/Servers/Proxmox/views/components/ui/card.blade.php
View File

@@ -39,26 +39,27 @@
<div
{{ $attributes->class([
'lte-card lte-slide-in-up',
'lte-card lte-slide-in-up transition-all duration-300 ease-out hover:shadow-md',
$variantClasses,
'cursor-pointer' => $clickable,
'cursor-pointer hover:-translate-y-0.5 hover:scale-[1.002]' => $clickable,
'hover:border-gray-300 dark:hover:border-gray-600' => $hover,
]) }}
@if($collapsible)
x-data="{ isCollapsed: {{ $collapsed ? 'true' : 'false' }} }"
@endif
>
@if($title || $actions)
<div class="lte-card-header">
<div class="lte-card-header transition-colors duration-200 hover:bg-gray-50/50 dark:hover:bg-gray-800/30">
<h3 class="lte-card-title">
@if($icon)
<span class="lte-info-box-icon lte-bg-light rounded" style="width: 36px; height: 36px; font-size: 1rem;">
<span class="lte-info-box-icon lte-bg-light rounded transition-transform duration-200 hover:scale-110" style="width: 36px; height: 36px; font-size: 1rem;">
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
</span>
@endif
<span>
{{ $title }}
@if($subtitle)
<small class="lte-text-muted d-block" style="font-size: 0.8rem; font-weight: normal;">{{ $subtitle }}</small>
<small class="lte-text-muted d-block transition-opacity duration-200" style="font-size: 0.8rem; font-weight: normal;">{{ $subtitle }}</small>
@endif
</span>
</h3>
@@ -71,11 +72,11 @@
<button
type="button"
@click="isCollapsed = !isCollapsed"
class="lte-btn lte-btn-sm lte-btn-outline-secondary"
class="lte-btn lte-btn-sm lte-btn-outline-secondary transition-all duration-200 hover:scale-105"
style="padding: 0.25rem 0.5rem;"
>
<x-ri-arrow-down-s-line
class="size-4 transition-transform duration-200"
class="size-4 transition-transform duration-300 ease-out"
x-bind:class="isCollapsed ? 'rotate-180' : ''"
/>
</button>
@@ -89,12 +90,12 @@
class="lte-card-body"
@if($collapsible)
x-show="!isCollapsed"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-2"
@endif
>
{{ $slot }}