gitea-mirror/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-01-11 20:55:25 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): server stats layout (#25085)

Browse Source 
fix: server stats layout
This commit is contained in:
Mees Frensel
2026-01-06 15:10:38 +01:00
committed by GitHub
parent 263f96da87
commit 006d02cfaf
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
View File

@@ -3,7 +3,7 @@
import { locale } from '$lib/stores/preferences.store';
import { getByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
import type { ServerStatsResponseDto } from '@immich/sdk';
import { Heading, Icon } from '@immich/ui';
import { Code, Heading, Icon, Text } from '@immich/ui';
import { mdiCameraIris, mdiChartPie, mdiPlayCircle } from '@mdi/js';
import { t } from 'svelte-i18n';
@@ -38,40 +38,40 @@
<div class="mt-5 flex lg:hidden">
<div class="flex flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray">
<div class="flex flex-wrap gap-x-12">
<div class="flex place-items-center gap-4 text-primary">
<div class="flex flex-1 place-items-center gap-4 text-primary">
<Icon icon={mdiCameraIris} size="25" />
<p class="uppercase">{$t('photos')}</p>
<Text fontWeight="bold" class="uppercase">{$t('photos')}</Text>
</div>
<div class="relative text-center font-mono text-2xl font-semibold">
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span class="text-primary"
<span class="text-gray-400 dark:text-gray-600">{zeros(stats.photos)}</span><span class="text-primary"
>{stats.photos}</span
>
</div>
</div>
<div class="flex flex-wrap gap-x-12">
<div class="flex place-items-center gap-4 text-primary">
<div class="flex flex-1 place-items-center gap-4 text-primary">
<Icon icon={mdiPlayCircle} size="25" />
<p class="uppercase">{$t('videos')}</p>
<Text fontWeight="bold" class="uppercase">{$t('videos')}</Text>
</div>
<div class="relative text-center font-mono text-2xl font-semibold">
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span class="text-primary"
<span class="text-gray-400 dark:text-gray-600">{zeros(stats.videos)}</span><span class="text-primary"
>{stats.videos}</span
>
</div>
</div>
<div class="flex flex-wrap gap-x-7">
<div class="flex place-items-center gap-4 text-primary">
<div class="flex flex-wrap gap-x-5">
<div class="flex flex-1 flex-nowrap place-items-center gap-4 text-primary">
<Icon icon={mdiChartPie} size="25" />
<p class="uppercase">{$t('storage')}</p>
<Text fontWeight="bold" class="uppercase">{$t('storage')}</Text>
</div>
<div class="relative flex text-center font-mono text-2xl font-semibold">
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span class="text-primary"
<span class="text-gray-400 dark:text-gray-600">{zeros(statsUsage)}</span><span class="text-primary"
>{statsUsage}</span
>
<span class="my-auto ms-2 text-center text-base font-light text-gray-400">{statsUsageUnit}</span>
<Code color="muted" class="font-light">{statsUsageUnit}</Code>
</div>
</div>
</div>