Migrate UI components from AdminLTE to LucentUI Theme using Tailwind CSS
- Updated tab-panel component to use Tailwind for styling and transitions. - Refactored table-row component to implement Tailwind classes for hover effects and borders. - Converted table-td component to utilize Tailwind for alignment and text styles. - Changed table-th component to apply Tailwind for header styling and sorting indicators. - Revised table component to adopt Tailwind for layout, borders, and responsive design. - Enhanced tabs component with Tailwind for navigation styles and transitions. - Updated toggle component to use Tailwind for switch styles and accessibility. - Refactored tooltip component to implement Tailwind for positioning and styling. - Added visual enhancements to app.css for improved UI interactions and animations.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{{--
|
||||
Stat Card Component - AdminLTE Theme
|
||||
Based on AdminLTE v4 Small Box / Info Box styling patterns
|
||||
Stat Card Component - LucentUI Theme
|
||||
Migrated from AdminLTE to Tailwind
|
||||
|
||||
Usage:
|
||||
<x-proxmox::ui.stat-card value="12" label="CPU %" />
|
||||
@@ -30,28 +30,28 @@
|
||||
@php
|
||||
$tag = $href ? 'a' : 'div';
|
||||
|
||||
$variantConfig = [
|
||||
'primary' => ['bg' => 'bg-primary', 'class' => 'lte-bg-primary'],
|
||||
'success' => ['bg' => 'bg-success', 'class' => 'lte-bg-success'],
|
||||
'warning' => ['bg' => 'bg-warning', 'class' => 'lte-bg-warning'],
|
||||
'danger' => ['bg' => 'bg-danger', 'class' => 'lte-bg-danger'],
|
||||
'info' => ['bg' => 'bg-info', 'class' => 'lte-bg-info'],
|
||||
$variantClasses = [
|
||||
'primary' => 'bg-primary',
|
||||
'success' => 'bg-success',
|
||||
'warning' => 'bg-warning',
|
||||
'danger' => 'bg-error',
|
||||
'info' => 'bg-info',
|
||||
];
|
||||
|
||||
$progressColors = [
|
||||
'primary' => 'lte-bg-primary',
|
||||
'success' => 'lte-bg-success',
|
||||
'warning' => 'lte-bg-warning',
|
||||
'danger' => 'lte-bg-danger',
|
||||
'info' => 'lte-bg-info',
|
||||
'primary' => 'bg-primary',
|
||||
'success' => 'bg-success',
|
||||
'warning' => 'bg-warning',
|
||||
'danger' => 'bg-error',
|
||||
'info' => 'bg-info',
|
||||
];
|
||||
|
||||
$statusClasses = [
|
||||
'success' => 'lte-text-success',
|
||||
'warning' => 'lte-text-warning',
|
||||
'danger' => 'lte-text-danger',
|
||||
'info' => 'lte-text-info',
|
||||
'muted' => 'lte-text-muted',
|
||||
'success' => 'text-success',
|
||||
'warning' => 'text-warning',
|
||||
'danger' => 'text-error',
|
||||
'info' => 'text-info',
|
||||
'muted' => 'text-secondary',
|
||||
];
|
||||
$statusClass = $statusClasses[$status] ?? '';
|
||||
$progressBarColor = $progressColors[$progressColor] ?? $progressColors['primary'];
|
||||
@@ -62,22 +62,23 @@
|
||||
<{{ $tag }}
|
||||
@if($href) href="{{ $href }}" @endif
|
||||
{{ $attributes->class([
|
||||
'lte-small-box lte-fade-in transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 hover:scale-[1.01]',
|
||||
$variantConfig[$variant]['class'] ?? 'lte-bg-primary',
|
||||
'relative block overflow-hidden rounded-xl text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 hover:scale-[1.01]',
|
||||
$variantClasses[$variant] ?? 'bg-primary',
|
||||
]) }}
|
||||
>
|
||||
<div class="lte-inner">
|
||||
<h3 class="transition-transform duration-200 group-hover:scale-105">{{ $prefix }}{{ $value }}@if($suffix)<sup style="font-size: 0.6em;">{{ $suffix }}</sup>@endif</h3>
|
||||
<p class="transition-opacity duration-200 opacity-90 group-hover:opacity-100">{{ $label }}</p>
|
||||
<div class="p-5">
|
||||
<h3 class="text-2xl font-bold transition-transform duration-200">{{ $prefix }}{{ $value }}@if($suffix)<sup class="text-sm opacity-75">{{ $suffix }}</sup>@endif</h3>
|
||||
<p class="text-sm opacity-90 mt-1">{{ $label }}</p>
|
||||
</div>
|
||||
@if($icon)
|
||||
<div class="lte-icon transition-transform duration-300 hover:scale-110 hover:rotate-3">
|
||||
<x-dynamic-component :component="$icon" style="font-size: 70px; width: 70px; height: 70px;" />
|
||||
<div class="absolute top-4 right-4 opacity-30 transition-transform duration-300 hover:scale-110">
|
||||
<x-dynamic-component :component="$icon" class="size-16" />
|
||||
</div>
|
||||
@endif
|
||||
@if($statusText)
|
||||
<div class="lte-small-box-footer transition-colors duration-200 hover:bg-black/10">
|
||||
{{ $statusText }} <x-ri-arrow-right-line class="inline size-4 transition-transform duration-200 group-hover:translate-x-1" />
|
||||
<div class="px-5 py-3 bg-black/10 text-sm transition-colors duration-200 hover:bg-black/20 flex items-center justify-between">
|
||||
<span>{{ $statusText }}</span>
|
||||
<x-ri-arrow-right-line class="size-4" />
|
||||
</div>
|
||||
@endif
|
||||
</{{ $tag }}>
|
||||
@@ -86,24 +87,24 @@
|
||||
<{{ $tag }}
|
||||
@if($href) href="{{ $href }}" @endif
|
||||
{{ $attributes->class([
|
||||
'lte-info-box lte-fade-in group transition-all duration-300 hover:shadow-md hover:-translate-y-0.5',
|
||||
'flex items-start gap-4 p-5 bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-xl shadow-sm group transition-all duration-300 hover:shadow-md hover:-translate-y-0.5',
|
||||
'cursor-pointer' => $href || $clickable,
|
||||
]) }}
|
||||
>
|
||||
@if($icon)
|
||||
<span class="lte-info-box-icon lte-bg-primary rounded transition-transform duration-300 group-hover:scale-110" style="color: #fff;">
|
||||
<span class="flex items-center justify-center w-12 h-12 bg-primary rounded-lg text-white shrink-0 transition-transform duration-300 group-hover:scale-110">
|
||||
<x-dynamic-component :component="$icon" class="size-6 {{ $iconClass }}" />
|
||||
</span>
|
||||
@endif
|
||||
<div class="lte-info-box-content">
|
||||
<span class="lte-info-box-text transition-opacity duration-200 opacity-80 group-hover:opacity-100">{{ $label }}</span>
|
||||
<span class="lte-info-box-number transition-colors duration-200 group-hover:text-primary">
|
||||
@if($prefix)<small class="lte-text-muted">{{ $prefix }}</small>@endif{{ $value }}@if($suffix)<small class="lte-text-muted">{{ $suffix }}</small>@endif
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-xs font-medium text-secondary dark:text-gray-400 uppercase tracking-wide">{{ $label }}</span>
|
||||
<span class="block text-xl font-bold text-primary dark:text-gray-100 mt-1 transition-colors duration-200 group-hover:text-primary">
|
||||
@if($prefix)<small class="text-secondary dark:text-gray-400 text-sm font-normal">{{ $prefix }}</small>@endif{{ $value }}@if($suffix)<small class="text-secondary dark:text-gray-400 text-sm font-normal">{{ $suffix }}</small>@endif
|
||||
</span>
|
||||
@if($change !== null || $changeLabel)
|
||||
<div style="font-size: 0.8rem;" class="lte-text-muted">
|
||||
<div class="text-xs text-secondary dark:text-gray-400 mt-1">
|
||||
@if($change !== null)
|
||||
<span class="{{ $change >= 0 ? 'lte-text-success' : 'lte-text-danger' }}" style="font-weight: 600;">
|
||||
<span class="{{ $change >= 0 ? 'text-success' : 'text-error' }} font-semibold">
|
||||
{{ $change >= 0 ? '+' : '' }}{{ $change }}%
|
||||
</span>
|
||||
@endif
|
||||
@@ -111,12 +112,12 @@
|
||||
</div>
|
||||
@endif
|
||||
@if($progress !== null)
|
||||
<div class="lte-progress lte-progress-sm" style="margin-top: 0.5rem;">
|
||||
<div class="lte-progress-bar {{ $progressBarColor }}" style="width: {{ min(100, $progress) }}%"></div>
|
||||
<div class="h-1.5 bg-neutral/30 dark:bg-gray-700 rounded-full overflow-hidden mt-3">
|
||||
<div class="{{ $progressBarColor }} h-full rounded-full transition-all duration-500" style="width: {{ min(100, $progress) }}%"></div>
|
||||
</div>
|
||||
@endif
|
||||
@if($statusText)
|
||||
<span class="lte-progress-description {{ $statusClass }}">{{ $statusText }}</span>
|
||||
<span class="text-xs {{ $statusClass }} mt-2 inline-block">{{ $statusText }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</{{ $tag }}>
|
||||
|
||||
Reference in New Issue
Block a user