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

refactor: enhance server information card layout with improved styling and table format

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 18:17:58 -05:00
parent 5e6d017f97
commit d940e8df8c
1 changed files with 111 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -344,59 +344,57 @@
<!-- Main Grid Layout -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;">
<!-- Server Information Card -->
<div class="lte-card lte-card-outline-primary">
<div class="lte-card-header" style="background: linear-gradient(135deg, var(--lte-primary), var(--lte-info)); color: white; padding: 1rem 1.25rem;">
<div class="lte-card-title" style="display: flex; align-items: center; gap: 0.75rem; margin: 0; font-weight: 600;">
<x-ri-server-fill class="size-5" />
<span>Server Information</span>
</div>
<div class="lte-card">
<div class="lte-card-header lte-bg-primary" style="color: white;">
<h5 class="lte-card-title" style="margin: 0; color: white; display: flex; align-items: center; gap: 0.5rem;">
<x-ri-server-fill class="size-4" />
Server Information
</h5>
</div>
<div class="lte-card-body" style="padding: 0;">
<div style="background-image: url('https://billing.virtnet.bond/assets/images/main.png'); background-size: cover; height: 100px; border-bottom: 1px solid rgba(0,0,0,0.1);"></div>
<div style="padding: 1.25rem;">
<!-- Status -->
<div style="display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.05);">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<x-ri-pulse-line class="size-4 lte-text-muted" />
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">Status</span>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
@if ($status && $status->status === 'running')
<span class="lte-badge lte-badge-success" style="display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem;">
<span style="width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></span>
Running
</span>
@else
<span class="lte-badge lte-badge-warning" style="display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem;">
<x-ri-stop-circle-line class="size-3" />
Stopped
</span>
@endif
</div>
</div>
<!-- Operating System -->
<div style="display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.05);">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<x-ri-ubuntu-line class="size-4 lte-text-muted" />
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">Operating System</span>
</div>
<span style="font-size: 0.875rem; font-weight: 500;">{{ $server->os->name }}</span>
</div>
<!-- Hostname -->
<div style="display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.05);" x-data="{ showHostnameEditModal: @entangle('isEditingHostname') }">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<x-ri-computer-line class="size-4 lte-text-muted" />
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">Hostname</span>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<code style="font-size: 0.875rem; background: rgba(0,0,0,0.05); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-family: 'Courier New', monospace;">{{ $server->hostname ?? $status->name ?? 'N/A' }}</code>
<button wire:click="startEditingHostname" type="button" class="lte-btn lte-btn-xs lte-btn-outline-secondary">
<x-ri-edit-fill class="size-3" />
</button>
</div>
<table class="lte-table" style="margin-bottom: 0;">
<tbody>
<!-- Status -->
<tr>
<td style="width: 40%; font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<x-ri-pulse-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
Status
</td>
<td style="padding: 0.75rem 1rem;">
@if ($status && $status->status === 'running')
<span class="lte-badge lte-badge-success">
<x-ri-checkbox-circle-fill class="size-3" style="display: inline-block; vertical-align: middle; margin-right: 0.25rem;" />
Running
</span>
@else
<span class="lte-badge lte-badge-warning">
<x-ri-stop-circle-line class="size-3" style="display: inline-block; vertical-align: middle; margin-right: 0.25rem;" />
Stopped
</span>
@endif
</td>
</tr>
<!-- Operating System -->
<tr>
<td style="font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<x-ri-ubuntu-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
Operating System
</td>
<td style="padding: 0.75rem 1rem;">{{ $server->os->name }}</td>
</tr>
<!-- Hostname -->
<tr x-data="{ showHostnameEditModal: @entangle('isEditingHostname') }">
<td style="font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<x-ri-computer-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
Hostname
</td>
<td style="padding: 0.75rem 1rem;">
<div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
<code style="font-size: 0.875rem;">{{ $server->hostname ?? $status->name ?? 'N/A' }}</code>
<button wire:click="startEditingHostname" type="button" class="lte-btn lte-btn-xs lte-btn-outline-primary">
<x-ri-edit-line class="size-3" />
</button>
</div>
<!-- Hostname Edit Modal (unchanged for brevity) -->
<div x-cloak x-show="showHostnameEditModal"
@@ -459,63 +457,70 @@
</div>
</div>
<!-- Primary IPv4 Address -->
@if($server->primaryIpv4)
<div style="display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.05);" x-data="{ copied: false, copyText: '{{ $server->primaryIpv4->ip }}', copy() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); } }">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<x-ri-global-line class="size-4 lte-text-muted" />
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">IPv4 Address</span>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<code style="font-size: 0.875rem; background: rgba(0,0,0,0.05); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-family: 'Courier New', monospace;">{{ $server->primaryIpv4->ip }}</code>
<button @click="copy()" type="button" class="lte-btn lte-btn-xs lte-btn-outline-secondary">
<x-ri-check-fill x-show="copied" class="size-3 lte-text-success" />
<x-ri-file-copy-fill x-show="!copied" class="size-3" />
</button>
</div>
</div>
@endif
<!-- Primary IPv4 Address -->
@if($server->primaryIpv4)
<tr x-data="{ copied: false, copyText: '{{ $server->primaryIpv4->ip }}', copy() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); } }">
<td style="font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<x-ri-global-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
IPv4 Address
</td>
<td style="padding: 0.75rem 1rem;">
<div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
<code style="font-size: 0.875rem;">{{ $server->primaryIpv4->ip }}</code>
<button @click="copy()" type="button" class="lte-btn lte-btn-xs lte-btn-outline-success">
<x-ri-check-fill x-show="copied" class="size-3" />
<x-ri-file-copy-line x-show="!copied" class="size-3" />
</button>
</div>
</td>
</tr>
@endif
<!-- Primary IPv6 Address -->
@if($server->primaryIpv6)
<div style="display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.05);" x-data="{ copied: false, copyText: '{{ $server->primaryIpv6->ip }}', copy() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); } }">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<x-ri-global-line class="size-4 lte-text-muted" />
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">IPv6 Address</span>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<code style="font-size: 0.75rem; background: rgba(0,0,0,0.05); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; max-width: 200px; overflow: hidden; text-overflow: ellipsis;">{{ $server->primaryIpv6->ip }}</code>
<button @click="copy()" type="button" class="lte-btn lte-btn-xs lte-btn-outline-secondary">
<x-ri-check-fill x-show="copied" class="size-3 lte-text-success" />
<x-ri-file-copy-fill x-show="!copied" class="size-3" />
</button>
</div>
</div>
@endif
<!-- Primary IPv6 Address -->
@if($server->primaryIpv6)
<tr x-data="{ copied: false, copyText: '{{ $server->primaryIpv6->ip }}', copy() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); } }">
<td style="font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<x-ri-global-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
IPv6 Address
</td>
<td style="padding: 0.75rem 1rem;">
<div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
<code style="font-size: 0.75rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; display: block;">{{ $server->primaryIpv6->ip }}</code>
<button @click="copy()" type="button" class="lte-btn lte-btn-xs lte-btn-outline-success">
<x-ri-check-fill x-show="copied" class="size-3" />
<x-ri-file-copy-line x-show="!copied" class="size-3" />
</button>
</div>
</td>
</tr>
@endif
<!-- Root Password -->
<div style="display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0;" x-data="{ showPasswordViewModal: false, showPasswordEditModal: @entangle('isEditingPassword') }">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<x-ri-lock-password-line class="size-4 lte-text-muted" />
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">Root Password</span>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="font-size: 0.875rem;">
@if(isset($server->password) && $server->password)
••••••••
@else
<span class="lte-badge lte-badge-info">Emailed</span>
@endif
</span>
@if(isset($server->password) && $server->password)
<button type="button" class="lte-btn lte-btn-xs lte-btn-outline-secondary" @click="showPasswordViewModal = true">
<x-ri-eye-line class="size-3" />
</button>
@endif
<button type="button" class="lte-btn lte-btn-xs lte-btn-outline-primary" wire:click="startEditingPassword">
<x-ri-edit-fill class="size-3" />
</button>
</div>
<!-- Root Password -->
<tr x-data="{ showPasswordViewModal: false, showPasswordEditModal: @entangle('isEditingPassword') }">
<td style="font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<x-ri-lock-password-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
Root Password
</td>
<td style="padding: 0.75rem 1rem;">
<div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
<span>
@if(isset($server->password) && $server->password)
••••••••
@else
<span class="lte-badge lte-badge-info">Emailed</span>
@endif
</span>
<div style="display: flex; gap: 0.25rem;">
@if(isset($server->password) && $server->password)
<button type="button" class="lte-btn lte-btn-xs lte-btn-outline-secondary" @click="showPasswordViewModal = true">
<x-ri-eye-line class="size-3" />
</button>
@endif
<button type="button" class="lte-btn lte-btn-xs lte-btn-outline-primary" wire:click="startEditingPassword">
<x-ri-edit-line class="size-3" />
</button>
</div>
</div>
<!-- Password View Modal -->
<div x-cloak x-show="showPasswordViewModal"