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

15
extensions/Servers/Proxmox/views/storage.blade.php
View File

@@ -36,9 +36,11 @@
$vmRunning = $status && $status->status !== 'stopped';
@endphp
<div class="space-y-6">
<div class="space-y-6" x-data="{ pageLoaded: false }" x-init="setTimeout(() => pageLoaded = true, 50)">
{{-- Page Header --}}
<x-proxmox::ui.section-header
<div :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
style="transition: all 0.4s ease-out;">
<x-proxmox::ui.section-header
title="Storage Management"
subtitle="Manage virtual hard disks attached to your VPS. Add, configure, or remove storage drives."
icon="ri-hard-drive-2-line"
@@ -70,7 +72,9 @@
@endif
<!-- Storage Usage Overview -->
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-theme-sm">
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-theme-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.1s;">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Storage Quota</h3>
@@ -110,7 +114,10 @@
$usagePercent = $maxAllowedStorage > 0 ? min(100, ($totalAllocatedStorage / $maxAllowedStorage) * 100) : 0;
$colorClass = $usagePercent < 70 ? 'bg-success' : ($usagePercent < 90 ? 'bg-warning' : 'bg-danger');
@endphp
<div class="{{ $colorClass }} h-3 rounded-full transition-all duration-500" style="width: {{ $usagePercent }}%"></div>
<div class="{{ $colorClass }} h-3 rounded-full transition-all duration-700 ease-out"
x-data="{ width: 0 }"
x-init="setTimeout(() => width = {{ $usagePercent }}, 300)"
:style="'width: ' + width + '%'"></div>
</div>
<div class="flex justify-between mt-2 text-xs text-base/50">
<span>{{ number_format($this->remainingStorage, 1) }} GB remaining</span>