Private
Public Access
1
0

Refactor Proxmox views for improved styling and consistency

- Updated subdomain.blade.php to enhance button styles and modal transitions.
- Changed text colors for better readability and consistency across the UI.
- Refactored system.blade.php to unify button components and improve layout structure.
- Adjusted modal z-index values for consistent layering.
- Enhanced accessibility by ensuring proper text contrast and hover states.
This commit is contained in:
2025-12-18 09:40:58 -05:00
parent 5c5184aec8
commit 0ed29d782e
22 changed files with 6734 additions and 3813 deletions

View File

@@ -1,37 +1,11 @@
{{-- Server Listing - TailServer Theme --}}
<div class="flex flex-col flex-1"
style="min-height: calc(100vh - 30rem);"
x-data="{ pageLoaded: false }"
x-init="setTimeout(() => pageLoaded = true, 50)">
{{-- Page Header --}}
<div :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
class="transition-all duration-500 ease-out">
<x-proxmox::ui.section-header
title="Servers"
icon="ri-server-line"
subtitle="Manage your virtual private servers"
/>
<div class="flex flex-col flex-1" style="min-height: calc(100vh - 30rem);">
<div class="flex flex-row items-center pb-4">
<span class="text-2xl font-bold">Servers</span>
</div>
{{-- Server Cards Grid --}}
<div class="flex flex-col gap-4 flex-1 mt-4"
:class="pageLoaded ? 'opacity-100' : 'opacity-0'"
style="transition: opacity 0.5s ease-out 0.15s;">
@forelse($servers as $index => $server)
<div class="transform transition-all duration-500 ease-out"
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
:style="'transition-delay: {{ ($index + 1) * 100 }}ms'">
<livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
</div>
@empty
<div :class="pageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"
class="transition-all duration-500 ease-out delay-200">
<x-proxmox::ui.empty-state
title="No Servers Found"
description="You don't have any servers yet. Purchase a server to get started."
icon="ri-server-line"
/>
</div>
@endforelse
<div class="flex flex-col gap-4 flex-1">
@foreach($servers as $server)
<livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
@endforeach
</div>
</div>