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

refactor: improve resource allocation card layout and styling for better readability

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 18:15:21 -05:00
parent 054eae7932
commit 5e6d017f97
1 changed files with 19 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
extensions/Servers/Proxmox/views/overview.blade.php
View File

@@ -311,66 +311,39 @@
$lastSampleTimestamp = now()->toIso8601String();
@endphp
<!-- Resource Allocation Cards -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.5rem;">
<!-- Resource Stats Grid -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.5rem;">
@foreach($resourceAllocations as $resource)
<div class="lte-card" style="margin-bottom: 0; overflow: hidden;">
<div class="lte-card-body" style="padding: 1.5rem;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
<h5 style="font-size: 0.875rem; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 0.05em;" class="lte-text-muted">{{ $resource['label'] }}</h5>
<div class="lte-card" style="margin-bottom: 0;">
<div class="lte-card-body" style="padding: 1.25rem;">
<div style="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem;">
<div>
<h6 style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem 0;" class="lte-text-muted">{{ $resource['label'] }}</h6>
<div style="font-size: 1.5rem; font-weight: 700; line-height: 1;">{{ $resource['usage_summary'] }}</div>
</div>
@if(isset($resource['badge']))
<span class="lte-badge lte-badge-{{ $resource['badge']['label'] === 'Healthy' ? 'success' : ($resource['badge']['label'] === 'Watchlist' ? 'warning' : 'danger') }}" style="font-size: 0.7rem; padding: 0.25rem 0.5rem;">
<span class="lte-badge lte-badge-{{ $resource['badge']['label'] === 'Healthy' ? 'success' : ($resource['badge']['label'] === 'Watchlist' ? 'warning' : 'danger') }}" style="font-size: 0.65rem;">
{{ $resource['badge']['label'] }}
</span>
@endif
</div>
<div style="margin-bottom: 1rem;">
<div style="font-size: 1.75rem; font-weight: 700; line-height: 1; margin-bottom: 0.25rem;">
{{ $resource['usage_summary'] }}
</div>
<p class="lte-text-muted" style="font-size: 0.75rem; margin: 0;">{{ $resource['entitlement_label'] }}</p>
</div>
@if($resource['used_percent'] !== null)
<div style="margin-bottom: 0.75rem;">
<div class="lte-progress" style="height: 8px; border-radius: 10px;">
<div class="lte-progress-bar" role="progressbar"
style="width: {{ min(100, $resource['used_percent']) }}%; background: {{ $resource['gradient'] }}; border-radius: 10px;"
aria-valuenow="{{ $resource['used_percent'] }}"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 0.375rem;">
<span class="lte-text-muted" style="font-size: 0.75rem;">{{ number_format($resource['used_percent'], 1) }}% used</span>
@if($resource['used_percent'] > 100)
<span class="lte-text-danger" style="font-size: 0.75rem; font-weight: 600;">Over entitlement</span>
@endif
</div>
<div class="lte-progress" style="height: 6px; margin-bottom: 0.5rem;">
<div class="lte-progress-bar" style="width: {{ min(100, $resource['used_percent']) }}%; background: {{ $resource['gradient'] }};" role="progressbar"></div>
</div>
<div style="font-size: 0.75rem;" class="lte-text-muted">{{ number_format($resource['used_percent'], 1) }}% of {{ $resource['entitlement_label'] }}</div>
@else
<div style="font-size: 0.75rem; margin-top: 0.5rem;" class="lte-text-muted">{{ $resource['entitlement_label'] }}</div>
@endif
<p class="lte-text-muted" style="font-size: 0.75rem; margin: 0; line-height: 1.4;">
<x-ri-information-line class="size-3" style="display: inline; vertical-align: text-top; margin-right: 0.25rem;" />
{{ $resource['description'] }}
</p>
</div>
</div>
@endforeach
</div>
<!-- Main Content Grid -->
<div style="display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem;">
@media (min-width: 768px) {
<style>
.overview-grid { grid-template-columns: 1fr 1fr; }
</style>
}
</div>
<div class="overview-grid" style="display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem;">
<!-- Server Details Card -->
<!-- Main Grid Layout -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;">
<!-- Server Information Card -->
<div class="lte-card lte-card-outline-primary">
<div class="lte-card-header" style="background: linear-gradient(135deg, var(--lte-primary), var(--lte-info)); color: white; padding: 1rem 1.25rem;">
<div class="lte-card-title" style="display: flex; align-items: center; gap: 0.75rem; margin: 0; font-weight: 600;">