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

refactor: improve UI layout and styling for overview page

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 13:54:58 -05:00
parent 760cf84451
commit a06b4f54e9
1 changed files with 35 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,7 +41,7 @@
}
</script>
<div class="rounded-xl border border-blue-200 bg-blue-50/50 p-4 mb-6 dark:border-blue-900/50 dark:bg-blue-950/30"
<div class="rounded-lg border-l-4 border-blue-500 bg-blue-50 p-3 mb-4 dark:bg-blue-950 dark:border-blue-400"
x-data="{
isCollapsed: localStorage.getItem('overview-notice-collapsed') === 'true',
isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced',
@@ -58,26 +58,25 @@
"
x-show="isAdvancedView"
x-transition>
<div class="flex items-start gap-3">
<x-ri-information-line class="size-5 text-info flex-shrink-0 mt-0.5" />
<div class="flex-1">
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-semibold">Cloud-init Configuration Notice</h3>
<button @click="toggle()" type="button" class="text-base/60 hover:text-base transition-colors">
<x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-4 transition-transform rotate-180' : 'size-4 transition-transform'" />
<div class="flex items-start gap-2">
<x-ri-information-line class="size-4 text-blue-600 flex-shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between">
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-100">Cloud-init Configuration</h3>
<button @click="toggle()" type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-400">
<x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-4 rotate-180' : 'size-4'" />
</button>
</div>
<div x-show="!isCollapsed" x-transition>
<p class="text-xs text-base/70 leading-relaxed">
<strong>Hostname, password, and networking settings</strong> are configured automatically via <strong>cloud-init</strong>.
This applies to standard operating system installations that support cloud-init. However, if you are:
<div x-show="!isCollapsed" x-transition class="mt-1">
<p class="text-xs text-gray-600 dark:text-gray-300">
<strong>Hostname, password, and networking</strong> are configured via <strong>cloud-init</strong>. Manual config required for:
</p>
<ul class="text-xs text-base/70 leading-relaxed mt-2 ml-4 list-disc space-y-1">
<li>Installing from an ISO image</li>
<li>Configuring the operating system manually during installation</li>
<li>Using Windows (which does not support cloud-init)</li>
<ul class="text-xs text-gray-600 dark:text-gray-300 mt-1 ml-4 list-disc">
<li>ISO installations</li>
<li>Manual OS configuration</li>
<li>Windows (no cloud-init)</li>
</ul>
<p class="text-xs text-base/70 leading-relaxed mt-2">
<p class="text-xs text-gray-600 dark:text-gray-300 mt-1">
You will need to <strong>manually configure networking, security settings, and hostname</strong> within the operating system, as cloud-init will not be available in these scenarios.
</p>
</div>
@@ -89,60 +88,52 @@
wire:key="{{ $fastPolling ? 'fast' : 'slow' }}">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 min-w-0">
<h2 class="text-xl font-semibold break-words">Server Details</h2>
<h2 class="text-lg font-semibold">Server Details</h2>
<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">
<button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:text-gray-500">
<x-ri-question-line class="size-4" />
</button>
<!-- Modal Backdrop -->
<div x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-50 bg-gray-900 bg-opacity-50"
style="display: none;">
</div>
<!-- Modal -->
<div x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
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-neutral/20 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
<div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-5">
<button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:text-gray-500">
<x-ri-close-line class="size-5" />
</button>
<div class="flex items-center gap-3 mb-4 pr-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
<x-ri-server-line class="size-5 text-primary" />
<div class="flex items-center gap-2 mb-3 pr-6">
<div class="flex items-center justify-center w-8 h-8 rounded bg-blue-100 dark:bg-blue-900">
<x-ri-server-line class="size-4 text-blue-600 dark:text-blue-400" />
</div>
<h6 class="font-sans text-lg font-semibold leading-tight">
Server Details
</h6>
<h6 class="text-base font-semibold text-gray-800 dark:text-gray-100">Server Details</h6>
</div>
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
Displays comprehensive information about your virtual machine including status, resource usage, network configuration, and system details.
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
VM information: status, resources, network config.
</p>
<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">Status:</span> Shows the current power state of the VPS (running, stopped, etc.) with real-time updates.
</p>
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
<span class="font-semibold text-base/90">Resources:</span> Displays CPU, memory, disk, and network usage statistics. Data is automatically refreshed at regular intervals.
</p>
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
<span class="font-semibold text-base/90">Network:</span> Shows assigned IP addresses and network interface information configured for this virtual machine.
</p>
<div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-1.5 text-xs text-gray-600 dark:text-gray-400">
<p><span class="font-semibold text-gray-700 dark:text-gray-300">Status:</span> Power state with real-time updates.</p>
<p><span class="font-semibold text-gray-700 dark:text-gray-300">Resources:</span> CPU, memory, disk, network stats.</p>
<p><span class="font-semibold text-gray-700 dark:text-gray-300">Network:</span> IP addresses and interface info.</p>
</div>
</div>
</div>