Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code 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

27
extensions/Servers/Proxmox/views/components/ui/card.blade.php
View File

@@ -39,26 +39,27 @@
<div
{{ $attributes->class([
'lte-card lte-slide-in-up',
'lte-card lte-slide-in-up transition-all duration-300 ease-out hover:shadow-md',
$variantClasses,
'cursor-pointer' => $clickable,
'cursor-pointer hover:-translate-y-0.5 hover:scale-[1.002]' => $clickable,
'hover:border-gray-300 dark:hover:border-gray-600' => $hover,
]) }}
@if($collapsible)
x-data="{ isCollapsed: {{ $collapsed ? 'true' : 'false' }} }"
@endif
>
@if($title || $actions)
<div class="lte-card-header">
<div class="lte-card-header transition-colors duration-200 hover:bg-gray-50/50 dark:hover:bg-gray-800/30">
<h3 class="lte-card-title">
@if($icon)
<span class="lte-info-box-icon lte-bg-light rounded" style="width: 36px; height: 36px; font-size: 1rem;">
<span class="lte-info-box-icon lte-bg-light rounded transition-transform duration-200 hover:scale-110" style="width: 36px; height: 36px; font-size: 1rem;">
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
</span>
@endif
<span>
{{ $title }}
@if($subtitle)
<small class="lte-text-muted d-block" style="font-size: 0.8rem; font-weight: normal;">{{ $subtitle }}</small>
<small class="lte-text-muted d-block transition-opacity duration-200" style="font-size: 0.8rem; font-weight: normal;">{{ $subtitle }}</small>
@endif
</span>
</h3>
@@ -71,11 +72,11 @@
<button
type="button"
@click="isCollapsed = !isCollapsed"
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 0.5rem;"
>
<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="isCollapsed ? 'rotate-180' : ''"
/>
</button>
@@ -89,12 +90,12 @@
class="lte-card-body"
@if($collapsible)
x-show="!isCollapsed"
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"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-2"
@endif
>
{{ $slot }}

20
extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php
View File

@@ -111,9 +111,15 @@
'empty-state-lte-regular' => !$compact,
'empty-state-lte-compact' => $compact,
]) }}
x-data="{ loaded: false }"
x-init="setTimeout(() => loaded = true, 100)"
:class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
style="transition: all 0.5s ease-out;"
>
@if($icon)
<div class="empty-state-lte-icon {{ $compact ? 'empty-state-lte-icon-compact' : 'empty-state-lte-icon-regular' }}">
<div class="empty-state-lte-icon {{ $compact ? 'empty-state-lte-icon-compact' : 'empty-state-lte-icon-regular' }} transition-transform duration-300 hover:scale-110"
:class="loaded ? 'scale-100' : 'scale-90'"
style="transition: transform 0.5s ease-out 0.1s;">
<x-dynamic-component
:component="$icon"
class="{{ $iconClass ?? '' }}"
@@ -121,18 +127,24 @@
</div>
@endif
<h3 class="empty-state-lte-title {{ $compact ? 'empty-state-lte-title-compact' : 'empty-state-lte-title-regular' }}">
<h3 class="empty-state-lte-title {{ $compact ? 'empty-state-lte-title-compact' : 'empty-state-lte-title-regular' }}"
:class="loaded ? 'opacity-100' : 'opacity-0'"
style="transition: opacity 0.4s ease-out 0.15s;">
{{ $title }}
</h3>
@if($description)
<p class="empty-state-lte-description {{ $compact ? 'empty-state-lte-description-compact' : 'empty-state-lte-description-regular' }}">
<p class="empty-state-lte-description {{ $compact ? 'empty-state-lte-description-compact' : 'empty-state-lte-description-regular' }}"
:class="loaded ? 'opacity-100' : 'opacity-0'"
style="transition: opacity 0.4s ease-out 0.25s;">
{{ $description }}
</p>
@endif
@if($slot->isNotEmpty())
<div class="{{ $compact ? 'empty-state-lte-actions-compact' : 'empty-state-lte-actions-regular' }}">
<div class="{{ $compact ? 'empty-state-lte-actions-compact' : 'empty-state-lte-actions-regular' }}"
:class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'"
style="transition: all 0.4s ease-out 0.35s;">
{{ $slot }}
</div>
@endif

22
extensions/Servers/Proxmox/views/components/ui/modal.blade.php
View File

