immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-19 17:23:21 +03:00
Code Issues Packages Projects Releases 17 Wiki Activity

fix: Use CSS for uppercase text (#22011)

Browse Source
This commit is contained in:
Stewart Rand
2025-09-16 00:28:42 -03:00
committed by GitHub
parent 5fb0afb0d0
commit 0f79e0c38e
40 changed files with 118 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/lib/components/admin-page/jobs/job-tile.svelte
View File

@@ -67,7 +67,7 @@
<div class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary">
<span class="flex items-center gap-2">
<Icon path={icon} size="1.25em" class="hidden shrink-0 sm:block" />
{title.toUpperCase()}
<span class="uppercase">{title}</span>
</span>
<div class="flex gap-2">
{#if jobCounts.failed > 0}
@@ -137,7 +137,7 @@
onClick={() => onCommand({ command: JobCommand.Start, force: false })}
>
<Icon path={mdiAlertCircle} size="36" />
{$t('disabled').toUpperCase()}
<span class="uppercase">{$t('disabled')}</span>
</JobTileButton>
{/if}
@@ -145,7 +145,7 @@
{#if waitingCount > 0}
<JobTileButton color="gray" onClick={() => onCommand({ command: JobCommand.Empty, force: false })}>
<Icon path={mdiClose} size="24" />
{$t('clear').toUpperCase()}
<span class="uppercase">{$t('clear')}</span>
</JobTileButton>
{/if}
{#if queueStatus.isPaused}
@@ -153,12 +153,12 @@
<JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Resume, force: false })}>
<!-- size property is not reactive, so have to use width and height -->
<Icon path={mdiFastForward} {size} />
{$t('resume').toUpperCase()}
<span class="uppercase">{$t('resume')}</span>
</JobTileButton>
{:else}
<JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Pause, force: false })}>
<Icon path={mdiPause} size="24" />
{$t('pause').toUpperCase()}
<span class="uppercase">{$t('pause')}</span>
</JobTileButton>
{/if}
{/if}
@@ -167,25 +167,25 @@
{#if allText}
<JobTileButton color="dark-gray" onClick={() => onCommand({ command: JobCommand.Start, force: true })}>
<Icon path={mdiAllInclusive} size="24" />
{allText}
<span class="uppercase">{allText}</span>
</JobTileButton>
{/if}
{#if refreshText}
<JobTileButton color="gray" onClick={() => onCommand({ command: JobCommand.Start, force: undefined })}>
<Icon path={mdiImageRefreshOutline} size="24" />
{refreshText}
<span class="uppercase">{refreshText}</span>
</JobTileButton>
{/if}
<JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Start, force: false })}>
<Icon path={mdiSelectionSearch} size="24" />
{missingText}
<span class="uppercase">{missingText}</span>
</JobTileButton>
{/if}
{#if !disabled && !multipleButtons && isIdle}
<JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Start, force: false })}>
<Icon path={mdiPlay} size="48" />
{missingText}
<span class="uppercase">{missingText}</span>
</JobTileButton>
{/if}
</div>

6
web/src/lib/components/admin-page/jobs/jobs-panel.svelte
View File

@@ -177,9 +177,9 @@
{disabled}
{subtitle}
{description}
allText={allText?.toUpperCase()}
refreshText={refreshText?.toUpperCase()}
missingText={missingText.toUpperCase()}
{allText}
{refreshText}
{missingText}
{jobCounts}
{queueStatus}
onCommand={(command) => (handleCommandOverride || handleCommand)(jobName, command)}

16
web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
View File

