Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

Refactor Proxmox views for improved styling and consistency

Browse Source 
- Updated subdomain.blade.php to enhance button styles and modal transitions.
- Changed text colors for better readability and consistency across the UI.
- Refactored system.blade.php to unify button components and improve layout structure.
- Adjusted modal z-index values for consistent layering.
- Enhanced accessibility by ensuring proper text contrast and hover states.
This commit is contained in:
Joseph.Rawlings
2025-12-18 09:40:58 -05:00
parent 5c5184aec8
commit 0ed29d782e
22 changed files with 6734 additions and 3813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
extensions/Servers/Proxmox/views/display.blade.php
View File

@@ -1,14 +1,10 @@
<x-proxmox::layout :server="$server" view="display" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
<div class="flex items-center justify-between mb-6"
x-data="{ pageLoaded: false }"
x-init="setTimeout(() => pageLoaded = true, 50)"
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
style="transition: all 0.4s ease-out;">
<div class="flex items-center justify-between mb-6">
<div>
<div class="flex items-center gap-2 min-w-0">
<h2 class="text-xl font-semibold break-words">Display Configuration</h2>
<div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
<x-ri-question-line class="size-4" />
</button>
<!-- Modal Backdrop -->
@@ -21,7 +17,7 @@
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
@@ -34,9 +30,9 @@
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
<x-ri-close-line class="size-5" />
</button>
@@ -51,7 +47,7 @@
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
Configure the virtual graphics adapter and video memory for your virtual machine. These settings affect how the VM displays output and can impact performance in graphical environments.
</p>
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2.5">
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
<span class="font-semibold text-base/90">Display Adapter:</span> Choose between different VGA adapter types. VirtIO-GPU offers the best performance for modern Linux guests, while standard VGA provides maximum compatibility.
</p>
@@ -66,22 +62,18 @@
</div>
</div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Choose which VGA adapter the VPS exposes and, when supported, how much video memory it can use.</p>
<p class="text-sm text-base/60 mt-1">Choose which VGA adapter the VPS exposes and, when supported, how much video memory it can use.</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"
x-data="{ cardsLoaded: false }"
x-init="setTimeout(() => cardsLoaded = true, 100)">
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-lg p-6 flex flex-col gap-6 transition-all duration-300 hover:shadow-md"
:class="cardsLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
style="transition: all 0.4s ease-out 0.1s;">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-lg p-6 flex flex-col gap-6">
<div class="flex items-center justify-between">
<div>
<div class="flex items-center gap-2 min-w-0">
<h3 class="text-lg font-semibold break-words">Display Adapter</h3>
<div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
<x-ri-question-line class="size-4" />
</button>
<!-- Modal Backdrop -->
@@ -94,7 +86,7 @@
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
@@ -107,9 +99,9 @@
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
<x-ri-close-line class="size-5" />
</button>
@@ -124,7 +116,7 @@
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
Select the virtual graphics adapter type for your VM. Different adapters offer varying levels of performance and compatibility.
</p>
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2.5">
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
<span class="font-semibold text-base/90">VirtIO-GPU:</span> Modern, high-performance adapter for Linux guests. Supports hardware acceleration and up to 256MB video memory.
</p>
@@ -139,7 +131,7 @@
</div>
</div>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Choose which VGA adapter the VPS exposes and, when supported, how much video memory it can use.</p>
<p class="text-xs text-base/60 mt-1">Choose which VGA adapter the VPS exposes and, when supported, how much video memory it can use.</p>
</div>
@if($this->displayAdapterSynced)
<span class="text-xs font-semibold text-success">Synced</span>
@@ -173,7 +165,7 @@
wire:model.live="displayMemory"
class="accent-secondary"
/>
<div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
<div class="flex items-center justify-between text-xs text-base/60">
<span>16 MB</span>
<span>256 MB</span>
</div>
@@ -188,7 +180,7 @@
class="w-24 bg-background border border-neutral rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-secondary"
/>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">VirtIO-GPU supports up to 256 MB. Pick the lowest value your workload requires.</p>
<p class="text-xs text-base/60">VirtIO-GPU supports up to 256 MB. Pick the lowest value your workload requires.</p>
</div>
</div>
@endif
@@ -205,48 +197,50 @@
<input type="checkbox" wire:model.live="tabletEnabled" class="rounded border-neutral text-secondary focus:ring-secondary mt-1">
<div class="flex flex-col gap-1">
<span class="text-sm font-semibold text-base/80">Use tablet for pointer input</span>
<p class="text-xs text-gray-500 dark:text-gray-400">Enables absolute pointer tracking (USB tablet) for smoother mouse capture in VNC. Turn off if you prefer relative (PS/2) input.</p>
<p class="text-xs text-base/60">Enables absolute pointer tracking (USB tablet) for smoother mouse capture in VNC. Turn off if you prefer relative (PS/2) input.</p>
</div>
</label>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-wrap gap-3">
<x-proxmox::ui.button wire:click="saveDisplaySettings" wire:loading.attr="disabled" variant="primary">
<x-button.primary wire:click="saveDisplaySettings" wire:loading.attr="disabled">
<x-loading target="saveDisplaySettings" />
<span wire:loading.remove wire:target="saveDisplaySettings">Save Display Settings</span>
<span wire:loading wire:target="saveDisplaySettings">Saving...</span>
</x-proxmox::ui.button>
<x-proxmox::ui.button wire:click="loadDisplayConfiguration" wire:loading.attr="disabled" variant="secondary">
</x-button.primary>
<x-button.secondary wire:click="loadDisplayConfiguration" wire:loading.attr="disabled" class="text-sm font-medium">
<x-loading target="loadDisplayConfiguration" />
<span wire:loading.remove wire:target="loadDisplayConfiguration">Refresh</span>
<span wire:loading wire:target="loadDisplayConfiguration">Refreshing...</span>
</x-proxmox::ui.button>
</x-button.secondary>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">Changes are applied to the VM configuration immediately but require a restart to take effect.</p>
<p class="text-xs text-base/60">Changes are applied to the VM configuration immediately but require a restart to take effect.</p>
</div>
</div>
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-lg p-6 flex flex-col gap-4">
<h3 class="text-lg font-semibold flex items-center gap-2">
<x-ri-information-line class="size-5 text-gray-500 dark:text-gray-400" />
<x-ri-information-line class="size-5 text-base/60" />
Display Mode Reference
</h3>
<div class="space-y-4 text-sm text-gray-600 dark:text-gray-400">
<div class="space-y-4 text-sm text-base/70">
@foreach($this->displayOptions as $value => $meta)
<div class="border border-gray-200 dark:border-gray-800 rounded-md p-3 {{ $value === $selectedDisplay ? 'bg-background' : '' }}">
<div class="border border-neutral/40 rounded-md p-3 {{ $value === $selectedDisplay ? 'bg-background' : '' }}">
<div class="flex items-center justify-between">
<span class="font-semibold text-base">{{ $meta['label'] }}</span>
@if($value === $selectedDisplay)
<span class="text-xs font-semibold text-secondary">Currently selected</span>
@endif
</div>
<p class="text-xs mt-2 text-gray-500 dark:text-gray-400">{{ $meta['description'] ?? 'Configurable display option.' }}</p>
<p class="text-xs mt-2 text-base/60">{{ $meta['description'] ?? 'Configurable display option.' }}</p>
@if($meta['supports_memory'])
<p class="text-xs mt-1 text-gray-500 dark:text-gray-400">Supports configurable video memory (max 256 MB).</p>
<p class="text-xs mt-1 text-base/60">Supports configurable video memory (max 256 MB).</p>
@endif
</div>
@endforeach
</div>
<div class="text-xs text-gray-500 dark:text-gray-400 border border-info/30 bg-info/10 rounded-md p-3">
<div class="text-xs text-base/60 border border-info/30 bg-info/10 rounded-md p-3">
Need a headless mode? Choose <strong>No Display</strong> to detach VGA entirely, or <strong>Serial Console</strong> if you only need serial output.
</div>
</div>