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

refactor: enhance Cloud-init configuration section with improved styling and layout

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 18:09:08 -05:00
parent b7b81b0d3a
commit 9971cee9d0
1 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,7 +41,7 @@
}
</script>
<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"
<div class="lte-callout lte-callout-info lte-fade-in"
x-data="{
isCollapsed: localStorage.getItem('overview-notice-collapsed') === 'true',
isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced',
@@ -57,42 +57,50 @@
});
"
x-show="isAdvancedView"
x-transition>
<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'" />
x-transition
style="margin-bottom: 1.5rem;">
<div style="display: flex; align-items: flex-start; gap: 0.75rem;">
<x-ri-information-line class="size-5 lte-text-info" style="flex-shrink: 0; margin-top: 0.125rem;" />
<div style="flex: 1; min-width: 0;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
<h5 style="font-size: 1.1rem; font-weight: 600; margin: 0;">Cloud-init Configuration</h5>
<button @click="toggle()" type="button" class="lte-btn lte-btn-sm lte-btn-outline-secondary" style="padding: 0.25rem 0.5rem;">
<x-ri-arrow-down-s-line class="size-4" x-bind:class="isCollapsed ? 'rotate-180' : ''" />
</button>
</div>
<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:
<div x-show="!isCollapsed" x-transition>
<p style="font-size: 0.875rem; margin-bottom: 0.75rem;">
<strong>Hostname, password, and networking</strong> are configured via <strong>cloud-init</strong>. Manual configuration required for:
</p>
<ul class="text-xs text-gray-600 dark:text-gray-300 mt-1 ml-4 list-disc">
<ul style="font-size: 0.875rem; margin-left: 1.5rem; margin-bottom: 0.75rem; list-style: disc;">
<li>ISO installations</li>
<li>Manual OS configuration</li>
<li>Windows (no cloud-init)</li>
<li>Windows systems (no cloud-init support)</li>
</ul>
<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 style="font-size: 0.875rem; margin: 0;">
You will need to <strong>manually configure networking, security settings, and hostname</strong> within the operating system in these scenarios.
</p>
</div>
</div>
</div>
</div>
<div class="flex items-center" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
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-lg font-semibold">Server Details</h2>
<div class="relative" x-data="{ open: false }" x-cloak>
<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>
<div style="display: flex; align-items: center; gap: 0.75rem;">
<div style="display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;" class="lte-bg-primary" style="background: linear-gradient(135deg, var(--lte-primary), var(--lte-info));">
<x-ri-server-line class="size-5" style="color: white;" />
</div>
<div>
<h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Server Overview</h2>
<p class="lte-text-muted" style="font-size: 0.875rem; margin: 0;">Real-time resource monitoring and server details</p>
</div>
</div>
<div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="lte-btn lte-btn-sm lte-btn-outline-secondary">
<x-ri-question-line class="size-4" />
<span>Help</span>
</button>
<!-- Modal Backdrop -->
<div x-show="open"
x-transition:enter="transition ease-out duration-200"