sascha
/
immich
mirror of https://github.com/immich-app/immich.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(web): stat card tweaks (#18189) 

feat: stat card tweaks
pull/18193/head
Jason Rasmussen 2025-05-09 18:56:41 +07:00 committed by GitHub
parent 0d66a6b51f
commit c473511133
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
Unescape Escape View File

@ -38,7 +38,7 @@
<div>
<p class="text-sm dark:text-immich-dark-fg">{$t('total_usage').toUpperCase()}</p>
<div class="mt-5 hidden justify-between lg:flex">
<div class="mt-5 hidden justify-between lg:flex gap-4">
<StatsCard icon={mdiCameraIris} title={$t('photos').toUpperCase()} value={stats.photos} />
<StatsCard icon={mdiPlayCircle} title={$t('videos').toUpperCase()} value={stats.videos} />
<StatsCard icon={mdiChartPie} title={$t('storage').toUpperCase()} value={statsUsage} unit={statsUsageUnit} />

15
web/src/lib/components/admin-page/server-stats/stats-card.svelte
Unescape Escape View File

@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { ByteUnit } from '$lib/utils/byte-units';
import { Code, Text } from '@immich/ui';
interface Props {
icon: string;
@ -20,18 +21,16 @@
});
</script>
<div class="flex h-[140px] w-[250px] flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray">
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
<div class="flex h-[140px] w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
<div class="flex place-items-center gap-4">
<Icon path={icon} size="40" />
<p>{title}</p>
<Text size="large" fontWeight="bold">{title}</Text>
</div>
<div class="relative text-center font-mono text-2xl font-semibold">
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros()}</span><span
class="text-immich-primary dark:text-immich-dark-primary">{value}</span
>
<div class="relative mx-auto font-mono text-2xl font-semibold">
<span class="text-gray-400 dark:text-gray-600">{zeros()}</span><span>{value}</span>
{#if unit}
<span class="absolute -top-5 end-2 text-base font-light text-gray-400">{unit}</span>
<Code color="muted" class="absolute -top-5 end-2 font-light">{unit}</Code>
{/if}
</div>
</div>