sendnrw/pocket-id
2
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-04-13 10:06:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve form input layout if description next to it is multi col

Browse Source
This commit is contained in:
Elias Schneider
2026-04-12 19:54:07 +02:00
parent 027e6f078d
commit 9ec4683d18
2 changed files with 50 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/lib/components/form/form-input.svelte
View File

@@ -8,6 +8,7 @@
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import FormattedMessage from '../formatted-message.svelte';
import { cn } from '$lib/utils/style';
type WithoutChildren = {
children?: undefined;
@@ -48,44 +49,53 @@
const id = label?.toLowerCase().replace(/ /g, '-');
</script>
<Field.Field data-disabled={disabled} {...restProps}>
{#if label}
<Field.Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Field.Label>
{/if}
{#if description}
<Field.Description>
<FormattedMessage m={description} />
{#if docsLink}
<a
class="relative text-black after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:translate-y-[-1px] after:bg-white dark:text-white"
href={docsLink}
target="_blank"
>
{m.docs()}
<LucideExternalLink class="inline size-3 align-text-top" />
</a>
{/if}
</Field.Description>
{/if}
{#if children}
{@render children()}
{:else if input}
{#if type === 'date'}
<DatePicker {id} bind:value={input.value as Date} />
{:else}
<Input
aria-invalid={!!input.error}
class={inputClass}
{id}
{placeholder}
{type}
bind:value={input.value}
{disabled}
oninput={(e) => onInput?.(e)}
/>
<Field.Field
data-disabled={disabled}
class={cn('flex flex-col justify-between', restProps.class)}
{...restProps}
>
<div>
{#if label}
<Field.Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Field.Label
>
{/if}
{/if}
{#if input?.error}
<Field.Error class="text-start">{input.error}</Field.Error>
{/if}
{#if description}
<Field.Description>
<FormattedMessage m={description} />
{#if docsLink}
<a
class="relative text-black after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:translate-y-[-1px] after:bg-white dark:text-white"
href={docsLink}
target="_blank"
>
{m.docs()}
<LucideExternalLink class="inline size-3 align-text-top" />
</a>
{/if}
</Field.Description>
{/if}
</div>
<div>
{#if children}
{@render children()}
{:else if input}
{#if type === 'date'}
<DatePicker {id} bind:value={input.value as Date} />
{:else}
<Input
aria-invalid={!!input.error}
class={inputClass}
{id}
{placeholder}
{type}
bind:value={input.value}
{disabled}
oninput={(e) => onInput?.(e)}
/>
{/if}
{/if}
{#if input?.error}
<Field.Error class="text-start">{input.error}</Field.Error>
{/if}
</div>
</Field.Field>

2
frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte
View File

@@ -133,7 +133,7 @@
/>
</div>
<h4 class="mt-10 text-lg font-semibold">{m.attribute_mapping()}</h4>
<div class="mt-4 grid grid-cols-1 items-end gap-5 md:grid-cols-2">
<div class="mt-4 grid grid-cols-1 gap-5 md:grid-cols-2">
<FormInput
label={m.user_unique_identifier_attribute()}
description={m.the_value_of_this_attribute_should_never_change()}