sendnrw/pocket-id
2
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-04-13 01:56:37 +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 { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements';
import FormattedMessage from '../formatted-message.svelte'; import FormattedMessage from '../formatted-message.svelte';
import { cn } from '$lib/utils/style';
type WithoutChildren = { type WithoutChildren = {
children?: undefined; children?: undefined;
@@ -48,44 +49,53 @@
const id = label?.toLowerCase().replace(/ /g, '-'); const id = label?.toLowerCase().replace(/ /g, '-');
</script> </script>
<Field.Field data-disabled={disabled} {...restProps}> <Field.Field
{#if label} data-disabled={disabled}
<Field.Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Field.Label> class={cn('flex flex-col justify-between', restProps.class)}
{/if} {...restProps}
{#if description} >
<Field.Description> <div>
<FormattedMessage m={description} /> {#if label}
{#if docsLink} <Field.Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Field.Label
<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)}
/>
{/if} {/if}
{/if} {#if description}
{#if input?.error} <Field.Description>
<Field.Error class="text-start">{input.error}</Field.Error> <FormattedMessage m={description} />
{/if} {#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> </Field.Field>

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

@@ -133,7 +133,7 @@
/> />
</div> </div>
<h4 class="mt-10 text-lg font-semibold">{m.attribute_mapping()}</h4> <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 <FormInput
label={m.user_unique_identifier_attribute()} label={m.user_unique_identifier_attribute()}
description={m.the_value_of_this_attribute_should_never_change()} description={m.the_value_of_this_attribute_should_never_change()}