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 --> <!-- Main Grid Layout -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;"> <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;">
<!-- Server Information Card --> <!-- Server Information Card -->
<div class="lte-card lte-card-outline-primary"> <div class="lte-card">
<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-header lte-bg-primary" style="color: white;">
<div class="lte-card-title" style="display: flex; align-items: center; gap: 0.75rem; margin: 0; font-weight: 600;"> <h5 class="lte-card-title" style="margin: 0; color: white; display: flex; align-items: center; gap: 0.5rem;">
<x-ri-server-fill class="size-5" /> <x-ri-server-fill class="size-4" />
<span>Server Information</span> Server Information
</div> </h5>
</div> </div>
<div class="lte-card-body" style="padding: 0;"> <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> <table class="lte-table" style="margin-bottom: 0;">
<tbody>
<div style="padding: 1.25rem;"> <!-- Status -->
<!-- Status --> <tr>
<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);"> <td style="width: 40%; font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<div style="display: flex; align-items: center; gap: 0.5rem;"> <x-ri-pulse-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
<x-ri-pulse-line class="size-4 lte-text-muted" /> Status
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">Status</span> </td>
</div> <td style="padding: 0.75rem 1rem;">
<div style="display: flex; align-items: center; gap: 0.5rem;"> @if ($status && $status->status === 'running')
@if ($status && $status->status === 'running') <span class="lte-badge lte-badge-success">
<span class="lte-badge lte-badge-success" style="display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem;"> <x-ri-checkbox-circle-fill class="size-3" style="display: inline-block; vertical-align: middle; margin-right: 0.25rem;" />
<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
Running </span>
</span> @else
@else <span class="lte-badge lte-badge-warning">
<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" style="display: inline-block; vertical-align: middle; margin-right: 0.25rem;" />
<x-ri-stop-circle-line class="size-3" /> Stopped
Stopped </span>
</span> @endif
@endif </td>
</div> </tr>
</div> <!-- Operating System -->
<tr>
<!-- Operating System --> <td style="font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<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-ri-ubuntu-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
<div style="display: flex; align-items: center; gap: 0.5rem;"> Operating System
<x-ri-ubuntu-line class="size-4 lte-text-muted" /> </td>
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">Operating System</span> <td style="padding: 0.75rem 1rem;">{{ $server->os->name }}</td>
</div> </tr>
<span style="font-size: 0.875rem; font-weight: 500;">{{ $server->os->name }}</span> <!-- Hostname -->
</div> <tr x-data="{ showHostnameEditModal: @entangle('isEditingHostname') }">
<td style="font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<!-- Hostname --> <x-ri-computer-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
<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') }"> Hostname
<div style="display: flex; align-items: center; gap: 0.5rem;"> </td>
<x-ri-computer-line class="size-4 lte-text-muted" /> <td style="padding: 0.75rem 1rem;">
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">Hostname</span> <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
</div> <code style="font-size: 0.875rem;">{{ $server->hostname ?? $status->name ?? 'N/A' }}</code>
<div style="display: flex; align-items: center; gap: 0.5rem;"> <button wire:click="startEditingHostname" type="button" class="lte-btn lte-btn-xs lte-btn-outline-primary">
<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> <x-ri-edit-line class="size-3" />
<button wire:click="startEditingHostname" type="button" class="lte-btn lte-btn-xs lte-btn-outline-secondary"> </button>
<x-ri-edit-fill class="size-3" /> </div>
</button>
</div>
<!-- Hostname Edit Modal (unchanged for brevity) --> <!-- Hostname Edit Modal (unchanged for brevity) -->
<div x-cloak x-show="showHostnameEditModal" <div x-cloak x-show="showHostnameEditModal"
@@ -459,63 +457,70 @@
</div> </div>
</div> </div>
<!-- Primary IPv4 Address --> <!-- Primary IPv4 Address -->
@if($server->primaryIpv4) @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); } }"> <tr 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;"> <td style="font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<x-ri-global-line class="size-4 lte-text-muted" /> <x-ri-global-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">IPv4 Address</span> IPv4 Address
</div> </td>
<div style="display: flex; align-items: center; gap: 0.5rem;"> <td style="padding: 0.75rem 1rem;">
<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> <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
<button @click="copy()" type="button" class="lte-btn lte-btn-xs lte-btn-outline-secondary"> <code style="font-size: 0.875rem;">{{ $server->primaryIpv4->ip }}</code>
<x-ri-check-fill x-show="copied" class="size-3 lte-text-success" /> <button @click="copy()" type="button" class="lte-btn lte-btn-xs lte-btn-outline-success">
<x-ri-file-copy-fill x-show="!copied" class="size-3" /> <x-ri-check-fill x-show="copied" class="size-3" />
</button> <x-ri-file-copy-line x-show="!copied" class="size-3" />
</div> </button>
</div> </div>
@endif </td>
</tr>
@endif
<!-- Primary IPv6 Address --> <!-- Primary IPv6 Address -->
@if($server->primaryIpv6) @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); } }"> <tr 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;"> <td style="font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<x-ri-global-line class="size-4 lte-text-muted" /> <x-ri-global-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">IPv6 Address</span> IPv6 Address
</div> </td>
<div style="display: flex; align-items: center; gap: 0.5rem;"> <td style="padding: 0.75rem 1rem;">
<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> <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
<button @click="copy()" type="button" class="lte-btn lte-btn-xs lte-btn-outline-secondary"> <code style="font-size: 0.75rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; display: block;">{{ $server->primaryIpv6->ip }}</code>
<x-ri-check-fill x-show="copied" class="size-3 lte-text-success" /> <button @click="copy()" type="button" class="lte-btn lte-btn-xs lte-btn-outline-success">
<x-ri-file-copy-fill x-show="!copied" class="size-3" /> <x-ri-check-fill x-show="copied" class="size-3" />
</button> <x-ri-file-copy-line x-show="!copied" class="size-3" />
</div> </button>
</div> </div>
@endif </td>
</tr>
@endif
<!-- Root Password --> <!-- Root Password -->
<div style="display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0;" x-data="{ showPasswordViewModal: false, showPasswordEditModal: @entangle('isEditingPassword') }"> <tr x-data="{ showPasswordViewModal: false, showPasswordEditModal: @entangle('isEditingPassword') }">
<div style="display: flex; align-items: center; gap: 0.5rem;"> <td style="font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1rem;">
<x-ri-lock-password-line class="size-4 lte-text-muted" /> <x-ri-lock-password-line class="size-4" style="display: inline-block; vertical-align: middle; margin-right: 0.375rem;" />
<span style="font-size: 0.875rem; font-weight: 600;" class="lte-text-muted">Root Password</span> Root Password
</div> </td>
<div style="display: flex; align-items: center; gap: 0.5rem;"> <td style="padding: 0.75rem 1rem;">
<span style="font-size: 0.875rem;"> <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
@if(isset($server->password) && $server->password) <span>
•••••••• @if(isset($server->password) && $server->password)
@else ••••••••
<span class="lte-badge lte-badge-info">Emailed</span> @else
@endif <span class="lte-badge lte-badge-info">Emailed</span>
</span> @endif
@if(isset($server->password) && $server->password) </span>
<button type="button" class="lte-btn lte-btn-xs lte-btn-outline-secondary" @click="showPasswordViewModal = true"> <div style="display: flex; gap: 0.25rem;">
<x-ri-eye-line class="size-3" /> @if(isset($server->password) && $server->password)
</button> <button type="button" class="lte-btn lte-btn-xs lte-btn-outline-secondary" @click="showPasswordViewModal = true">
@endif <x-ri-eye-line class="size-3" />
<button type="button" class="lte-btn lte-btn-xs lte-btn-outline-primary" wire:click="startEditingPassword"> </button>
<x-ri-edit-fill class="size-3" /> @endif
</button> <button type="button" class="lte-btn lte-btn-xs lte-btn-outline-primary" wire:click="startEditingPassword">
</div> <x-ri-edit-line class="size-3" />
</button>
</div>
</div>
<!-- Password View Modal --> <!-- Password View Modal -->
<div x-cloak x-show="showPasswordViewModal" <div x-cloak x-show="showPasswordViewModal"