helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
117 changed files with 638 additions and 555 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/lib/components/asset-viewer/album-list-item.svelte
View file

@ -25,20 +25,20 @@
<button
on:click={() => dispatcher('album')}
class="w-full flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
class="flex w-full gap-4 px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
>
<div class="h-12 w-12 rounded-xl bg-slate-300">
{#if album.albumThumbnailAssetId}
<img
src={api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)}
alt={album.albumName}
class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
class={`z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg`}
data-testid="album-image"
draggable="false"
/>
{/if}
</div>
<div class="h-12 flex flex-col items-start justify-center">
<div class="flex h-12 flex-col items-start justify-center">
<span>{albumNameArray[0]}<b>{albumNameArray[1]}</b>{albumNameArray[2]}</span>
<span class="flex gap-1 text-sm">
{#if variant === 'simple'}

4
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View file

@ -46,12 +46,12 @@
</script>
<div
class="h-16 flex justify-between place-items-center px-3 transition-transform duration-200 z-[1001] bg-gradient-to-b from-black/40"
class="z-[1001] flex h-16 place-items-center justify-between bg-gradient-to-b from-black/40 px-3 transition-transform duration-200"
>
<div class="text-white">
<CircleIconButton isOpacity={true} logo={ArrowLeft} on:click={() => dispatch('goBack')} />
</div>
<div class="text-white flex gap-2 justify-end w-[calc(100%-3rem)] overflow-hidden">
<div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
{#if showMotionPlayButton}
{#if isMotionPhotoPlaying}
<CircleIconButton

16
web/src/lib/components/asset-viewer/asset-viewer.svelte
View file

@ -245,9 +245,9 @@
<section
id="immich-asset-viewer"
class="fixed h-screen w-screen left-0 top-0 overflow-y-hidden bg-black z-[1001] grid grid-rows-[64px_1fr] grid-cols-4"
class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-y-hidden bg-black"
>
<div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
<div class="z-[1000] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
<AssetViewerNavBar
{asset}
isMotionPhotoPlaying={shouldPlayMotionPhoto}
@ -270,17 +270,17 @@
</div>
{#if showNavigation}
<div class="row-start-2 row-span-1 col-start-1 column-span-1 justify-self-start mb-[60px] z-[999]">
<div class="column-span-1 z-[999] col-start-1 row-span-1 row-start-2 mb-[60px] justify-self-start">
<NavigationArea on:click={navigateAssetBackward}><ChevronLeft size="36" /></NavigationArea>
</div>
{/if}
<div class="row-start-1 row-span-full col-start-1 col-span-4">
<div class="col-span-4 col-start-1 row-span-full row-start-1">
{#key asset.id}
{#if !asset.resized}
<div class="h-full w-full flex justify-center">
<div class="flex h-full w-full justify-center">
<div
class="h-full bg-gray-100 dark:bg-immich-dark-gray flex items-center justify-center aspect-square px-auto"
class="px-auto flex aspect-square h-full items-center justify-center bg-gray-100 dark:bg-immich-dark-gray"
>
<ImageBrokenVariant size="25%" />
</div>
@ -303,7 +303,7 @@
</div>
{#if showNavigation}
<div class="row-start-2 row-span-1 col-start-4 col-span-1 justify-self-end mb-[60px] z-[999]">
<div class="z-[999] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end">
<NavigationArea on:click={navigateAssetForward}><ChevronRight size="36" /></NavigationArea>
</div>
{/if}
@ -312,7 +312,7 @@
<div
transition:fly={{ duration: 150 }}
id="detail-panel"
class="bg-immich-bg w-[360px] z-[1002] row-span-full transition-all overflow-y-auto dark:bg-immich-dark-bg dark:border-l dark:border-l-immich-dark-gray"
class="z-[1002] row-span-full w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
translate="yes"
>
<DetailPanel

24
web/src/lib/components/asset-viewer/detail-panel.svelte
View file

@ -80,20 +80,20 @@
<section class="p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
<div class="flex place-items-center gap-2">
<button
class="rounded-full p-3 flex place-items-center place-content-center hover:bg-gray-200 transition-colors dark:text-immich-dark-fg dark:hover:bg-gray-900"
class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
on:click={() => dispatch('close')}
>
<Close size="24" />
</button>
<p class="text-immich-fg dark:text-immich-dark-fg text-lg">Info</p>
<p class="text-lg text-immich-fg dark:text-immich-dark-fg">Info</p>
</div>
<section class="mx-4 mt-10">
<textarea
bind:this={textarea}
class="max-h-[500px]
text-base text-black bg-transparent dark:text-white border-b focus:border-b-2 border-gray-500 w-full focus:border-immich-primary dark:focus:border-immich-dark-primary transition-all resize-none overflow-hidden outline-none disabled:border-none"
w-full resize-none overflow-hidden border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary"
placeholder={$page?.data?.user?.id !== asset.ownerId ? '' : 'Add a description'}
style:display={$page?.data?.user?.id !== asset.ownerId && textarea?.value == '' ? 'none' : 'block'}
on:focusin={handleFocusIn}
@ -108,7 +108,7 @@
<section class="px-4 py-4 text-sm">
<h2>PEOPLE</h2>
<div class="flex flex-wrap gap-2 mt-4">
<div class="mt-4 flex flex-wrap gap-2">
{#each people as person (person.id)}
<a href="/people/{person.id}" class="w-[90px]" on:click={() => dispatch('close-viewer')}>
<ImageThumbnail
@ -120,7 +120,7 @@
heightStyle="90px"
thumbhash={null}
/>
<p class="font-medium mt-1 truncate">{person.name}</p>
<p class="mt-1 truncate font-medium">{person.name}</p>
</a>
{/each}
</div>
@ -178,7 +178,7 @@
<p class="break-all">
{getAssetFilename(asset)}
</p>
<div class="flex text-sm gap-2">
<div class="flex gap-2 text-sm">
{#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
{#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
<p>
@ -200,7 +200,7 @@
<div>
<p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
<div class="flex text-sm gap-2">
<div class="flex gap-2 text-sm">
<p>{`ƒ/${asset.exifInfo.fNumber.toLocaleString($locale)}` || ''}</p>
{#if asset.exifInfo.exposureTime}
@ -227,10 +227,10 @@
<div>
<p>{asset.exifInfo.city}</p>
<div class="flex text-sm gap-2">
<div class="flex gap-2 text-sm">
<p>{asset.exifInfo.state}</p>
</div>
<div class="flex text-sm gap-2">
<div class="flex gap-2 text-sm">
<p>{asset.exifInfo.country}</p>
</div>
</div>
@ -258,7 +258,7 @@
<section class="p-2 dark:text-immich-dark-fg">
<div class="px-4 py-4">
{#if albums.length > 0}
<p class="text-sm pb-4">APPEARS IN</p>
<p class="pb-4 text-sm">APPEARS IN</p>
{/if}
{#each albums as album}
<a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
@ -271,14 +271,14 @@
<div>
<img
alt={album.albumName}
class="w-[50px] h-[50px] object-cover rounded"
class="h-[50px] w-[50px] rounded object-cover"
src={album.albumThumbnailAssetId &&
api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
draggable="false"
/>
</div>
<div class="mt-auto mb-auto">
<div class="mb-auto mt-auto">
<p class="dark:text-immich-dark-primary">{album.albumName}</p>
<div class="flex gap-2 text-sm">
<p>{album.assetCount} items</p>

14
web/src/lib/components/asset-viewer/download-panel.svelte
View file

@ -15,25 +15,25 @@
{#if $isDownloading}
<div
transition:fly={{ x: -100, duration: 350 }}
class="w-[315px] max-h-[270px] bg-immich-bg border rounded-2xl shadow-sm absolute bottom-10 left-2 p-4 z-[10000] text-sm"
class="absolute bottom-10 left-2 z-[10000] max-h-[270px] w-[315px] rounded-2xl border bg-immich-bg p-4 text-sm shadow-sm"
>
<p class="text-gray-500 text-xs mb-2">DOWNLOADING</p>
<div class="max-h-[200px] my-2 overflow-y-auto mb-2 flex flex-col text-sm">
<p class="mb-2 text-xs text-gray-500">DOWNLOADING</p>
<div class="my-2 mb-2 flex max-h-[200px] flex-col overflow-y-auto text-sm">
{#each Object.keys($downloadAssets) as downloadKey (downloadKey)}
{@const download = $downloadAssets[downloadKey]}
<div class="mb-2 flex place-items-center" transition:slide>
<div class="w-full pr-10">
<div class="font-medium text-xs flex gap-2 place-items-center justify-between">
<div class="flex place-items-center justify-between gap-2 text-xs font-medium">
<p class="truncate">■ {downloadKey}</p>
{#if download.total}
<p class="whitespace-nowrap">{asByteUnitString(download.total, $locale)}</p>
{/if}
</div>
<div class="flex place-items-center gap-2">
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700">
<div class="bg-immich-primary h-[7px] rounded-full" style={`width: ${download.percentage}%`} />
<div class="h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-[7px] rounded-full bg-immich-primary" style={`width: ${download.percentage}%`} />
</div>
<p class="whitespace-nowrap min-w-[4em] text-right">
<p class="min-w-[4em] whitespace-nowrap text-right">
<span class="text-immich-primary">{download.percentage}%</span>
</p>
</div>

4
web/src/lib/components/asset-viewer/navigation-area.svelte
View file

@ -2,8 +2,8 @@
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="group h-full flex place-items-center" on:click on:keydown>
<button class="rounded-full p-3 transition text-gray-500 mx-4 group-hover:text-white group-hover:bg-gray-500">
<div class="group flex h-full place-items-center" on:click on:keydown>
<button class="mx-4 rounded-full p-3 text-gray-500 transition group-hover:bg-gray-500 group-hover:text-white">
<slot />
</button>
</div>

4
web/src/lib/components/asset-viewer/photo-viewer.svelte
View file

@ -103,7 +103,7 @@
<div
bind:this={element}
transition:fade={{ duration: 150 }}
class="flex place-items-center place-content-center h-full select-none"
class="flex h-full select-none place-content-center place-items-center"
>
{#await loadAssetData()}
<LoadingSpinner />
@ -113,7 +113,7 @@
transition:fade={{ duration: 150 }}
src={assetData}
alt={asset.id}
class="object-contain h-full w-full"
class="h-full w-full object-contain"
draggable="false"
/>
</div>

4
web/src/lib/components/asset-viewer/video-viewer.svelte
View file

@ -22,7 +22,7 @@
};
</script>
<div transition:fade={{ duration: 150 }} class="flex place-items-center place-content-center h-full select-none">
<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
<video
controls
class="h-full object-contain"
@ -35,7 +35,7 @@
</video>
{#if isVideoLoading}
<div class="absolute flex place-items-center place-content-center">
<div class="absolute flex place-content-center place-items-center">
<LoadingSpinner />
</div>
{/if}