@@ -36,19 +36,19 @@
<div class="flex flex-col gap-5">
<div>
<p class="text-sm dark:text-immich-dark-fg">{$t('total_usage').toUpperCase()}</p>
<p class="text-sm dark:text-immich-dark-fg uppercase">{$t('total_usage')}</p>
<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} />
<StatsCard icon={mdiCameraIris} title={$t('photos')} value={stats.photos} />
<StatsCard icon={mdiPlayCircle} title={$t('videos')} value={stats.videos} />
<StatsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
</div>
<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-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiCameraIris} size="25" />
<p>{$t('photos').toUpperCase()}</p>
<p class="uppercase">{$t('photos')}</p>
</div>
<div class="relative text-center font-mono text-2xl font-semibold">
@@ -60,7 +60,7 @@
<div class="flex flex-wrap gap-x-12">
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiPlayCircle} size="25" />
<p>{$t('videos').toUpperCase()}</p>
<p class="uppercase">{$t('videos')}</p>
</div>
<div class="relative text-center font-mono text-2xl font-semibold">
@@ -72,7 +72,7 @@
<div class="flex flex-wrap gap-x-7">
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiChartPie} size="25" />
<p>{$t('storage').toUpperCase()}</p>
<p class="uppercase">{$t('storage')}</p>
</div>
<div class="relative flex text-center font-mono text-2xl font-semibold">
@@ -87,7 +87,7 @@
</div>
<div>
<p class="text-sm dark:text-immich-dark-fg">{$t('user_usage_detail').toUpperCase()}</p>
<p class="text-sm dark:text-immich-dark-fg uppercase">{$t('user_usage_detail')}</p>
<table class="mt-5 w-full text-start">
<thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"

2
web/src/lib/components/admin-page/server-stats/stats-card.svelte
View File

@@ -24,7 +24,7 @@
<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" />
<Text size="large" fontWeight="bold">{title}</Text>
<Text size="large" fontWeight="bold" class="uppercase">{title}</Text>
</div>
<div class="relative mx-auto font-mono text-2xl font-semibold">

20
web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
View File

