Refine grouped guest indentation
This commit is contained in:
parent
b3285c05c8
commit
7ee417a629
2 changed files with 8 additions and 5 deletions
|
|
@ -19,6 +19,9 @@ const editingValues = new Map<string, string>();
|
|||
// Signal to trigger reactivity when editing values change
|
||||
const [editingValuesVersion, setEditingValuesVersion] = createSignal(0);
|
||||
|
||||
const GROUPED_FIRST_CELL_INDENT = 'pl-5 sm:pl-6 lg:pl-8';
|
||||
const DEFAULT_FIRST_CELL_INDENT = 'pl-4';
|
||||
|
||||
const buildGuestId = (guest: Guest) => {
|
||||
if (guest.id) return guest.id;
|
||||
if (guest.instance === guest.node) {
|
||||
|
|
@ -411,9 +414,7 @@ export function GuestRow(props: GuestRowProps) {
|
|||
const firstCellClass = createMemo(() => {
|
||||
const base =
|
||||
'py-0.5 pr-2 whitespace-nowrap relative w-[160px] sm:w-[200px] lg:w-[240px] xl:w-[280px] 2xl:w-[340px]';
|
||||
const indent = props.isGroupedView
|
||||
? 'pl-5 sm:pl-6 lg:pl-8'
|
||||
: 'pl-4';
|
||||
const indent = props.isGroupedView ? GROUPED_FIRST_CELL_INDENT : DEFAULT_FIRST_CELL_INDENT;
|
||||
return `${base} ${indent}`;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -308,6 +308,8 @@ const buildRowId = (host: DockerHost, row: DockerRow) => {
|
|||
return `service:${host.id}:${row.service.id ?? row.service.name}`;
|
||||
};
|
||||
|
||||
const GROUPED_RESOURCE_INDENT = 'pl-5 sm:pl-6 lg:pl-8';
|
||||
|
||||
const DockerHostGroupHeader: Component<{ host: DockerHost; colspan: number }> = (props) => {
|
||||
const displayName = props.host.displayName || props.host.hostname || props.host.id;
|
||||
|
||||
|
|
@ -580,7 +582,7 @@ const DockerContainerRow: Component<{
|
|||
onClick={toggle}
|
||||
aria-expanded={expanded()}
|
||||
>
|
||||
<td class="pl-5 sm:pl-6 lg:pl-8 pr-2 py-0.5">
|
||||
<td class={`${GROUPED_RESOURCE_INDENT} pr-2 py-0.5`}>
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
{/* Name - show input when editing, otherwise show name with optional link */}
|
||||
<Show
|
||||
|
|
@ -1016,7 +1018,7 @@ const DockerServiceRow: Component<{
|
|||
onClick={toggle}
|
||||
aria-expanded={expanded()}
|
||||
>
|
||||
<td class="pl-5 sm:pl-6 lg:pl-8 pr-2 py-0.5">
|
||||
<td class={`${GROUPED_RESOURCE_INDENT} pr-2 py-0.5`}>
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
{/* Name - show input when editing, otherwise show name with optional link */}
|
||||
<Show
|
||||
|
|
|
|||
Loading…
Reference in a new issue