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

fix: update binding syntax for hover effects in server card component

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-18 06:36:31 -05:00
parent db48adaeb4
commit ec3349c397
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
extensions/Servers/Proxmox/views/server.blade.php
View File

@@ -25,24 +25,24 @@
$componentName = $iconPrefix . '-' . $iconName;
@endphp
<div class="flex items-center justify-center size-7 rounded transition-transform duration-300"
:class="hovered ? 'scale-110' : ''"
x-bind:class="hovered ? 'scale-110' : ''"
style="background-color: {{ $bgColor }};">
<x-dynamic-component :component="$componentName" class="size-3 transition-opacity duration-200" :class="hovered ? 'opacity-100' : 'opacity-80'" style="color: {{ $iconColor }};" />
<x-dynamic-component :component="$componentName" class="size-3 transition-opacity duration-200" x-bind:class="hovered ? 'opacity-100' : 'opacity-80'" style="color: {{ $iconColor }};" />
</div>
@else
<div class="flex items-center justify-center size-7 rounded bg-blue-50 dark:bg-blue-900 transition-transform duration-300"
:class="hovered ? 'scale-110' : ''">
<x-ri-server-line class="size-3 text-primary transition-opacity duration-200" :class="hovered ? 'opacity-100' : 'opacity-80'" />
x-bind:class="hovered ? 'scale-110' : ''">
<x-ri-server-line class="size-3 text-primary transition-opacity duration-200" x-bind:class="hovered ? 'opacity-100' : 'opacity-80'" />
</div>
@endif
<span class="font-semibold text-sm transition-colors duration-200" :class="hovered ? 'text-primary' : ''">{{ $status->name }}</span>
<span class="font-semibold text-sm transition-colors duration-200" x-bind:class="hovered ? 'text-primary' : ''">{{ $status->name }}</span>
</div>
<x-proxmox::ui.server-status :status="$status->status" showLabel />
</div>
{{-- Quick Info Row --}}
<div class="flex flex-row flex-wrap gap-3 px-4 py-2 border-y border-gray-200 dark:border-gray-800 text-xs transition-colors duration-200"
:class="hovered ? 'bg-gray-50/30 dark:bg-gray-800/20' : ''">
x-bind:class="hovered ? 'bg-gray-50/30 dark:bg-gray-800/20' : ''">
<div class="flex flex-col min-w-[100px]">
<span class="font-medium text-gray-500 dark:text-gray-400 uppercase text-[10px]">IPv4</span>
<span class="text-xs">{{ $server->primaryIpv4->ip ?? 'None' }}</span>
@@ -89,7 +89,7 @@
{{-- Server Configuration Grid --}}
<div class="px-4 py-3">
<div class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase mb-2 transition-opacity duration-200" :class="hovered ? 'opacity-70' : 'opacity-60'">Configuration</div>
<div class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase mb-2 transition-opacity duration-200" x-bind:class="hovered ? 'opacity-70' : 'opacity-60'">Configuration</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
<div class="flex flex-col gap-1 rounded-lg border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-3 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-700/50 hover:border-gray-300 dark:hover:border-gray-600">
<div class="flex items-center justify-between">
@@ -118,7 +118,7 @@
<x-ri-speed-line class="size-3 text-gray-400 transition-colors duration-200 group-hover:text-primary" />
</div>
<div class="text-sm font-bold">{{ $this->monthlyTraffic }} GiB</div>
<p class="text-[10px] text-gray-500 dark:text-gray-400 transition-opacity duration-200" :class="hovered ? 'opacity-70' : 'opacity-60'">of {{ $this->bandwidthThreshold95 }} GiB (95%)</p>
<p class="text-[10px] text-gray-500 dark:text-gray-400 transition-opacity duration-200" x-bind:class="hovered ? 'opacity-70' : 'opacity-60'">of {{ $this->bandwidthThreshold95 }} GiB (95%)</p>
</div>
</div>
</div>