Joseph.Rawlings
a7cb561053
- 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.
152 lines
4.2 KiB
PHP
152 lines
4.2 KiB
PHP
{{--
|
|
Empty State Component - AdminLTE style
|
|
|
|
Usage:
|
|
<x-proxmox::ui.empty-state title="No servers found" />
|
|
<x-proxmox::ui.empty-state
|
|
title="No servers"
|
|
description="Get started by creating your first server."
|
|
icon="ri-server-line"
|
|
>
|
|
<x-proxmox::ui.button variant="primary">Create Server</x-proxmox::ui.button>
|
|
</x-proxmox::ui.empty-state>
|
|
--}}
|
|
|
|
@props([
|
|
'title' => 'No data',
|
|
'description' => null,
|
|
'icon' => 'ri-inbox-line',
|
|
'iconClass' => null,
|
|
'compact' => false,
|
|
])
|
|
|
|
<style>
|
|
.empty-state-lte {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.empty-state-lte-regular {
|
|
padding: 3rem 1.5rem;
|
|
}
|
|
.empty-state-lte-compact {
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
.empty-state-lte-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f8f9fa;
|
|
border-radius: 50%;
|
|
}
|
|
.empty-state-lte-icon-regular {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.empty-state-lte-icon-compact {
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.empty-state-lte-icon svg {
|
|
color: #adb5bd;
|
|
}
|
|
.empty-state-lte-icon-regular svg {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
.empty-state-lte-icon-compact svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
.empty-state-lte-title {
|
|
font-weight: 600;
|
|
color: #212529;
|
|
}
|
|
.empty-state-lte-title-regular {
|
|
font-size: 1.125rem;
|
|
}
|
|
.empty-state-lte-title-compact {
|
|
font-size: 0.875rem;
|
|
}
|
|
.empty-state-lte-description {
|
|
max-width: 24rem;
|
|
color: var(--lte-secondary, #6c757d);
|
|
}
|
|
.empty-state-lte-description-regular {
|
|
font-size: 0.875rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.empty-state-lte-description-compact {
|
|
font-size: 0.8125rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
.empty-state-lte-actions-regular {
|
|
margin-top: 1.25rem;
|
|
}
|
|
.empty-state-lte-actions-compact {
|
|
margin-top: 0.75rem;
|
|
}
|
|
/* Dark mode */
|
|
.dark .empty-state-lte-icon {
|
|
background-color: #374151;
|
|
}
|
|
.dark .empty-state-lte-icon svg {
|
|
color: #6b7280;
|
|
}
|
|
.dark .empty-state-lte-title {
|
|
color: #f3f4f6;
|
|
}
|
|
.dark .empty-state-lte-description {
|
|
color: #9ca3af;
|
|
}
|
|
</style>
|
|
|
|
<div
|
|
{{ $attributes->class([
|
|
'empty-state-lte',
|
|
'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' }} 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 ?? '' }}"
|
|
/>
|
|
</div>
|
|
@endif
|
|
|
|
<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' }}"
|
|
: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' }}"
|
|
:class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'"
|
|
style="transition: all 0.4s ease-out 0.35s;">
|
|
{{ $slot }}
|
|
</div>
|
|
@endif
|
|
</div>
|