mirror of
https://github.com/tiennm99/coolify.git
synced 2026-08-20 12:23:48 +00:00
Andras Bacsai
4d35c63d89
Add an application Internal access section that loads the running container hostname (skipped for Compose apps), densify configuration diff and popup-small defaults, dock the server-timing HUD into the mobile top bar, restyle the 2FA challenge with the auth shell, and enforce 16px mobile form fonts to prevent iOS zoom.
120 lines
7.0 KiB
PHP
120 lines
7.0 KiB
PHP
@props([
|
|
'diff' => null,
|
|
'compact' => true,
|
|
])
|
|
|
|
@php
|
|
$changes = collect(data_get($diff, 'changes', []))->values();
|
|
@endphp
|
|
|
|
@if ($changes->isNotEmpty())
|
|
<div @class(['space-y-3' => $compact, 'space-y-5' => ! $compact])>
|
|
@foreach ($changes->groupBy('section_label') as $sectionLabel => $sectionChanges)
|
|
<div>
|
|
<h4
|
|
@class([
|
|
'font-semibold uppercase tracking-wide text-neutral-500 dark:text-fg-faint',
|
|
'mb-1 text-[10px]' => $compact,
|
|
'mb-2 text-[11px]' => ! $compact,
|
|
])>
|
|
{{ $sectionLabel }}
|
|
</h4>
|
|
|
|
<div class="overflow-x-auto rounded-md ring-1 ring-neutral-200 dark:ring-white/[0.08]">
|
|
<div class="min-w-[560px]">
|
|
<div
|
|
@class([
|
|
'grid grid-cols-[minmax(8rem,0.75fr)_minmax(12rem,1fr)_1.25rem_minmax(12rem,1fr)_1.5rem] items-center text-[10px] font-medium text-neutral-500 dark:bg-white/[0.04] dark:text-fg-faint bg-neutral-100',
|
|
'gap-2 px-2 py-1' => $compact,
|
|
'gap-3 px-3 py-2' => ! $compact,
|
|
])>
|
|
<div>Field</div>
|
|
<div>Current</div>
|
|
<div></div>
|
|
<div>New</div>
|
|
<div></div>
|
|
</div>
|
|
|
|
<div class="divide-y divide-neutral-200 bg-white dark:divide-white/[0.07] dark:bg-transparent">
|
|
@foreach ($sectionChanges as $change)
|
|
@php
|
|
$changeKey = (string) data_get($change, 'key');
|
|
$expandable = data_get($change, 'expandable', false);
|
|
$oldDisplay = (string) data_get($change, 'old_display_value');
|
|
$newDisplay = (string) data_get($change, 'new_display_value');
|
|
$oldFull = data_get($change, 'old_full_value') ?? $oldDisplay;
|
|
$newFull = data_get($change, 'new_full_value') ?? $newDisplay;
|
|
$label = (string) data_get($change, 'label');
|
|
$labelTruncated = mb_strlen($label) > 24;
|
|
$rowExpandable = $expandable || $labelTruncated;
|
|
@endphp
|
|
|
|
<div
|
|
@class([
|
|
'grid grid-cols-[minmax(8rem,0.75fr)_minmax(12rem,1fr)_1.25rem_minmax(12rem,1fr)_1.5rem] items-start transition-colors hover:bg-neutral-50 dark:hover:bg-white/[0.025]',
|
|
'gap-2 px-2 py-1.5 text-xs' => $compact,
|
|
'gap-3 px-3 py-2.5 text-sm' => ! $compact,
|
|
])>
|
|
<div class="min-w-0 font-medium text-neutral-900 dark:text-fg">
|
|
@if ($rowExpandable)
|
|
<div class="break-words"
|
|
:class="expandedRows['{{ $changeKey }}'] ? '' : 'truncate'"
|
|
x-text="expandedRows['{{ $changeKey }}'] ? @js($label) : @js((string) str($label)->limit(24))">
|
|
</div>
|
|
@else
|
|
{{ $label }}
|
|
@endif
|
|
</div>
|
|
|
|
<div class="min-w-0 text-red-600 dark:text-red-400">
|
|
@if ($expandable)
|
|
<div class="break-words"
|
|
:class="expandedRows['{{ $changeKey }}'] ? 'whitespace-pre-wrap' : 'truncate'"
|
|
x-text="expandedRows['{{ $changeKey }}'] ? @js($oldFull) : @js($oldDisplay)">
|
|
</div>
|
|
@else
|
|
<div class="truncate">{{ $oldDisplay }}</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex justify-center pt-0.5 text-neutral-400 dark:text-fg-faint">
|
|
<x-reicon name="arrow-right" class="size-3" />
|
|
</div>
|
|
|
|
<div class="min-w-0 text-emerald-600 dark:text-emerald-400">
|
|
@if ($expandable)
|
|
<div class="break-words"
|
|
:class="expandedRows['{{ $changeKey }}'] ? 'whitespace-pre-wrap' : 'truncate'"
|
|
x-text="expandedRows['{{ $changeKey }}'] ? @js($newFull) : @js($newDisplay)">
|
|
</div>
|
|
@else
|
|
<div class="truncate">{{ $newDisplay }}</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
@if ($rowExpandable)
|
|
<button type="button"
|
|
x-on:click="expandedRows['{{ $changeKey }}'] = ! expandedRows['{{ $changeKey }}']"
|
|
:aria-expanded="!! expandedRows['{{ $changeKey }}']"
|
|
title="Toggle full value"
|
|
class="flex size-5 items-center justify-center rounded text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-700 dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg">
|
|
<x-reicon name="eye"
|
|
x-show="! expandedRows['{{ $changeKey }}']"
|
|
class="size-3" />
|
|
<x-reicon name="eye-off2"
|
|
x-show="expandedRows['{{ $changeKey }}']"
|
|
x-cloak class="size-3" />
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|