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

Refactor components to align with AdminLTE styles

Browse Source 
- Updated alert component to use AdminLTE variant classes and added callout support.
- Refined badge component with AdminLTE base and variant classes, including size adjustments.
- Modified button component to implement AdminLTE button styles and improved loading indicators.
- Enhanced card component with AdminLTE variant classes and improved header/footer structure.
- Adjusted input component to follow AdminLTE design, including size classes and icon handling.
- Updated layout component to streamline button styles and loading indicators.
- Refined progress component to utilize AdminLTE styles for size and variant classes.
- Enhanced table component with AdminLTE table classes and improved loading state representation.
This commit is contained in:
Joseph.Rawlings
2025-12-17 17:55:03 -05:00
parent e6e0f34d3a
commit b7b81b0d3a
8 changed files with 259 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,8 +10,16 @@
])
@php
$tableClasses = 'w-full text-left';
$wrapperClasses = 'bg-background-secondary rounded-xl border border-neutral/20 shadow-sm overflow-hidden';
// AdminLTE table classes
$tableClasses = 'lte-table';
if ($striped) {
$tableClasses .= ' lte-table-striped';
}
if ($hoverable) {
$tableClasses .= ' lte-table-hover';
}
$wrapperClasses = 'lte-card';
if ($responsive) {
$wrapperClasses .= ' overflow-x-auto';
@@ -20,37 +28,37 @@
<div {{ $attributes->merge(['class' => $wrapperClasses]) }}>
@if($loading)
<div class="p-8 flex flex-col items-center justify-center gap-3">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
<p class="text-sm text-base/60">Loading data...</p>
<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>
@else
<table class="{{ $tableClasses }}">
<table class="{{ $tableClasses }}" style="width: 100%;">
@if(isset($head))
<thead class="bg-neutral/5 {{ $stickyHeader ? 'sticky top-0 z-10' : '' }}">
<tr class="border-b border-neutral/10">
<thead @if($stickyHeader) style="position: sticky; top: 0; z-index: 10;" @endif>
<tr>
{{ $head }}
</tr>
</thead>
@endif
@if(isset($body) && $body->isNotEmpty())
<tbody class="divide-y divide-neutral/10">
<tbody>
{{ $body }}
</tbody>
@elseif($slot->isNotEmpty())
<tbody class="divide-y divide-neutral/10">
<tbody>
{{ $slot }}
</tbody>
@else
<tbody>
<tr>
<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 w-14 h-14 rounded-xl bg-neutral/10">
<x-dynamic-component :component="$emptyIcon" class="size-7 text-base/40" />
<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" />
</div>
<p class="text-sm text-base/60">{{ $emptyMessage }}</p>
<p class="lte-text-muted" style="font-size: 0.875rem;">{{ $emptyMessage }}</p>
</div>
</td>
</tr>