@@ -183,7 +183,7 @@
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label={$t('admin.oauth_timeout').toUpperCase()}
label={$t('admin.oauth_timeout')}
description={$t('admin.oauth_timeout_description')}
required={true}
bind:value={config.oauth.timeout}
@@ -193,7 +193,7 @@
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label={$t('admin.oauth_storage_label_claim').toUpperCase()}
label={$t('admin.oauth_storage_label_claim')}
description={$t('admin.oauth_storage_label_claim_description')}
bind:value={config.oauth.storageLabelClaim}
required={true}
@@ -203,7 +203,7 @@
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label={$t('admin.oauth_role_claim').toUpperCase()}
label={$t('admin.oauth_role_claim')}
description={$t('admin.oauth_role_claim_description')}
bind:value={config.oauth.roleClaim}
required={true}
@@ -213,7 +213,7 @@
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label={$t('admin.oauth_storage_quota_claim').toUpperCase()}
label={$t('admin.oauth_storage_quota_claim')}
description={$t('admin.oauth_storage_quota_claim_description')}
bind:value={config.oauth.storageQuotaClaim}
required={true}
@@ -223,7 +223,7 @@
<SettingInputField
inputType={SettingInputFieldType.NUMBER}
label={$t('admin.oauth_storage_quota_default').toUpperCase()}
label={$t('admin.oauth_storage_quota_default')}
description={$t('admin.oauth_storage_quota_default_description')}
bind:value={config.oauth.defaultStorageQuota}
required={false}
@@ -233,7 +233,7 @@
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label={$t('admin.oauth_button_text').toUpperCase()}
label={$t('admin.oauth_button_text')}
bind:value={config.oauth.buttonText}
required={false}
disabled={disabled || !config.oauth.enabled}
@@ -241,21 +241,21 @@
/>
<SettingSwitch
title={$t('admin.oauth_auto_register').toUpperCase()}
title={$t('admin.oauth_auto_register')}
subtitle={$t('admin.oauth_auto_register_description')}
bind:checked={config.oauth.autoRegister}
disabled={disabled || !config.oauth.enabled}
/>
<SettingSwitch
title={$t('admin.oauth_auto_launch').toUpperCase()}
title={$t('admin.oauth_auto_launch')}
subtitle={$t('admin.oauth_auto_launch_description')}
disabled={disabled || !config.oauth.enabled}
bind:checked={config.oauth.autoLaunch}
/>
<SettingSwitch
title={$t('admin.oauth_mobile_redirect_uri_override').toUpperCase()}
title={$t('admin.oauth_mobile_redirect_uri_override')}
subtitle={$t('admin.oauth_mobile_redirect_uri_override_description', {
values: { callback: 'app.immich:///oauth-callback' },
})}
@@ -267,7 +267,7 @@
{#if config.oauth.mobileOverrideEnabled}
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label={$t('admin.oauth_mobile_redirect_uri').toUpperCase()}
label={$t('admin.oauth_mobile_redirect_uri')}
bind:value={config.oauth.mobileRedirectUri}
required={true}
disabled={disabled || !config.oauth.enabled}

2
web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
View File

@@ -184,7 +184,7 @@
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">{$t('template')}</h3>
<div class="my-2 text-sm">
<h4>{$t('preview').toUpperCase()}</h4>
<h4 class="uppercase">{$t('preview')}</h4>
</div>
<p class="text-sm">

16
web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte
View File

@@ -16,7 +16,7 @@
</script>
<div class="mt-2 text-sm">
<h4>{$t('date_and_time').toUpperCase()}</h4>
<h4 class="uppercase">{$t('date_and_time')}</h4>
</div>
<!-- eslint-disable svelte/no-useless-mustaches -->
@@ -27,7 +27,7 @@
</div>
<div class="flex gap-[40px]">
<div>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{$t('year').toUpperCase()}</p>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('year')}</p>
<ul>
{#each options.yearOptions as yearFormat, index (index)}
<li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
@@ -36,7 +36,7 @@
</div>
<div>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{$t('month').toUpperCase()}</p>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('month')}</p>
<ul>
{#each options.monthOptions as monthFormat, index (index)}
<li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
@@ -45,7 +45,7 @@
</div>
<div>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{$t('week').toUpperCase()}</p>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('week')}</p>
<ul>
{#each options.weekOptions as weekFormat, index (index)}
<li>{'{{'}{weekFormat}{'}}'} - {getLuxonExample(weekFormat)}</li>
@@ -54,7 +54,7 @@
</div>
<div>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{$t('day').toUpperCase()}</p>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('day')}</p>
<ul>
{#each options.dayOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@@ -63,7 +63,7 @@
</div>
<div>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{$t('hour').toUpperCase()}</p>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('hour')}</p>
<ul>
{#each options.hourOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@@ -72,7 +72,7 @@
</div>
<div>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{$t('minute').toUpperCase()}</p>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('minute')}</p>
<ul>
{#each options.minuteOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@@ -81,7 +81,7 @@
</div>
<div>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{$t('second').toUpperCase()}</p>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('second')}</p>
<ul>
{#each options.secondOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>

8
web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte
View File

@@ -3,13 +3,13 @@
</script>
<div class="mt-4 text-sm">
<h4>{$t('other_variables').toUpperCase()}</h4>
<h4 class="uppercase">{$t('other_variables')}</h4>
</div>
<div class="p-4 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
<div class="flex gap-[50px]">
<div>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{$t('filename').toUpperCase()}</p>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('filename')}</p>
<ul>
<li>{`{{filename}}`} - IMG_123</li>
<li>{`{{ext}}`} - jpg</li>
@@ -17,14 +17,14 @@
</div>
<div>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{$t('filetype').toUpperCase()}</p>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('filetype')}</p>
<ul>
<li>{`{{filetype}}`} - VID or IMG</li>
<li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
</ul>
</div>
<div>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary uppercase">{$t('other').toUpperCase()}</p>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('other')}</p>
<ul>
<li>{`{{assetId}}`} - Asset ID</li>
<li>{`{{assetIdShort}}`} - Asset ID (last 12 characters)</li>