KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): sort tailwindcss class automatically (#3330)

Browse Source
This commit is contained in:
Alex
2023-07-18 13:19:39 -05:00
committed by GitHub
parent f28fc8fa5c
commit 7316ad5a72
117 changed files with 638 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
View File

@@ -33,7 +33,7 @@
on:image-load|once={() => (complete = true)}
/>
{#if hidden}
<div class="absolute top-1/2 left-1/2 transform translate-x-[-50%] translate-y-[-50%]">
<div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
<EyeOffOutline size="2em" />
</div>
{/if}
@@ -44,7 +44,7 @@
style:height={heightStyle}
src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))}
alt={altText}
class="absolute object-cover top-0"
class="absolute top-0 object-cover"
class:rounded-lg={curve}
class:shadow-lg={shadow}
class:rounded-full={circle}

16
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View File

@@ -69,7 +69,7 @@
<div
style:width="{width}px"
style:height="{height}px"
class="relative group overflow-hidden {disabled
class="group relative overflow-hidden {disabled
? 'bg-gray-300'
: 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
class:cursor-not-allowed={disabled}
@@ -80,7 +80,7 @@
on:keydown={thumbnailKeyDownHandler}
>
{#if intersecting}
<div class="absolute w-full h-full z-20">
<div class="absolute z-20 h-full w-full">
<!-- Select asset button -->
{#if !readonly && (mouseOver || selected || selectionCandidate)}
<button
@@ -103,12 +103,12 @@
</div>
<div
class="h-full w-full bg-gray-100 dark:bg-immich-dark-gray absolute select-none transition-transform"
class="absolute h-full w-full select-none bg-gray-100 transition-transform dark:bg-immich-dark-gray"
class:scale-[0.85]={selected}
>
<!-- Gradient overlay on hover -->
<div
class="absolute w-full h-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 group-hover:opacity-100 transition-opacity z-10"
class="absolute z-10 h-full w-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100"
/>
<!-- Favorite asset star -->
@@ -133,13 +133,13 @@
thumbhash={asset.thumbhash}
/>
{:else}
<div class="w-full h-full p-4 flex items-center justify-center">
<div class="flex h-full w-full items-center justify-center p-4">
<ImageBrokenVariant size="48" />
</div>
{/if}
{#if asset.type === AssetTypeEnum.Video}
<div class="absolute w-full h-full top-0">
<div class="absolute top-0 h-full w-full">
<VideoThumbnail
url={api.getAssetFileUrl(asset.id, false, true, publicSharedKey)}
enablePlayback={mouseOver}
@@ -149,7 +149,7 @@
{/if}
{#if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
<div class="absolute w-full h-full top-0">
<div class="absolute top-0 h-full w-full">
<VideoThumbnail
url={api.getAssetFileUrl(asset.livePhotoVideoId, false, true, publicSharedKey)}
pauseIcon={MotionPauseOutline}
@@ -162,7 +162,7 @@
</div>
{#if selectionCandidate}
<div
class="absolute w-full h-full top-0 bg-immich-primary opacity-40"
class="absolute top-0 h-full w-full bg-immich-primary opacity-40"
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
/>

6
web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
View File

@@ -29,7 +29,7 @@
}
</script>
<div class="absolute right-0 top-0 text-white text-xs font-medium flex gap-1 place-items-center z-20">
<div class="absolute right-0 top-0 z-20 flex place-items-center gap-1 text-xs font-medium text-white">
{#if showTime}
<span class="pt-2">
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
@@ -38,7 +38,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<span
class="pt-2 pr-2"
class="pr-2 pt-2"
on:mouseenter={() => {
if (playbackOnIconHover) {
enablePlayback = true;
@@ -67,7 +67,7 @@
{#if enablePlayback}
<video
bind:this={player}
class="w-full h-full object-cover"
class="h-full w-full object-cover"
muted
autoplay
src={url}