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

Migrate UI components from AdminLTE to LucentUI Theme using Tailwind CSS

Browse Source 
- 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:
Joseph.Rawlings
2026-02-01 14:16:57 -05:00
parent fa0bc93c83
commit abff5a381f
42 changed files with 1061 additions and 2427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
extensions/Servers/Proxmox/views/components/table.blade.php
View File

@@ -10,16 +10,21 @@
])
@php
// AdminLTE table classes
$tableClasses = 'lte-table';
// LucentUI table classes
$tableClasses = 'w-full text-sm text-left';
if ($striped) {
$tableClasses .= ' lte-table-striped';
$tableClasses .= ' [&_tbody_tr:nth-child(even)]:bg-background-secondary/50';
}
if ($hoverable) {
$tableClasses .= ' lte-table-hover';
$tableClasses .= ' [&_tbody_tr]:hover:bg-background-secondary/70 [&_tbody_tr]:transition-colors';
}
if ($compact) {
$tableClasses .= ' [&_th]:py-2 [&_td]:py-2';
} else {
$tableClasses .= ' [&_th]:py-3 [&_td]:py-3';
}
$wrapperClasses = 'lte-card';
$wrapperClasses = 'bg-background border border-neutral rounded-lg shadow-sm';
if ($responsive) {
$wrapperClasses .= ' overflow-x-auto';
@@ -28,14 +33,14 @@
<div {{ $attributes->merge(['class' => $wrapperClasses]) }}>
@if($loading)
<div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;">
<div class="lte-spinner"></div>
<p class="lte-text-muted" style="font-size: 0.875rem;">Loading data...</p>
<div class="flex flex-col items-center justify-center gap-3 p-8">
<x-ri-loader-5-fill class="size-8 animate-spin text-primary" />
<p class="text-sm text-base/60">Loading data...</p>
</div>
@else
<table class="{{ $tableClasses }}" style="width: 100%;">
<table class="{{ $tableClasses }}">
@if(isset($head))
<thead @if($stickyHeader) style="position: sticky; top: 0; z-index: 10;" @endif>
<thead class="bg-background-secondary/50 border-b border-neutral text-xs uppercase text-base/60" @if($stickyHeader) style="position: sticky; top: 0; z-index: 10;" @endif>
<tr>
{{ $head }}
</tr>
@@ -43,22 +48,22 @@
@endif
@if(isset($body) && $body->isNotEmpty())
<tbody>
<tbody class="divide-y divide-neutral/50">
{{ $body }}
</tbody>
@elseif($slot->isNotEmpty())
<tbody>
<tbody class="divide-y divide-neutral/50">
{{ $slot }}
</tbody>
@else
<tbody>
<tr>
<td colspan="100" style="padding: 3rem 1.25rem;">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center;">
<div class="lte-info-box-icon lte-bg-light rounded" style="width: 56px; height: 56px;">
<x-dynamic-component :component="$emptyIcon" class="size-7 lte-text-muted" />
<td colspan="100" class="px-5 py-12">
<div class="flex flex-col items-center justify-center gap-3 text-center">
<div class="flex items-center justify-center size-14 bg-background-secondary rounded-lg">
<x-dynamic-component :component="$emptyIcon" class="size-7 text-base/50" />
</div>
<p class="lte-text-muted" style="font-size: 0.875rem;">{{ $emptyMessage }}</p>
<p class="text-sm text-base/60">{{ $emptyMessage }}</p>
</div>
</td>
</tr>
@@ -66,7 +71,7 @@
@endif
@if(isset($foot))
<tfoot class="bg-neutral/5 border-t border-neutral/10">
<tfoot class="bg-background-secondary/50 border-t border-neutral">
{{ $foot }}
</tfoot>
@endif