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

fix: correct escaped quotes in modal backdrop and match server list icon style

Browse Source 
- Fixed escaped quotes in Alpine.js directives that were breaking the modal
- Changed icon button styling to match server list (bg-secondary/10 p-2 rounded-lg)
- Use x-dynamic-component for custom icons, x-ri-server-line for default
- Properly format all x-transition and @click attributes
This commit is contained in:
Joseph.Rawlings
2025-12-06 09:23:19 -05:00
parent 374713faa6
commit ecd2e3fccd
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
extensions/Servers/Proxmox/views/components/layout.blade.php
View File

@@ -50,16 +50,16 @@
<!-- Server Icon --> <!-- Server Icon -->
<button <button
wire:click="openIconModal" wire:click="openIconModal"
class="flex-shrink-0 size-10 rounded-lg bg-background-secondary border border-neutral hover:border-primary/50 hover:bg-background-secondary/80 transition-all duration-200 flex items-center justify-center group" class="bg-secondary/10 p-2 rounded-lg hover:bg-secondary/20 transition-colors cursor-pointer"
title="Click to customize server icon" title="Click to customize server icon"
> >
@if($server->user_set_icon) @if($server->user_set_icon)
@php @php
$iconStyle = $server->user_set_icon_color ? 'color: ' . $server->user_set_icon_color : ''; $iconColor = $server->user_set_icon_color ?: 'currentColor';
@endphp @endphp
<i class="ri-{{ $server->user_set_icon }} text-xl transition-transform group-hover:scale-110" style="{{ $iconStyle }}"></i> <x-dynamic-component :component="'ri-' . $server->user_set_icon" class="size-5" style="color: {{ $iconColor }}" />
@else @else
<x-ri-server-line class="size-5 text-base/60 transition-transform group-hover:scale-110" /> <x-ri-server-line class="size-5 text-secondary" />
@endif @endif
</button> </button>
<span class="text-2xl font-bold"> <span class="text-2xl font-bold">
@@ -964,16 +964,16 @@
}"> }">
<!-- Modal Backdrop --> <!-- Modal Backdrop -->
<div x-cloak x-show="open" <div x-cloak x-show="open"
x-transition:enter=\"transition ease-out duration-300\" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start=\"opacity-0\" x-transition:enter-start="opacity-0"
x-transition:enter-end=\"opacity-100\" x-transition:enter-end="opacity-100"
x-transition:leave=\"transition ease-in duration-200\" x-transition:leave="transition ease-in duration-200"
x-transition:leave-start=\"opacity-100\" x-transition:leave-start="opacity-100"
x-transition:leave-end=\"opacity-0\" x-transition:leave-end="opacity-0"
@click=\"$wire.closeIconModal()\" @click="$wire.closeIconModal()"
@keydown.escape.window=\"$wire.closeIconModal()\" @keydown.escape.window="$wire.closeIconModal()"
class=\"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm\" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style=\"display: none;\"> style="display: none;">
</div> </div>
<!-- Modal Content --> <!-- Modal Content -->
<div x-cloak x-show="open" <div x-cloak x-show="open"