Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: update layout and styling for server listing and card components to align with AdminLTE theme

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 14:42:55 -05:00
parent a90aba582d
commit b77af9e831
2 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
extensions/Servers/Proxmox/views/index.blade.php
View File

@@ -1,30 +1,26 @@
{{-- Server Listing - Compact Layout --}}
{{-- Server Listing - AdminLTE Theme --}}
<div class="flex flex-col flex-1" style="min-height: calc(100vh - 30rem);">
{{-- Page Header --}}
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-3 mb-4">
<div class="flex items-center gap-2">
<div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
<x-ri-server-line class="size-4 text-primary" />
</div>
<div>
<h2 class="text-lg font-semibold">Servers</h2>
<p class="text-xs text-gray-500 dark:text-gray-400">Manage your virtual private servers</p>
</div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Servers</h2>
</div>
</div>
{{-- Server Cards Grid --}}
{{-- Server Cards --}}
<div class="flex flex-col gap-3 flex-1">
@forelse($servers as $server)
<livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
@empty
<div class="flex flex-col items-center justify-center text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-700 mb-3">
<x-ri-server-line class="size-6 text-gray-400" />
<x-proxmox::ui.card>
<div class="flex flex-col items-center justify-center text-center py-8">
<div class="lte-info-box-icon lte-bg-light rounded-full mb-3" style="width: 48px; height: 48px;">
<x-ri-server-line class="size-6 lte-text-muted" />
</div>
<h3 class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-1">No Servers Found</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">You don't have any servers yet. Purchase a server to get started.</p>
</div>
<h3 class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-1">No Servers Found</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">You don't have any servers yet. Purchase a server to get started.</p>
</div>
</x-proxmox::ui.card>
@endforelse
</div>
</div>

10
extensions/Servers/Proxmox/views/server.blade.php
View File

@@ -1,8 +1,8 @@
{{-- Server Card Component - Compact Layout --}}
{{-- Server Card Component - AdminLTE Theme --}}
<div class="space-y-2">
@if($status)
<a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
<div class="flex flex-col rounded-lg border border-gray-200 dark:border-gray-700 bg-card text-card-foreground shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600 transition-shadow duration-150 cursor-pointer">
<div class="lte-card flex flex-col cursor-pointer">
{{-- Header: Server Name & Status --}}
<div class="flex items-center justify-between px-4 py-3">
<div class="flex items-center gap-2">
@@ -28,7 +28,7 @@
</div>
{{-- Quick Info Row --}}
<div class="flex flex-row flex-wrap gap-3 px-4 py-2 border-y border-gray-100 dark:border-gray-800 text-xs">
<div class="flex flex-row flex-wrap gap-3 px-4 py-2 border-y text-xs" style="border-color: var(--lte-card-border-color);">
<div class="flex flex-col min-w-[100px]">
<span class="font-medium text-gray-500 dark:text-gray-400 uppercase text-[10px]">IPv4</span>
<span class="text-xs">{{ $server->primaryIpv4->ip ?? 'None' }}</span>
@@ -80,7 +80,7 @@
<x-proxmox::ui.stat-card label="CPU" :value="($status->cpus ?? 'N/A') . ' Core' . (($status->cpus ?? 0) > 1 ? 's' : '')" icon="ri-cpu-line" />
<x-proxmox::ui.stat-card label="RAM" :value="round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 1) . ' GiB'" icon="ri-ram-line" />
<x-proxmox::ui.stat-card label="Disk" :value="Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0)" icon="ri-hard-drive-2-line" />
<div class="flex flex-col gap-2 rounded border border-gray-200 dark:border-gray-700 bg-card p-3 text-card-foreground">
<div class="flex flex-col gap-2 rounded p-3" style="border: 1px solid var(--lte-card-border-color); background-color: var(--lte-card-bg);">
<div class="flex items-center justify-between">
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">Bandwidth</span>
<x-ri-speed-line class="size-3 text-gray-400" />
@@ -95,7 +95,7 @@
@else
{{-- Error State --}}
<a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
<div class="flex flex-col rounded-lg border border-red-200 dark:border-red-800 bg-card text-card-foreground shadow-sm hover:shadow-md hover:border-red-300 dark:hover:border-red-700 transition-shadow duration-150 cursor-pointer">
<div class="lte-card lte-card-outline-danger flex flex-col cursor-pointer">
<div class="flex items-center justify-between px-4 py-3">
<div class="flex items-center gap-2">
<div class="flex items-center justify-center size-7 rounded bg-red-50 dark:bg-red-900">