@@ -48,28 +48,28 @@
{{-- Backdrop --}}
<div
x-show="show"
x-transition:enter="transition ease-out duration-200"
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-150"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@if($closeable) @click="show = false" @endif
class="lte-modal-backdrop"
class="lte-modal-backdrop backdrop-blur-sm"
></div>
{{-- Modal Panel --}}
<div class="fixed inset-0 flex items-center justify-center p-4">
<div
x-show="show"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
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 translate-y-0"
x-transition:leave-end="opacity-0 scale-95 translate-y-4"
@click.stop
class="lte-modal-content lte-slide-in-up w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto"
class="lte-modal-content lte-slide-in-up w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto shadow-2xl"
>
{{-- Header --}}
@if($title || $closeable)
@@ -92,7 +92,7 @@
@if($closeable)
<button
@click="show = false"
class="lte-btn-close"
class="lte-btn-close transition-all duration-200 hover:scale-110 hover:opacity-70"
aria-label="Close"
></button>
@endif

24
extensions/Servers/Proxmox/views/components/ui/section-header.blade.php
View File

@@ -30,11 +30,11 @@
$titleStyle = $titleSizes[$size] ?? $titleSizes['lg'];
@endphp
<div {{ $attributes->class(['flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between']) }}>
<div {{ $attributes->class(['flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between group']) }}>
<div class="flex items-start gap-3.5">
@if($icon)
<div style="width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: .5rem; background: rgba(13, 110, 253, 0.1);">
<x-dynamic-component :component="$icon" class="size-5" style="color: #0d6efd;" />
<div style="width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: .5rem; background: rgba(13, 110, 253, 0.1);" class="transition-transform duration-300 group-hover:scale-105">
<x-dynamic-component :component="$icon" class="size-5 transition-colors duration-200" style="color: #0d6efd;" />
</div>
@endif
<div style="display: flex; flex-direction: column; gap: .25rem;">
@@ -54,25 +54,25 @@
{{-- Help Modal --}}
<div
x-show="open"
x-transition:enter="transition ease-out duration-200"
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-150"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0"
style="z-index: 99999; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); display: none;"
style="z-index: 99999; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: none;"
></div>
<div
x-show="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
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 translate-y-0"
x-transition:leave-end="opacity-0 scale-95 translate-y-4"
@click.away="open = false"
class="fixed inset-0 flex items-center justify-center p-4"
style="z-index: 99999; display: none;"

20
extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php
View File

@@ -62,22 +62,22 @@
<{{ $tag }}
@if($href) href="{{ $href }}" @endif
{{ $attributes->class([
'lte-small-box lte-fade-in',
'lte-small-box lte-fade-in transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 hover:scale-[1.01]',
$variantConfig[$variant]['class'] ?? 'lte-bg-primary',
]) }}
>
<div class="lte-inner">
<h3>{{ $prefix }}{{ $value }}@if($suffix)<sup style="font-size: 0.6em;">{{ $suffix }}</sup>@endif</h3>
<p>{{ $label }}</p>
<h3 class="transition-transform duration-200 group-hover:scale-105">{{ $prefix }}{{ $value }}@if($suffix)<sup style="font-size: 0.6em;">{{ $suffix }}</sup>@endif</h3>
<p class="transition-opacity duration-200 opacity-90 group-hover:opacity-100">{{ $label }}</p>
</div>
@if($icon)
<div class="lte-icon">
<div class="lte-icon transition-transform duration-300 hover:scale-110 hover:rotate-3">
<x-dynamic-component :component="$icon" style="font-size: 70px; width: 70px; height: 70px;" />
</div>
@endif
@if($statusText)
<div class="lte-small-box-footer">
{{ $statusText }} <x-ri-arrow-right-line class="inline size-4" />
<div class="lte-small-box-footer transition-colors duration-200 hover:bg-black/10">
{{ $statusText }} <x-ri-arrow-right-line class="inline size-4 transition-transform duration-200 group-hover:translate-x-1" />
</div>
@endif
</{{ $tag }}>
@@ -86,18 +86,18 @@
<{{ $tag }}
@if($href) href="{{ $href }}" @endif
{{ $attributes->class([
'lte-info-box lte-fade-in',
'lte-info-box lte-fade-in group transition-all duration-300 hover:shadow-md hover:-translate-y-0.5',
'cursor-pointer' => $href || $clickable,
]) }}
>
@if($icon)
<span class="lte-info-box-icon lte-bg-primary rounded" style="color: #fff;">
<span class="lte-info-box-icon lte-bg-primary rounded transition-transform duration-300 group-hover:scale-110" style="color: #fff;">
<x-dynamic-component :component="$icon" class="size-6 {{ $iconClass }}" />
</span>
@endif
<div class="lte-info-box-content">
<span class="lte-info-box-text">{{ $label }}</span>
<span class="lte-info-box-number">
<span class="lte-info-box-text transition-opacity duration-200 opacity-80 group-hover:opacity-100">{{ $label }}</span>
<span class="lte-info-box-number transition-colors duration-200 group-hover:text-primary">
@if($prefix)<small class="lte-text-muted">{{ $prefix }}</small>@endif{{ $value }}@if($suffix)<small class="lte-text-muted">{{ $suffix }}</small>@endif
</span>
@if($change !== null || $changeLabel)