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

feat: enhance server display layout and improve mobile tag visibility

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-20 17:17:00 -05:00
parent 9e15f8e037
commit 311ebdf4a2
1 changed files with 30 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
extensions/Servers/Proxmox/views/server.blade.php
View File

@@ -2,8 +2,8 @@
<a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate> <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4"> <div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
<div class="flex items-center justify-between mb-2"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3 min-w-0 flex-shrink">
@if($server->user_set_icon) @if($server->user_set_icon)
@php @php
$iconColor = $server->user_set_icon_color ?? '#6366f1'; $iconColor = $server->user_set_icon_color ?? '#6366f1';
@@ -14,39 +14,17 @@
$iconName = $server->user_set_icon; $iconName = $server->user_set_icon;
$componentName = $iconPrefix . '-' . $iconName; $componentName = $iconPrefix . '-' . $iconName;
@endphp @endphp
<div class="p-2 rounded-lg" style="background-color: {{ $bgColor }};"> <div class="p-2 rounded-lg flex-shrink-0" style="background-color: {{ $bgColor }};">
<x-dynamic-component :component="$componentName" class="size-5" style="color: {{ $iconColor }};" /> <x-dynamic-component :component="$componentName" class="size-5" style="color: {{ $iconColor }};" />
</div> </div>
@else @else
<div class="bg-secondary/10 p-2 rounded-lg"> <div class="bg-secondary/10 p-2 rounded-lg flex-shrink-0">
<x-ri-server-line class="size-5 text-secondary" /> <x-ri-server-line class="size-5 text-secondary" />
</div> </div>
@endif @endif
<span class="font-medium">{{ $status->name }}</span> <span class="font-medium truncate">{{ $status->name }}</span>
{{-- Server Tags --}}
<div class="flex items-center gap-1.5 ml-2">
@if($server->tag1)
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
style="background-color: {{ $server->tag1color ?? '#3498db' }};">
{{ $server->tag1 }}
</span>
@endif
@if($server->tag2)
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
style="background-color: {{ $server->tag2color ?? '#2ecc71' }};">
{{ $server->tag2 }}
</span>
@endif
@if($server->tag3)
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
style="background-color: {{ $server->tag3color ?? '#e74c3c' }};">
{{ $server->tag3 }}
</span>
@endif
</div>
</div> </div>
<div class="flex items-center gap-2 px-3 py-1.5 rounded-lg <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg flex-shrink-0
@if($status->status == 'running') text-success bg-success/20 @if($status->status == 'running') text-success bg-success/20
@elseif($status->status == 'stopped') text-inactive bg-inactive/20 @elseif($status->status == 'stopped') text-inactive bg-inactive/20
@else text-warning bg-warning/20 @endif"> @else text-warning bg-warning/20 @endif">
@@ -71,6 +49,30 @@
</div> </div>
</div> </div>
{{-- Server Tags - Separate row for better mobile layout --}}
@if($server->tag1 || $server->tag2 || $server->tag3)
<div class="flex flex-wrap items-center gap-1.5 mb-3">
@if($server->tag1)
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
style="background-color: {{ $server->tag1color ?? '#3498db' }};">
{{ $server->tag1 }}
</span>
@endif
@if($server->tag2)
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
style="background-color: {{ $server->tag2color ?? '#2ecc71' }};">
{{ $server->tag2 }}
</span>
@endif
@if($server->tag3)
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
style="background-color: {{ $server->tag3color ?? '#e74c3c' }};">
{{ $server->tag3 }}
</span>
@endif
</div>
@endif
<div class="flex flex-row flex-wrap gap-4 mt-4"> <div class="flex flex-row flex-wrap gap-4 mt-4">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-xs text-base/50">IPv4 Address</span> <span class="text-xs text-base/50">IPv4 Address</span>