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

refactor: update server card component layout and styling for improved consistency and clarity

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 14:49:48 -05:00
parent dbf228b37c
commit c495fd8244
1 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
{{-- Server Card Component - AdminLTE Theme --}}
{{-- Server Card Component - Task History Theme --}}
<div class="space-y-2">
@if($status)
<a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
<div class="lte-card flex flex-col cursor-pointer">
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl overflow-hidden shadow-theme-sm hover:shadow-theme-md transition-shadow duration-150 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 text-xs" style="border-color: var(--lte-card-border-color);">
<div class="flex flex-row flex-wrap gap-3 px-4 py-2 border-y border-gray-200 dark:border-gray-800 text-xs">
<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>
@@ -77,10 +77,28 @@
<div class="px-4 py-3">
<div class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase mb-2">Configuration</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
<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 p-3" style="border: 1px solid var(--lte-card-border-color); background-color: var(--lte-card-bg);">
<div class="flex flex-col gap-1 rounded-lg border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-3">
<div class="flex items-center justify-between">
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">CPU</span>
<x-ri-cpu-line class="size-3 text-gray-400" />
</div>
<div class="text-sm font-bold">{{ ($status->cpus ?? 'N/A') . ' Core' . (($status->cpus ?? 0) > 1 ? 's' : '') }}</div>
</div>
<div class="flex flex-col gap-1 rounded-lg border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-3">
<div class="flex items-center justify-between">
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">RAM</span>
<x-ri-ram-line class="size-3 text-gray-400" />
</div>
<div class="text-sm font-bold">{{ round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 1) }} GiB</div>
</div>
<div class="flex flex-col gap-1 rounded-lg border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-3">
<div class="flex items-center justify-between">
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">Disk</span>
<x-ri-hard-drive-2-line class="size-3 text-gray-400" />
</div>
<div class="text-sm font-bold">{{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0) }}</div>
</div>
<div class="flex flex-col gap-1 rounded-lg border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-3">
<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 +113,7 @@
@else
{{-- Error State --}}
<a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
<div class="lte-card lte-card-outline-danger flex flex-col cursor-pointer">
<div class="bg-white dark:bg-gray-900 border border-red-200 dark:border-red-800 rounded-2xl overflow-hidden shadow-theme-sm hover:shadow-theme-md transition-shadow duration-150 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">