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

Enhance UI components with improved styles, animations, and transitions for better user experience

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-02-01 13:21:08 -05:00
parent 40ea5dc0b6
commit d291a3b743
9 changed files with 125 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -356,14 +356,14 @@
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@foreach($resourceAllocations as $resource)
<div class="border border-neutral rounded-xl p-4 bg-background flex flex-col gap-4">
<div class="border border-neutral/50 rounded-xl p-4 bg-background-secondary/30 flex flex-col gap-4 transition-all duration-200 hover:border-primary/30 hover:shadow-md">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-xs font-semibold tracking-wide uppercase text-base/60">{{ $resource['label'] }}</p>
<p class="text-lg font-semibold">{{ $resource['usage_summary'] }}</p>
<p class="text-xs text-base/60">{{ $resource['entitlement_label'] }}</p>
</div>
<span class="text-[10px] font-semibold px-2 py-1 rounded-full {{ $resource['badge']['class'] }}">
<span class="text-[10px] font-semibold px-2 py-1 rounded-full transition-all duration-200 {{ $resource['badge']['class'] }}">
{{ $resource['badge']['label'] }}
</span>
</div>
@@ -371,10 +371,10 @@
@if(!is_null($resource['used_percent']))
<div class="flex items-center justify-between text-xs text-base/60 mb-1">
<span>Usage</span>
<span>{{ $resource['used_percent'] }}%</span>
<span class="font-medium">{{ $resource['used_percent'] }}%</span>
</div>
<div class="h-2 rounded-full bg-background-secondary overflow-hidden">
<div class="h-full rounded-full transition-all duration-300"
<div class="h-2.5 rounded-full bg-neutral/20 overflow-hidden shadow-inner">
<div class="h-full rounded-full transition-all duration-500 ease-out"
style="width: {{ min($resource['used_percent'], 130) }}%; background-image: {{ $resource['gradient'] }};">
</div>
</div>