immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-20 09:15:35 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

chore: cannonical tailwind classes (#23427)

Browse Source
This commit is contained in:
Daniel Dietzler
2025-10-31 16:38:17 +01:00
committed by GitHub
parent be15a84f9b
commit f5d7e5acca
69 changed files with 117 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/shared-components/change-location.svelte
View File

@@ -172,7 +172,7 @@
</div>
<span>{$t('pick_a_location')}</span>
<div class="h-[500px] min-h-[300px] w-full z-0">
<div class="h-125 min-h-75 w-full z-0">
{#await import('$lib/components/shared-components/map/map.svelte')}
{#await delay(timeToLoadTheMap) then}
<!-- show the loading spinner only if loading the map takes too much time -->

2
web/src/lib/components/shared-components/context-menu/context-menu.svelte
View File

@@ -61,7 +61,7 @@
<div
bind:clientHeight={height}
class="fixed min-w-[200px] w-max max-w-[300px] overflow-hidden rounded-lg shadow-lg z-1"
class="fixed min-w-50 w-max max-w-75 overflow-hidden rounded-lg shadow-lg z-1"
style:left="{left}px"
style:top="{top}px"
transition:slide={{ duration: 250, easing: quintOut }}

2
web/src/lib/components/shared-components/immich-logo-small-link.svelte
View File

@@ -4,5 +4,5 @@
</script>
<a data-sveltekit-preload-data="hover" class="ms-4" href="/">
<ImmichLogo class="h-[50px] max-w-none md:w-auto md:max-w-full" noText={mobileDevice.maxMd} />
<ImmichLogo class="h-12.5 max-w-none md:w-auto md:max-w-full" noText={mobileDevice.maxMd} />
</a>

4
web/src/lib/components/shared-components/map/map.svelte
View File

@@ -359,7 +359,7 @@
>
{#snippet children({ feature })}
<div
class="rounded-full w-[40px] h-[40px] bg-immich-primary text-white flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
class="rounded-full w-10 h-10 bg-immich-primary text-white flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
>
{feature.properties?.point_count?.toLocaleString()}
</div>
@@ -380,7 +380,7 @@
{:else}
<img
src={getAssetThumbnailUrl(feature.properties?.id)}
class="rounded-full w-[60px] h-[60px] border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150 object-cover bg-immich-primary"
class="rounded-full w-15 h-15 border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150 object-cover bg-immich-primary"
alt={feature.properties?.city && feature.properties.country
? $t('map_marker_for_images', {
values: { city: feature.properties.city, country: feature.properties.country },

2
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View File

@@ -32,7 +32,7 @@
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute z-1 end-[25px] top-[75px] w-[min(360px,100vw-50px)] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
class="absolute z-1 end-6 top-19 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
use:focusTrap
>
<div

2
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@@ -78,7 +78,7 @@
class="sidebar:hidden"
/>
<a data-sveltekit-preload-data="hover" href={AppRoute.PHOTOS}>
<ImmichLogo class="max-md:h-[48px] h-[50px]" noText={!mobileDevice.isFullSidebar} />
<ImmichLogo class="max-md:h-12 h-12.5" noText={!mobileDevice.isFullSidebar} />
</a>
</div>
<div class="flex justify-between gap-4 lg:gap-8 pe-6">

2
web/src/lib/components/shared-components/navigation-bar/notification-item.svelte
View File

@@ -100,7 +100,7 @@
</script>
<button
class="min-h-[80px] p-2 py-3 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 border-b border-gray-200 dark:border-immich-dark-gray w-full"
class="min-h-20 p-2 py-3 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 border-b border-gray-200 dark:border-immich-dark-gray w-full"
type="button"
onclick={() => onclick(notification)}
title={notification.createdAt}

4
web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte
View File

@@ -66,10 +66,10 @@
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="notification-panel"
class="absolute right-[25px] top-[70px] z-1 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-100 border border-gray-200 shadow-lg dark:border dark:border-light dark:bg-immich-dark-gray text-light"
class="absolute right-6 top-17.5 z-1 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-100 border border-gray-200 shadow-lg dark:border dark:border-light dark:bg-immich-dark-gray text-light"
use:focusTrap
>
<Stack class="max-h-[500px]">
<Stack class="max-h-125">
<div class="flex justify-between items-center mt-4 mx-4">
<Text size="medium" color="secondary" class="font-semibold">{$t('notifications')}</Text>
<div>

2
web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte
View File

@@ -20,7 +20,7 @@
<p>{$t('purchase_per_user')}</p>
</div>
<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="flex flex-col justify-between h-50 dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />

2
web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte
View File

@@ -20,7 +20,7 @@
<p>{$t('purchase_per_server')}</p>
</div>
<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="flex flex-col justify-between h-50 dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />

2
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View File

@@ -235,7 +235,7 @@
name="q"
id="main-search-bar"
class="w-full transition-all border-2 ps-14 py-4 max-md:py-2 text-immich-fg/75 dark:text-immich-dark-fg
{showClearIcon ? 'pe-[90px]' : 'pe-14'}
{showClearIcon ? 'pe-22.5' : 'pe-14'}
{grayTheme ? 'dark:bg-immich-dark-gray' : 'dark:bg-immich-dark-bg'}
{showSuggestions && isSearchSuggestions ? 'rounded-t-3xl' : 'rounded-3xl bg-gray-200'}
{searchStore.isSearchEnabled ? 'border-gray-200 dark:border-gray-700 bg-white' : 'border-transparent'}"

2
web/src/lib/components/shared-components/search-bar/search-people-section.svelte
View File

@@ -52,7 +52,7 @@
</script>
{#await peoplePromise}
<div id="spinner" class="flex h-[217px] items-center justify-center -mb-4">
<div id="spinner" class="flex h-54 items-center justify-center -mb-4">
<LoadingSpinner size="large" />
</div>
{:then people}

2
web/src/lib/components/shared-components/settings/setting-checkboxes.svelte
View File

@@ -30,7 +30,7 @@
</script>
<div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for="{name}-select">
{label}
</label>

2
web/src/lib/components/shared-components/settings/setting-combobox.svelte
View File

@@ -30,7 +30,7 @@
<div class="grid grid-cols-2">
<div>
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for={title}>
{title}
</label>

2
web/src/lib/components/shared-components/settings/setting-dropdown.svelte
View File

@@ -28,7 +28,7 @@
<div class="flex place-items-center justify-between">
<div>
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for={title}>
{title}
</label>

2
web/src/lib/components/shared-components/settings/setting-select.svelte
View File

@@ -39,7 +39,7 @@
</script>
<div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for="{name}-select">{label}</label>
{#if isEdited}

2
web/src/lib/components/shared-components/settings/setting-switch.svelte
View File

@@ -34,7 +34,7 @@
<div class="flex place-items-center justify-between">
<div class="me-2">
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for={sliderId}>
{title}
</label>

2
web/src/lib/components/shared-components/settings/setting-textarea.svelte
View File

@@ -30,7 +30,7 @@
</script>
<div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for={label}>{label}</label>
{#if required}
<div class="text-red-400">*</div>

2
web/src/lib/components/shared-components/settings/settings-language-selector.svelte
View File

@@ -37,7 +37,7 @@
<div class={showSettingDescription ? 'grid grid-cols-2' : ''}>
{#if showSettingDescription}
<div>
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for={$t('language')}>
{$t('language')}
</label>

6
web/src/lib/components/shared-components/side-bar/purchase-info.svelte
View File

@@ -94,7 +94,7 @@
<div class="flex justify-between w-full place-items-center place-content-center">
<div class="flex place-items-center place-content-center gap-1">
<div class="h-6 w-6">
<ImmichLogo noText class="h-[24px]" />
<ImmichLogo noText class="h-6" />
</div>
<p class="flex text-primary font-medium">
{$t('purchase_button_buy_immich')}
@@ -113,7 +113,7 @@
{#if showMessage}
<dialog
open
class="hidden sidebar:block w-[500px] absolute bottom-[75px] start-[255px] bg-gray-50 dark:border-gray-800 border border-gray-200 dark:bg-immich-dark-gray dark:text-white text-black rounded-3xl shadow-2xl px-8 py-6"
class="hidden sidebar:block w-125 absolute bottom-19 start-64 bg-gray-50 dark:border-gray-800 border border-gray-200 dark:bg-immich-dark-gray dark:text-white text-black rounded-3xl shadow-2xl px-8 py-6"
transition:fade={{ duration: 150 }}
onmouseover={() => (hoverMessage = true)}
onmouseleave={() => (hoverMessage = false)}
@@ -122,7 +122,7 @@
>
<div class="flex justify-between place-items-center">
<div class="h-10 w-10">
<ImmichLogo noText class="h-[32px]" />
<ImmichLogo noText class="h-8" />
</div>
<IconButton
shape="round"

4
web/src/lib/components/shared-components/upload-asset-preview.svelte
View File

@@ -95,8 +95,8 @@
</div>
{#if uploadAsset.state === UploadState.STARTED}
<div class="text-black relative mt-[5px] h-[18px] w-full rounded-md bg-gray-300 dark:bg-gray-700">
<div class="h-[18px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`}></div>
<div class="text-black relative mt-[5px] h-4.5 w-full rounded-md bg-gray-300 dark:bg-gray-700">
<div class="h-4.5 rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`}></div>
<p class="absolute top-0.5 h-full w-full text-center text-white text-[10px]">
{#if uploadAsset.message === $t('asset_hashing')}
{uploadAsset.message}

6
web/src/lib/components/shared-components/upload-panel.svelte
View File

@@ -42,7 +42,7 @@
{#if showDetail}
<div
in:scale={{ duration: 250, easing: quartInOut }}
class="w-[325px] rounded-xl border border-gray-200 dark:border-subtle p-4 text-sm shadow-xs bg-subtle"
class="w-81 rounded-xl border border-gray-200 dark:border-subtle p-4 text-sm shadow-xs bg-subtle"
>
<div class="place-item-center mb-4 flex justify-between">
<div class="flex flex-col gap-1">
@@ -101,8 +101,8 @@
</div>
</div>
{#if showOptions}
<div class="immich-scrollbar mb-4 max-h-[400px] overflow-y-auto rounded-lg">
<div class="flex h-[26px] place-items-center gap-1">
<div class="immich-scrollbar mb-4 max-h-100 overflow-y-auto rounded-lg">
<div class="flex h-6.5 place-items-center gap-1">
<label class="immich-form-label" for="upload-concurrency">{$t('upload_concurrency')}</label>
</div>
<input