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

23
extensions/Servers/Proxmox/views/reinstall.blade.php
View File

@@ -82,6 +82,7 @@
<div x-data="{
open: false,
pageLoaded: false,
activeSection: null,
pendingSection: null,
transitionDelay: 220,
@@ -106,7 +107,8 @@
this.activeSection = key;
}
}">
}"
x-init="setTimeout(() => pageLoaded = true, 100)">
@if($isProtected)
<x-proxmox::ui.button
@click="open = true"
@@ -122,8 +124,20 @@
@endif
<template x-if="open">
<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 overflow-y-auto">
<div class="bg-white rounded-2xl p-6 w-full max-w-4xl shadow-2xl border border-neutral/30 my-8">
<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 overflow-y-auto"
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-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div class="bg-white rounded-2xl p-6 w-full max-w-4xl shadow-2xl border border-neutral/30 my-8"
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"
x-transition:leave-end="opacity-0 scale-95">
<div class="flex flex-col gap-2 mb-6">
<h2 class="text-2xl font-semibold text-base">Reinstall Server</h2>
@if($isProtected)
@@ -185,7 +199,8 @@
$isSelected = (string) $template->id === (string) ($os ?? '');
@endphp
<label wire:key="os-card-{{ $template->id }}"
class="relative flex items-center gap-4 rounded-xl border p-4 cursor-pointer transition-all duration-150
class="relative flex items-center gap-4 rounded-xl border p-4 cursor-pointer
transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
@if($isSelected) border-primary bg-primary/5 ring-2 ring-primary/40 shadow-lg @else border-neutral/60 hover:border-primary/60 @endif">
<input type="radio" class="sr-only" wire:model.live="os" value="{{ $template->id }}">
<div class="shrink-0">