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/server-status.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Server Status Indicator Component - shadcn-style
Server Status Indicator Component - TailAdmin style
Usage:
<x-proxmox::ui.server-status status="running" />
@@ -61,33 +61,33 @@
$config = $statusConfig[strtolower($status)] ?? $statusConfig['unknown'];
$colorClasses = [
'success' => 'text-success',
'warning' => 'text-warning',
'danger' => 'text-danger',
'info' => 'text-info',
'muted' => 'text-muted-foreground',
'success' => 'text-success-600 dark:text-success-400',
'warning' => 'text-warning-600 dark:text-warning-400',
'danger' => 'text-error-600 dark:text-error-400',
'info' => 'text-blue-light-600 dark:text-blue-light-400',
'muted' => 'text-gray-500 dark:text-gray-400',
];
$bgClasses = [
'success' => 'bg-success/10',
'warning' => 'bg-warning/10',
'danger' => 'bg-danger/10',
'info' => 'bg-info/10',
'muted' => 'bg-muted',
'success' => 'bg-success-50 dark:bg-success-500/15',
'warning' => 'bg-warning-50 dark:bg-warning-500/15',
'danger' => 'bg-error-50 dark:bg-error-500/15',
'info' => 'bg-blue-light-50 dark:bg-blue-light-500/15',
'muted' => 'bg-gray-100 dark:bg-gray-800',
];
$dotColorClasses = [
'success' => 'bg-success',
'warning' => 'bg-warning',
'danger' => 'bg-danger',
'info' => 'bg-info',
'muted' => 'bg-muted-foreground',
'success' => 'bg-success-500',
'warning' => 'bg-warning-500',
'danger' => 'bg-error-500',
'info' => 'bg-blue-light-500',
'muted' => 'bg-gray-400 dark:bg-gray-500',
];
$sizeClasses = [
'sm' => 'text-xs px-2 py-1 gap-1.5',
'md' => 'text-sm px-2.5 py-1.5 gap-2',
'lg' => 'text-base px-3 py-2 gap-2',
'sm' => 'text-theme-xs px-2 py-1 gap-1.5',
'md' => 'text-theme-sm px-2.5 py-1.5 gap-2',
'lg' => 'text-base px-3 py-2 gap-2.5',
];
$dotSizes = [
@@ -97,8 +97,8 @@
];
$textSizes = [
'sm' => 'text-xs',
'md' => 'text-sm',
'sm' => 'text-theme-xs',
'md' => 'text-theme-sm',
'lg' => 'text-base',
];
@endphp
@@ -108,7 +108,7 @@
<div {{ $attributes->class(['inline-flex items-center', 'gap-1.5' => $showLabel]) }}>
<span class="relative flex {{ $dotSizes[$size] ?? $dotSizes['md'] }}">
@if($config['pulse'])
<span class="absolute inline-flex h-full w-full rounded-full {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }} opacity-60 animate-ping"></span>
<span class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-60 {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }}"></span>
@endif
<span class="relative inline-flex rounded-full {{ $dotSizes[$size] ?? $dotSizes['md'] }} {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }}"></span>
</span>
@@ -120,7 +120,7 @@
{{-- Full badge variant --}}
<div
{{ $attributes->class([
'inline-flex items-center font-medium rounded-md',
'inline-flex items-center font-medium rounded-full',
$bgClasses[$config['color']] ?? $bgClasses['muted'],
$colorClasses[$config['color']] ?? $colorClasses['muted'],
$sizeClasses[$size] ?? $sizeClasses['md'],
@@ -128,9 +128,9 @@
>
<span class="relative flex {{ $dotSizes[$size] ?? $dotSizes['md'] }}">
@if($config['pulse'])
<span class="absolute inline-flex h-full w-full rounded-full bg-current opacity-50 animate-ping"></span>
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-50"></span>
@endif
<span class="relative inline-flex rounded-full {{ $dotSizes[$size] ?? $dotSizes['md'] }} bg-current"></span>
<span class="relative inline-flex rounded-full bg-current {{ $dotSizes[$size] ?? $dotSizes['md'] }}"></span>
</span>
@if($showLabel)
<span>{{ $config['label'] }}</span>