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

31
extensions/Servers/Proxmox/views/components/ui/alert.blade.php
View File

@@ -61,7 +61,7 @@
role="alert"
{{ $attributes->class([
$componentClass,
'lte-fade-in',
'lte-fade-in transition-all duration-300 hover:shadow-sm',
$dismissible ? 'lte-alert-dismissible' : '',
]) }}
@if($dismissible || $collapsible)
@@ -70,16 +70,16 @@
@if($collapsible) collapsed: {{ $collapsed ? 'true' : 'false' }} @endif
}"
x-show="show"
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 scale-95"
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 scale-100"
x-transition:leave-end="opacity-0 -translate-y-2 scale-95"
@endif
>
<div class="flex gap-3 items-start">
<x-dynamic-component :component="$config['icon']" class="size-5 mt-0.5 shrink-0" />
<x-dynamic-component :component="$config['icon']" class="size-5 mt-0.5 shrink-0 transition-transform duration-200 hover:scale-110" />
<div class="flex-1 min-w-0">
@if($title)
<h5 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;">{{ $title }}</h5>
@@ -87,9 +87,12 @@
<div
@if($collapsible)
x-show="!collapsed"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@endif
>
{{ $slot }}
@@ -102,11 +105,11 @@
<button
type="button"
@click="collapsed = !collapsed"
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;"
>
<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="collapsed ? 'rotate-180' : ''"
/>
</button>
@@ -115,7 +118,7 @@
<button
type="button"
@click="show = false"
class="lte-btn-close"
class="lte-btn-close transition-opacity duration-200 hover:opacity-70"
aria-label="Close"
></button>
@endif