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

16
extensions/Servers/Proxmox/views/backups.blade.php
View File

@@ -1,6 +1,8 @@
<x-proxmox::layout :server="$server" view="backups" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="space-y-4" x-data="{ pageLoaded: false }" x-init="setTimeout(() => pageLoaded = true, 50)">
<div class="flex items-center justify-between"
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
style="transition: all 0.4s ease-out;">
<div class="flex items-center gap-2">
<h2 class="text-lg font-semibold">Backups</h2>
<div class="relative" x-data="{ open: false }" x-cloak>
@@ -37,7 +39,9 @@
</div>
</div>
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm">
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md"
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
style="transition: all 0.4s ease-out 0.15s;">
<div class="overflow-x-auto rounded-lg">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
<thead>
@@ -49,9 +53,11 @@
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700 text-gray-700 dark:text-gray-300">
@forelse($backups as $backup)
@forelse($backups as $index => $backup)
@php $backup = (object) $backup; @endphp
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200"
:class="pageLoaded ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-2'"
:style="'transition-delay: {{ ($index + 2) * 75 }}ms'">
<td class="px-3 py-3"><span class="font-medium text-gray-800 dark:text-gray-200">{{ $backup->notes ?: '—' }}</span></td>
<td class="px-3 py-3">{{ Illuminate\Support\Number::fileSize($backup->size, 2) }}</td>
<td class="px-3 py-3">{{ date('Y-m-d H:i', $backup->ctime) }}</td>