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

50
extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Resource Gauge Component - shadcn-style
Resource Gauge Component - TailAdmin style
Shows a circular or linear gauge for resource usage
Usage:
@@ -34,19 +34,19 @@
}
$colorClasses = [
'primary' => 'text-primary',
'success' => 'text-success',
'warning' => 'text-warning',
'danger' => 'text-danger',
'info' => 'text-info',
'primary' => 'text-brand-500',
'success' => 'text-success-500',
'warning' => 'text-warning-500',
'danger' => 'text-error-500',
'info' => 'text-blue-light-500',
];
$bgColorClasses = [
'primary' => 'bg-primary',
'success' => 'bg-success',
'warning' => 'bg-warning',
'danger' => 'bg-danger',
'info' => 'bg-info',
'primary' => 'bg-brand-500',
'success' => 'bg-success-500',
'warning' => 'bg-warning-500',
'danger' => 'bg-error-500',
'info' => 'bg-blue-light-500',
];
$textColor = $colorClasses[$color] ?? $colorClasses['primary'];
@@ -59,34 +59,34 @@
};
$badgeClass = match(true) {
$percent >= 100 => 'text-danger bg-danger/15',
$percent >= 85 => 'text-warning bg-warning/15',
default => 'text-success bg-success/15',
$percent >= 100 => 'text-error-600 bg-error-50 dark:bg-error-500/15 dark:text-error-400',
$percent >= 85 => 'text-warning-600 bg-warning-50 dark:bg-warning-500/15 dark:text-warning-400',
default => 'text-success-600 bg-success-50 dark:bg-success-500/15 dark:text-success-400',
};
@endphp
<div {{ $attributes->class(['rounded-xl border bg-card p-4 shadow-sm flex flex-col gap-4']) }}>
<div {{ $attributes->class(['flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]']) }}>
<div class="flex items-start justify-between gap-3">
<div class="space-y-0.5">
<p class="text-xs font-medium text-muted-foreground">{{ $label }}</p>
<p class="text-xl font-bold tracking-tight">
<div class="space-y-1">
<p class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">{{ $label }}</p>
<p class="text-xl font-bold text-gray-800 dark:text-white/90">
@if($prefix){{ $prefix }}@endif{{ is_numeric($value) ? number_format($value, 1) : $value }}@if($suffix){{ $suffix }}@endif
</p>
@if($sublabel)
<p class="text-xs text-muted-foreground">{{ $sublabel }}</p>
<p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $sublabel }}</p>
@endif
</div>
<span class="text-xs font-medium px-2 py-0.5 rounded-full {{ $badgeClass }}">
<span class="rounded-full px-2.5 py-1 text-theme-xs font-medium {{ $badgeClass }}">
{{ $badgeLabel }}
</span>
</div>
<div class="space-y-1.5">
<div class="flex items-center justify-between text-xs">
<span class="text-muted-foreground">Usage</span>
<span class="font-medium">{{ number_format($percent, 1) }}%</span>
<div class="space-y-2">
<div class="flex items-center justify-between text-theme-xs">
<span class="text-gray-500 dark:text-gray-400">Usage</span>
<span class="font-semibold text-gray-800 dark:text-white/90">{{ number_format($percent, 1) }}%</span>
</div>
<div class="h-2 rounded-full bg-primary/20 overflow-hidden">
<div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div
class="h-full rounded-full transition-all duration-300"
@if($gradient)