starred/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2025-12-16 17:23:24 +03:00
Code Issues 121 Packages Projects Releases 16 Wiki Activity

fix: center oidc client images if they are smaller than the box

Browse Source
This commit is contained in:
Elias Schneider
2025-06-14 19:33:40 +02:00
parent 883877adec
commit 946c534b08
3 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/components/image-box.svelte Normal file
View File

@@ -0,0 +1,10 @@
<script lang="ts">
import { cn } from '$lib/utils/style';
import type { HTMLImgAttributes } from 'svelte/elements';
let props: HTMLImgAttributes & {} = $props();
</script>
<div class={'bg-muted flex items-center justify-center rounded-2xl p-3'}>
<img class={cn('size-24 object-contain', props.class)} {...props} />
</div>

15
frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
import FileInput from '$lib/components/form/file-input.svelte'; import FileInput from '$lib/components/form/file-input.svelte';
import FormInput from '$lib/components/form/form-input.svelte'; import FormInput from '$lib/components/form/form-input.svelte';
import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
import ImageBox from '$lib/components/image-box.svelte';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import Label from '$lib/components/ui/label/label.svelte'; import Label from '$lib/components/ui/label/label.svelte';
import { m } from '$lib/paraglide/messages'; import { m } from '$lib/paraglide/messages';
@@ -137,13 +138,11 @@
<Label for="logo">{m.logo()}</Label> <Label for="logo">{m.logo()}</Label>
<div class="mt-2 flex items-end gap-3"> <div class="mt-2 flex items-end gap-3">
{#if logoDataURL} {#if logoDataURL}
<div class="bg-muted size-32 rounded-2xl p-3"> <ImageBox
<img class="size-24"
class="m-auto max-h-full max-w-full object-contain" src={logoDataURL}
src={logoDataURL} alt={m.name_logo({ name: $inputs.name.value })}
alt={m.name_logo({ name: $inputs.name.value })} />
/>
</div>
{/if} {/if}
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<FileInput <FileInput

15
frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import AdvancedTable from '$lib/components/advanced-table.svelte'; import AdvancedTable from '$lib/components/advanced-table.svelte';
import { openConfirmDialog } from '$lib/components/confirm-dialog/'; import { openConfirmDialog } from '$lib/components/confirm-dialog/';
import ImageBox from '$lib/components/image-box.svelte';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import * as Table from '$lib/components/ui/table'; import * as Table from '$lib/components/ui/table';
import { m } from '$lib/paraglide/messages'; import { m } from '$lib/paraglide/messages';
@@ -56,15 +57,11 @@
{#snippet rows({ item })} {#snippet rows({ item })}
<Table.Cell class="w-8 font-medium"> <Table.Cell class="w-8 font-medium">
{#if item.hasLogo} {#if item.hasLogo}
<div class="bg-secondary rounded-2xl p-3"> <ImageBox
<div class="size-8"> class="min-h-8 min-w-8"
<img src={`/api/oidc/clients/${item.id}/logo`}
class="m-auto max-h-full max-w-full object-contain" alt={m.name_logo({ name: item.name })}
src="/api/oidc/clients/{item.id}/logo" />
alt={m.name_logo({ name: item.name })}
/>
</div>
</div>
{/if} {/if}
</Table.Cell> </Table.Cell>
<Table.Cell class="font-medium">{item.name}</Table.Cell> <Table.Cell class="font-medium">{item.name}</Table.Cell>