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

refactor: standardize modal backdrop handling across Proxmox views for improved consistency and user experience

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 12:28:42 -05:00
parent 22f3181d04
commit d12457d4f7
2 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
extensions/Servers/Proxmox/views/boot-order.blade.php
View File

@@ -303,15 +303,22 @@
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-[2fr_auto] gap-3 items-start">
<div class="relative min-w-0">
<div class="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center">
<div class="relative flex-1 min-w-0">
<select id="iso-selection-{{ $drive }}"
wire:model.live="selectedIsos.{{ $drive }}"
class="w-full bg-background border border-neutral rounded-md px-3 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-secondary">
class="w-full bg-background border border-neutral rounded-md pl-3 pr-10 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary appearance-none">
@foreach($isoOptions as $option)
<option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
@endforeach
</select>
<!-- Dropdown Arrow Icon -->
<div class="absolute right-8 top-1/2 -translate-y-1/2 pointer-events-none">
<svg class="w-4 h-4 text-base/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<!-- Help Modal Icon -->
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
<div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors pointer-events-auto">
@@ -370,10 +377,10 @@
</div>
</div>
</div>
<div class="flex gap-2 w-full lg:w-auto lg:min-w-[260px]">
<div class="flex gap-2 w-full sm:w-auto">
<x-button.primary wire:click="applyIso('{{ $drive }}')"
wire:loading.attr="disabled"
class="flex-1"
class="flex-1 sm:flex-initial"
:disabled="($currentIsos[$drive] ?? 'none') === ($selectedIsos[$drive] ?? 'none')">
<x-loading target="applyIso('{{ $drive }}')" />
<span wire:loading.remove wire:target="applyIso('{{ $drive }}')">Apply</span>
@@ -381,7 +388,7 @@
</x-button.primary>
<x-button.danger wire:click="ejectIso('{{ $drive }}')"
wire:loading.attr="disabled"
class="flex-1"
class="flex-1 sm:flex-initial"
:disabled="!isset($currentIsos[$drive]) || $currentIsos[$drive] === 'none'">
<x-loading target="ejectIso('{{ $drive }}')" />
<span wire:loading.remove wire:target="ejectIso('{{ $drive }}')">Eject</span>