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

14
extensions/Servers/Proxmox/views/display.blade.php
View File

@@ -1,5 +1,9 @@
<x-proxmox::layout :server="$server" view="display" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center justify-between mb-6"
x-data="{ pageLoaded: false }"
x-init="setTimeout(() => pageLoaded = true, 50)"
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
style="transition: all 0.4s ease-out;">
<div>
<div class="flex items-center gap-2 min-w-0">
<h2 class="text-xl font-semibold break-words">Display Configuration</h2>
@@ -66,8 +70,12 @@
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-lg p-6 flex flex-col gap-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"
x-data="{ cardsLoaded: false }"
x-init="setTimeout(() => cardsLoaded = true, 100)">
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-lg p-6 flex flex-col gap-6 transition-all duration-300 hover:shadow-md"
:class="cardsLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
style="transition: all 0.4s ease-out 0.1s;">
<div class="flex items-center justify-between">
<div>
<div class="flex items-center gap-2 min-w-0">