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

22
extensions/Servers/Proxmox/views/components/ui/modal.blade.php
View File

@@ -48,28 +48,28 @@
{{-- Backdrop --}}
<div
x-show="show"
x-transition:enter="transition ease-out duration-200"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@if($closeable) @click="show = false" @endif
class="lte-modal-backdrop"
class="lte-modal-backdrop backdrop-blur-sm"
></div>
{{-- Modal Panel --}}
<div class="fixed inset-0 flex items-center justify-center p-4">
<div
x-show="show"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-95 translate-y-4"
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
x-transition:leave-end="opacity-0 scale-95 translate-y-4"
@click.stop
class="lte-modal-content lte-slide-in-up w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto"
class="lte-modal-content lte-slide-in-up w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto shadow-2xl"
>
{{-- Header --}}
@if($title || $closeable)
@@ -92,7 +92,7 @@
@if($closeable)
<button
@click="show = false"
class="lte-btn-close"
class="lte-btn-close transition-all duration-200 hover:scale-110 hover:opacity-70"
aria-label="Close"
></button>
@endif