mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-14 14:42:26 +00:00
Code Activity

fix: make logo and oidc client images sizes consistent

Browse Source
This commit is contained in:
Elias Schneider
2025-09-30 12:12:37 +02:00
parent fe5917d96d
commit 01db8c0a46
5 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/image-box.svelte
View File

@@ -18,7 +18,7 @@
{:else} {:else}
<img <img
{...props} {...props}
class={cn('object-contain', props.class)} class={cn('object-contain aspect-square', props.class)}
onerror={() => (error = true)} onerror={() => (error = true)}
/> />
{/if} {/if}

8
frontend/src/lib/components/logo.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { m } from '$lib/paraglide/messages'; import { m } from '$lib/paraglide/messages';
import { cachedApplicationLogo } from '$lib/utils/cached-image-util'; import { cachedApplicationLogo } from '$lib/utils/cached-image-util';
import { cn } from '$lib/utils/style';
import { mode } from 'mode-watcher'; import { mode } from 'mode-watcher';
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements';
@@ -9,4 +10,9 @@
const isLightMode = $derived(mode.current === 'light'); const isLightMode = $derived(mode.current === 'light');
</script> </script>
<img {...props} src={cachedApplicationLogo.getUrl(isLightMode)} alt={m.logo()} /> <img
{...props}
class={cn('aspect-square object-contain', props.class)}
src={cachedApplicationLogo.getUrl(isLightMode)}
alt={m.logo()}
/>

2
frontend/src/routes/authorize/components/client-provider-images.svelte
View File

@@ -60,7 +60,7 @@
</div> </div>
{:else if client.hasLogo} {:else if client.hasLogo}
<img <img
class="size-10" class="size-10 aspect-square object-contain"
src={cachedOidcClientLogo.getUrl(client.id)} src={cachedOidcClientLogo.getUrl(client.id)}
draggable={false} draggable={false}
alt={m.client_logo()} alt={m.client_logo()}

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

@@ -59,7 +59,7 @@
<Table.Cell class="w-8 font-medium"> <Table.Cell class="w-8 font-medium">
{#if item.hasLogo} {#if item.hasLogo}
<ImageBox <ImageBox
class="min-h-8 min-w-8 object-contain" class="min-h-8 min-w-8"
src={cachedOidcClientLogo.getUrl(item.id)} src={cachedOidcClientLogo.getUrl(item.id)}
alt={m.name_logo({ name: item.name })} alt={m.name_logo({ name: item.name })}
/> />

5
frontend/src/routes/settings/apps/authorized-oidc-client-card.svelte
View File

@@ -38,7 +38,7 @@
<div class="flex gap-3"> <div class="flex gap-3">
<div class="aspect-square h-[56px]"> <div class="aspect-square h-[56px]">
<ImageBox <ImageBox
class="h-8 w-8 grow rounded-lg object-contain" class="size-8"
src={client.hasLogo src={client.hasLogo
? cachedOidcClientLogo.getUrl(client.id) ? cachedOidcClientLogo.getUrl(client.id)
: cachedApplicationLogo.getUrl(isLightMode)} : cachedApplicationLogo.getUrl(isLightMode)}
@@ -124,6 +124,3 @@
</div> </div>
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
<style>
</style>