github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: tailwind linting (#28165)

Browse Source 
chore: tailwind cannonical classes
This commit is contained in:
Daniel Dietzler
2026-05-01 06:18:03 +02:00
committed by GitHub
parent b60e9c6771
commit 5e9bda7fab
248 changed files with 963 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/assets/BrokenAsset.svelte
+1 -1
View File
@@ -25,7 +25,7 @@
style:height
>
<div class="hidden @min-[75px]:block">
<Icon icon={mdiImageBrokenVariant} size="7em" class="max-w-full min-w-6 min-h-6" />
<Icon icon={mdiImageBrokenVariant} size="7em" class="min-h-6 max-w-full min-w-6" />
</div>
{#if !hideMessage}
<span class="text-center text-xs @min-[100px]:text-sm @min-[150px]:text-base">{$t('error_loading_image')}</span>
web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
+2 -2
View File
@@ -78,7 +78,7 @@
src={url}
onLoad={setLoaded}
onError={setErrored}
class={['object-cover bg-gray-300 dark:bg-gray-700', sharedClasses, imageClass]}
class={['bg-gray-300 object-cover dark:bg-gray-700', sharedClasses, imageClass]}
{style}
alt={loaded || errored ? altText : ''}
draggable={false}
@@ -88,7 +88,7 @@
{/if}
{#if hidden}
<div class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
<div class="absolute inset-s-1/2 top-1/2 translate-[-50%] transform">
<!-- TODO fix `title` type -->
<Icon title={title ?? undefined} icon={mdiEyeOffOutline} size="2em" class={hiddenIconClass} />
</div>
web/src/lib/components/assets/thumbnail/Thumbnail.svelte
+23 -26
View File
@@ -206,7 +206,7 @@
<div
class={[
'group focus-visible:outline-none flex overflow-hidden transition-[background-color,border-radius]',
'group flex overflow-hidden transition-[background-color,border-radius] focus-visible:outline-none',
backgroundColorClass,
{ 'rounded-xl': selected },
]}
@@ -237,20 +237,20 @@
role="link"
>
<div
class={['group absolute top-0 bottom-0', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
class={['group absolute inset-y-0', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
style:width="inherit"
style:height="inherit"
>
<div
class={[
'absolute h-full w-full select-none bg-transparent transition-transform',
'absolute size-full bg-transparent transition-transform select-none',
{ 'scale-[0.85]': selected },
{ 'rounded-xl': selected },
]}
>
<ImageThumbnail
class={[
'absolute group-focus-visible:rounded-lg transition-[border-radius]',
'absolute transition-[border-radius] group-focus-visible:rounded-lg',
{ 'rounded-xl': selected },
imageClass,
]}
@@ -267,7 +267,7 @@
onComplete={(errored) => ((loaded = true), (thumbError = errored))}
/>
{#if asset.isVideo}
<div class="absolute h-full w-full pointer-events-none group-focus-visible:rounded-lg">
<div class="pointer-events-none absolute size-full group-focus-visible:rounded-lg">
<VideoThumbnail
class="group-focus-visible:rounded-lg"
url={getAssetPlaybackUrl({ id: asset.id, cacheKey: asset.thumbhash })}
@@ -278,7 +278,7 @@
/>
</div>
{:else if asset.isImage && asset.livePhotoVideoId}
<div class="absolute h-full w-full pointer-events-none group-focus-visible:rounded-lg">
<div class="pointer-events-none absolute size-full group-focus-visible:rounded-lg">
<VideoThumbnail
class="group-focus-visible:rounded-lg"
url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}
@@ -292,7 +292,7 @@
</div>
{:else if asset.isImage && asset.duration && mouseOver}
<!-- GIF -->
<div class="absolute h-full w-full pointer-events-none">
<div class="pointer-events-none absolute size-full">
<ImageThumbnail
class={imageClass}
{brokenAssetClass}
@@ -317,12 +317,12 @@
{/if}
<!-- icon overlay -->
<div class="z-2 absolute inset-0">
<div class="absolute inset-0 z-2">
<!-- Gradient overlay on hover -->
{#if !usingMobileDevice && !disabled && !asset.isVideo}
<div
class={[
'absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100 ',
'absolute size-full bg-linear-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100',
{ 'rounded-xl group-focus-visible:rounded-lg': selected },
]}
></div>
@@ -332,36 +332,33 @@
{#if dimmed && !mouseOver}
<div
id="a"
class={[
'z-2 absolute h-full w-full bg-gray-700/40 group-focus-visible:rounded-lg',
{ 'rounded-xl': selected },
]}
class={['absolute z-2 size-full bg-gray-700/40 group-focus-visible:rounded-lg', { 'rounded-xl': selected }]}
></div>
{/if}
<!-- Favorite asset star -->
{#if !authManager.isSharedLink && asset.isFavorite}
<div class="z-2 absolute bottom-2 inset-s-2">
<div class="absolute inset-s-2 bottom-2 z-2">
<Icon data-icon-favorite icon={mdiHeart} size="24" class="text-white" />
</div>
{/if}
{#if !!assetOwner}
<div class="z-2 absolute bottom-1 inset-e-2 max-w-[50%]">
<p class="text-xs font-medium text-white drop-shadow-lg max-w-full truncate">
<div class="absolute inset-e-2 bottom-1 z-2 max-w-[50%]">
<p class="max-w-full truncate text-xs font-medium text-white drop-shadow-lg">
{assetOwner.name}
</p>
</div>
{/if}
{#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
<div class={['z-2 absolute inset-s-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
<div class={['absolute inset-s-2 z-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
<Icon data-icon-archive icon={mdiArchiveArrowDownOutline} size="24" class="text-white" />
</div>
{/if}
{#if asset.isImage && asset.projectionType === ProjectionType.EQUIRECTANGULAR}
<div class="z-2 absolute inset-e-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
<div class="absolute inset-e-0 top-0 z-2 flex place-items-center gap-1 text-xs font-medium text-white">
<span class="pe-2 pt-2">
<Icon icon={mdiRotate360} size="24" />
</span>
@@ -369,7 +366,7 @@
{/if}
{#if asset.isImage && asset.duration}
<div class="z-2 absolute inset-e-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
<div class="absolute inset-e-0 top-0 z-2 flex place-items-center gap-1 text-xs font-medium text-white">
<span class="pe-2 pt-2">
<Icon icon={mouseOver ? mdiMotionPauseOutline : mdiFileGifBox} size="24" />
</span>
@@ -380,11 +377,11 @@
{#if asset.stack && showStackedIcon}
<div
class={[
'z-2 absolute flex place-items-center gap-1 text-xs font-medium text-white',
asset.isImage && !asset.livePhotoVideoId ? 'top-0 inset-e-0' : 'top-7 inset-e-1',
'absolute z-2 flex place-items-center gap-1 text-xs font-medium text-white',
asset.isImage && !asset.livePhotoVideoId ? 'inset-e-0 top-0' : 'inset-e-1 top-7',
]}
>
<span class="pe-2 pt-2 flex place-items-center gap-1">
<span class="flex place-items-center gap-1 pe-2 pt-2">
<p>{asset.stack.assetCount.toLocaleString($locale)}</p>
<Icon icon={mdiCameraBurst} size="24" />
</span>
@@ -395,7 +392,7 @@
<!-- lazy show the url on mouse over-->
{#if !usingMobileDevice && mouseOver && !disableLinkMouseOver}
<a
class="z-2 absolute w-full top-0 bottom-0"
class="absolute inset-y-0 z-2 w-full"
style:cursor="unset"
href={currentUrlReplaceAssetId(asset.id)}
onclick={(evt) => evt.preventDefault()}
@@ -408,7 +405,7 @@
{#if selectionCandidate}
<div
class={['z-2 absolute top-0 h-full w-full bg-immich-primary opacity-40', { 'rounded-xl': selected }]}
class={['absolute top-0 z-2 size-full bg-immich-primary opacity-40', { 'rounded-xl': selected }]}
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
></div>
@@ -446,7 +443,7 @@
e.preventDefault();
onPreview?.($state.snapshot(asset));
}}
class="absolute z-2 bottom-1 end-1 rounded-full bg-black/25 p-1.5 hover:bg-black/50 focus:outline-none transition-colors"
class="absolute inset-e-1 bottom-1 z-2 rounded-full bg-black/25 p-1.5 transition-colors hover:bg-black/50 focus:outline-none"
in:fade={{ duration: 100 }}
tabindex={-1}
aria-label="Preview asset"
@@ -458,7 +455,7 @@
<!-- Outline on focus -->
<div
class={[
'pointer-events-none absolute z-1 size-full outline-immich-primary dark:outline-immich-dark-primary group-focus-visible:outline-4 group-focus-visible:-outline-offset-4',
'pointer-events-none absolute z-1 size-full outline-immich-primary group-focus-visible:outline-4 group-focus-visible:-outline-offset-4 dark:outline-immich-dark-primary',
{ 'rounded-xl': selected },
]}
data-outline
web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
+3 -3
View File
@@ -94,10 +94,10 @@
{/if}
<div
class="@container absolute inset-x-0 top-0 flex justify-end place-items-center gap-1 text-xs font-medium text-white text-shadow-[1px_1px_6px_rgb(0_0_0)]"
class="@container absolute inset-x-0 top-0 flex place-items-center justify-end gap-1 text-xs font-medium text-white text-shadow-[1px_1px_6px_rgb(0_0_0)]"
>
{#if showTime}
<span class="hidden @min-[100px]:inline pt-2">
<span class="hidden pt-2 @min-[100px]:inline">
{#if remainingSeconds < 60}
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
{:else if remainingSeconds < 3600}
@@ -110,7 +110,7 @@
<!-- svelte-ignore a11y_no_static_element_interactions -->
<span
class="pe-2 pt-2 @max-[99px]:scale-75 @max-[99px]:pe-1 @max-[99px]:pt-1 drop-shadow-[1px_1px_6px_rgb(0_0_0)]"
class="pe-2 pt-2 drop-shadow-[1px_1px_6px_rgb(0_0_0)] @max-[99px]:scale-75 @max-[99px]:pe-1 @max-[99px]:pt-1"
onmouseenter={onMouseEnter}
onmouseleave={onMouseLeave}
>