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

refactor: update Proxmox UI components to use TailAdmin styling

Browse Source 
- Changed component styles and classes to align with TailAdmin design patterns.
- Updated color schemes, typography, and layout for consistency across components.
- Refactored Info Row, Network Address Card, Notice Banner, Progress Bar, Resource Gauge, Section Header, Server Status, Spinner, Stat Card, and Tab Panel components.
- Enhanced responsiveness and accessibility features in various components.
This commit is contained in:
Joseph.Rawlings
2025-12-17 12:33:10 -05:00
parent 7a089f53e2
commit b4e2923a2c
23 changed files with 364 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
{{--
Stat Card Component - shadcn-inspired
Stat Card Component - TailAdmin style
Usage:
<x-proxmox::ui.stat-card value="12" label="CPU %" />
@@ -13,12 +13,12 @@
'suffix' => null,
'prefix' => null,
'icon' => null,
'iconClass' => 'text-muted-foreground',
'iconClass' => 'text-gray-500 dark:text-gray-400',
'status' => null,
'statusText' => null,
'href' => null,
'progress' => null,
'progressColor' => 'bg-primary',
'progressColor' => 'bg-brand-500',
'clickable' => false,
'compact' => false,
'change' => null,
@@ -28,11 +28,11 @@
@php
$tag = $href ? 'a' : 'div';
$statusClasses = [
'success' => 'text-success',
'warning' => 'text-warning',
'danger' => 'text-danger',
'info' => 'text-info',
'muted' => 'text-muted-foreground',
'success' => 'text-success-500',
'warning' => 'text-warning-500',
'danger' => 'text-error-500',
'info' => 'text-blue-light-500',
'muted' => 'text-gray-500 dark:text-gray-400',
];
$statusClass = $statusClasses[$status] ?? '';
@endphp
@@ -40,24 +40,24 @@
<{{ $tag }}
@if($href) href="{{ $href }}" @endif
{{ $attributes->class([
'rounded-xl border bg-card p-6 shadow-sm',
'hover:bg-accent/50 transition-colors duration-150 cursor-pointer' => $href || $clickable,
'rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]',
'transition-colors duration-150 hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer' => $href || $clickable,
]) }}
>
<div class="flex items-center justify-between pb-2">
<span class="text-sm font-medium text-muted-foreground">{{ $label }}</span>
<span class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">{{ $label }}</span>
@if($icon)
<x-dynamic-component :component="$icon" class="size-4 {{ $iconClass }}" />
<x-dynamic-component :component="$icon" class="size-5 {{ $iconClass }}" />
@endif
</div>
<div class="mt-1">
<span @class(['font-bold tracking-tight', 'text-2xl' => !$compact, 'text-xl' => $compact])>
@if($prefix)<span class="text-muted-foreground">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span class="text-muted-foreground text-base ml-1">{{ $suffix }}</span>@endif
<span @class(['font-bold text-gray-800 dark:text-white/90', 'text-2xl' => !$compact, 'text-xl' => $compact])>
@if($prefix)<span class="text-gray-500 dark:text-gray-400">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span class="ml-1 text-base text-gray-500 dark:text-gray-400">{{ $suffix }}</span>@endif
</span>
@if($change !== null || $changeLabel)
<p class="text-xs text-muted-foreground mt-1">
<p class="mt-1.5 text-theme-xs text-gray-500 dark:text-gray-400">
@if($change !== null)
<span @class(['font-medium', $change >= 0 ? 'text-success' : 'text-danger'])>
<span @class(['font-medium', $change >= 0 ? 'text-success-500' : 'text-error-500'])>
{{ $change >= 0 ? '+' : '' }}{{ $change }}%
</span>
@endif
@@ -68,14 +68,14 @@
@if($progress !== null)
<div class="mt-4">
<div class="h-1.5 w-full rounded-full bg-muted overflow-hidden">
<div class="h-full {{ $progressColor }} rounded-full transition-all duration-150" style="width: {{ min(100, $progress) }}%"></div>
<div class="h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-full {{ $progressColor }} rounded-full transition-all duration-200" style="width: {{ min(100, $progress) }}%"></div>
</div>
</div>
@endif
@if($statusText)
<div class="border-t mt-4 pt-3 text-xs font-medium {{ $statusClass }}">
<div class="mt-4 border-t border-gray-200 pt-3 text-theme-xs font-medium dark:border-gray-800 {{ $statusClass }}">
{{ $statusText }}
</div>
@endif