KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2026-04-27 17:23:46 +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

2
web/src/routes/(user)/albums/+page.svelte
View File

@@ -140,7 +140,7 @@
{#if $isShowContextMenu}
<ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu}>
<MenuOption on:click={() => setAlbumToDelete()}>
<span class="flex place-items-center place-content-center gap-2">
<span class="flex place-content-center place-items-center gap-2">
<DeleteOutline size="18" />
<p>Delete album</p>
</span>

30
web/src/routes/(user)/explore/+page.svelte
View File

@@ -34,10 +34,10 @@
{#if hasPeople}
<div class="mb-6 mt-2">
<div class="flex justify-between">
<p class="mb-4 dark:text-immich-dark-fg font-medium">People</p>
<p class="mb-4 font-medium dark:text-immich-dark-fg">People</p>
<a
href={AppRoute.PEOPLE}
class="font-medium text-sm pr-4 hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
class="pr-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
draggable="false">View All</a
>
</div>
@@ -51,7 +51,7 @@
altText={person.name}
widthStyle="100%"
/>
<p class="font-medium mt-2 text-ellipsis text-sm dark:text-white">{person.name}</p>
<p class="mt-2 text-ellipsis text-sm font-medium dark:text-white">{person.name}</p>
</a>
{/each}
</div>
@@ -61,18 +61,18 @@
{#if places.length > 0}
<div class="mb-6 mt-2">
<div>
<p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
<p class="mb-4 font-medium dark:text-immich-dark-fg">Places</p>
</div>
<div class="flex flex-row flex-wrap gap-4">
{#each places as item}
<a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
<div
class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] flex justify-center"
class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
>
<Thumbnail thumbnailSize={156} asset={item.data} readonly />
</div>
<span
class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
>
{item.value}
</span>
@@ -85,18 +85,18 @@
{#if things.length > 0}
<div class="mb-6 mt-2">
<div>
<p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
<p class="mb-4 font-medium dark:text-immich-dark-fg">Things</p>
</div>
<div class="flex flex-row flex-wrap gap-4">
{#each things as item}
<a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
<div
class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center flex"
class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
>
<Thumbnail thumbnailSize={156} asset={item.data} readonly />
</div>
<span
class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
>
{item.value}
</span>
@@ -106,15 +106,15 @@
</div>
{/if}
<hr class="dark:border-immich-dark-gray mb-4" />
<hr class="mb-4 dark:border-immich-dark-gray" />
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
<p class="text-sm">YOUR ACTIVITY</p>
<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
<a
href={AppRoute.FAVORITES}
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
class="flex w-full content-center gap-2 text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary"
draggable="false"
>
<HeartMultipleOutline size={24} />
@@ -122,7 +122,7 @@
</a>
<a
href="/search?recent=true"
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
class="flex w-full content-center gap-2 text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary"
draggable="false"
>
<ClockOutline size={24} />
@@ -135,7 +135,7 @@
<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
<a
href="/search?type={AssetTypeEnum.Video}"
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
class="flex w-full items-center gap-2 text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary"
>
<PlayCircleOutline size={24} />
<span>Videos</span>
@@ -143,7 +143,7 @@
<div>
<a
href="/search?motion=true"
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
class="flex w-full items-center gap-2 text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary"
>
<MotionPlayOutline size={24} />
<span>Motion photos</span>

4
web/src/routes/(user)/map/+page.svelte
View File

@@ -102,7 +102,7 @@
</script>
<UserPageLayout user={data.user} title={data.meta.title}>
<div class="h-full w-full isolate">
<div class="isolate h-full w-full">
{#if leaflet}
{@const { Map, TileLayer, AssetMarkerCluster, Control } = leaflet}
<Map
@@ -129,7 +129,7 @@
/>
<Control>
<button
class="flex justify-center items-center bg-white text-black/70 w-8 h-8 font-bold rounded-sm border-2 border-black/20 hover:bg-gray-50 focus:bg-gray-50"
class="flex h-8 w-8 items-center justify-center rounded-sm border-2 border-black/20 bg-white font-bold text-black/70 hover:bg-gray-50 focus:bg-gray-50"
title="Open map settings"
on:click={() => (showSettingsModal = true)}
>

2
web/src/routes/(user)/partners/[userId]/+page.svelte
View File

@@ -21,7 +21,7 @@
});
</script>
<main class="grid h-screen pt-18 bg-immich-bg dark:bg-immich-dark-bg">
<main class="grid h-screen bg-immich-bg pt-18 dark:bg-immich-dark-bg">
{#if $isMultiSelectStoreState}
<AssetSelectControlBar assets={$selectedAssets} clearSelect={assetInteractionStore.clearMultiselect}>
<DownloadAction />

6
web/src/routes/(user)/people/+page.svelte
View File

@@ -153,12 +153,12 @@
{#if showChangeNameModal}
<FullScreenModal on:clickOutside={() => (showChangeNameModal = false)}>
<div
class="bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray dark:text-immich-dark-fg w-[500px] max-w-[95vw] rounded-3xl border p-4 py-8 shadow-sm"
class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<div
class="text-immich-primary dark:text-immich-dark-primary flex flex-col place-content-center place-items-center gap-4 px-4"
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
>
<h1 class="text-immich-primary dark:text-immich-dark-primary text-2xl font-medium">Change name</h1>
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Change name</h1>
</div>
<form on:submit|preventDefault={submitNameChange} autocomplete="off">

10
web/src/routes/(user)/people/[personId]/+page.svelte
View File

@@ -120,7 +120,7 @@
{/if}
<!-- Face information block -->
<section class="pt-24 px-4 sm:px-6 flex place-items-center">
<section class="flex place-items-center px-4 pt-24 sm:px-6">
{#if isEditingName}
<EditNameInput
person={data.person}
@@ -145,9 +145,9 @@
on:click={() => (isEditingName = true)}
>
{#if data.person.name}
<p class="font-medium py-2">{data.person.name}</p>
<p class="py-2 font-medium">{data.person.name}</p>
{:else}
<p class="font-medium w-fit">Add a name</p>
<p class="w-fit font-medium">Add a name</p>
<p class="text-sm text-gray-500 dark:text-immich-gray">Find them fast by name with search</p>
{/if}
</button>
@@ -156,8 +156,8 @@
<!-- Gallery Block -->
{#if showAssets}
<section class="relative pt-8 sm:px-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
<section class="overflow-y-scroll relative immich-scrollbar">
<section class="relative mb-12 bg-immich-bg pt-8 dark:bg-immich-dark-bg sm:px-4">
<section class="immich-scrollbar relative overflow-y-scroll">
<section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
<GalleryViewer assets={data.assets} viewFrom="search-page" showArchiveIcon={true} bind:selectedAssets />
</section>

10
web/src/routes/(user)/search/+page.svelte
View File

@@ -92,11 +92,11 @@
{/if}
</section>
<section class="relative pt-32 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
<section class="overflow-y-auto relative immich-scrollbar">
<section class="relative mb-12 bg-immich-bg pt-32 dark:bg-immich-dark-bg">
<section class="immich-scrollbar relative overflow-y-auto">
{#if albums.length}
<section>
<div class="text-4xl font-medium text-black/70 dark:text-white/80 ml-6">ALBUMS</div>
<div class="ml-6 text-4xl font-medium text-black/70 dark:text-white/80">ALBUMS</div>
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
{#each albums as album (album.id)}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
@@ -119,10 +119,10 @@
/>
</div>
{:else}
<div class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white">
<div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
<div class="flex flex-col content-center items-center text-center">
<ImageOffOutline size="3.5em" />
<p class="font-medium text-3xl mt-5">No results</p>
<p class="mt-5 text-3xl font-medium">No results</p>
<p class="text-base font-normal">Try a synonym or more general keyword</p>
</div>
</div>

4
web/src/routes/(user)/share/[key]/+error.svelte
View File

@@ -2,6 +2,6 @@
<title>Opps! Error - Immich</title>
</svelte:head>
<section class="w-screen h-screen flex place-items-center place-content-center">
<div class="p-20 text-4xl dark:text-immich-dark-primary text-immich-primary">Page not found :/</div>
<section class="flex h-screen w-screen place-content-center place-items-center">
<div class="p-20 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</div>
</section>

20
web/src/routes/(user)/sharing/+page.svelte
View File

@@ -41,16 +41,16 @@
<UserPageLayout user={data.user} title={data.meta.title}>
<div class="flex" slot="buttons">
<LinkButton on:click={createSharedAlbum}>
<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
<PlusBoxOutline size="18" class="shrink-0" />
<span class="max-sm:text-xs leading-none">Create shared album</span>
<span class="leading-none max-sm:text-xs">Create shared album</span>
</div>
</LinkButton>
<LinkButton on:click={() => goto(AppRoute.SHARED_LINKS)}>
<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
<Link size="18" class="shrink-0" />
<span class="max-sm:text-xs leading-none">Shared links</span>
<span class="leading-none max-sm:text-xs">Shared links</span>
</div>
</LinkButton>
</div>
@@ -59,14 +59,14 @@
{#if data.partners.length > 0}
<div class="mb-6 mt-2">
<div>
<p class="mb-4 dark:text-immich-dark-fg font-medium">Partners</p>
<p class="mb-4 font-medium dark:text-immich-dark-fg">Partners</p>
</div>
<div class="flex flex-row flex-wrap gap-4">
{#each data.partners as partner (partner.id)}
<a
href="/partners/{partner.id}"
class="flex rounded-lg gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
class="flex gap-4 rounded-lg px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
>
<UserAvatar user={partner} size="md" autoColor />
<div class="text-left">
@@ -83,12 +83,12 @@
</div>
</div>
<hr class="dark:border-immich-dark-gray mb-4" />
<hr class="mb-4 dark:border-immich-dark-gray" />
{/if}
<div class="mb-6 mt-2">
<div>
<p class="mb-4 dark:text-immich-dark-fg font-medium">Albums</p>
<p class="mb-4 font-medium dark:text-immich-dark-fg">Albums</p>
</div>
<div>
@@ -104,10 +104,10 @@
<!-- Empty List -->
{#if data.sharedAlbums.length === 0}
<div
class="border dark:border-immich-dark-gray p-5 md:w-[500px] w-2/3 m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
class="m-auto mt-10 flex w-2/3 flex-col place-content-center place-items-center rounded-3xl border bg-gray-50 p-5 dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg md:w-[500px]"
>
<img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
<p class="text-center text-immich-text-gray-500">
<p class="text-immich-text-gray-500 text-center">
Create a shared album to share photos and videos with people in your network
</p>
</div>

8
web/src/routes/(user)/sharing/sharedlinks/+page.svelte
View File

@@ -62,16 +62,16 @@
<svelte:fragment slot="leading">Shared links</svelte:fragment>
</ControlAppBar>
<section class="flex flex-col pb-[120px] mt-[120px]">
<div class="w-[50%] m-auto mb-4 dark:text-immich-gray">
<section class="mt-[120px] flex flex-col pb-[120px]">
<div class="m-auto mb-4 w-[50%] dark:text-immich-gray">
<p>Manage shared links</p>
</div>
{#if sharedLinks.length === 0}
<div class="w-[50%] m-auto bg-gray-100 flex place-items-center place-content-center rounded-lg p-12">
<div class="m-auto flex w-[50%] place-content-center place-items-center rounded-lg bg-gray-100 p-12">
<p>You don't have any shared links</p>
</div>
{:else}
<div class="flex flex-col w-[50%] m-auto">
<div class="m-auto flex w-[50%] flex-col">
{#each sharedLinks as link (link.id)}
<SharedLinkCard
{link}

2
web/src/routes/(user)/user-settings/+page.svelte
View File

@@ -7,7 +7,7 @@
</script>
<UserPageLayout user={data.user} title={data.meta.title}>
<section class="flex place-content-center mx-4">
<section class="mx-4 flex place-content-center">
<div class="w-full max-w-3xl">
<UserSettingsList user={data.user} />
</div>

30
web/src/routes/+error.svelte
View File

@@ -32,28 +32,28 @@
<div class="h-screen w-screen">
<section class="bg-immich-bg dark:bg-immich-dark-bg">
<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-4">
<a class="flex gap-2 place-items-center hover:cursor-pointer" href="/photos">
<div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray">
<a class="flex place-items-center gap-2 hover:cursor-pointer" href="/photos">
<ImmichLogo height="35" width="35" />
<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
</a>
</div>
</section>
<div class="fixed top-0 w-full h-full bg-black/50 flex place-items-center place-content-center overflow-hidden">
<div class="fixed top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50">
<div>
<div
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray shadow-sm w-[500px] max-w-[95vw] rounded-3xl dark:text-immich-dark-fg"
class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<div>
<div class="flex items-center justify-between gap-4 px-4 py-4">
<h1 class="text-immich-primary dark:text-immich-dark-primary font-medium">
<h1 class="font-medium text-immich-primary dark:text-immich-dark-primary">
🚨 Error - Something went wrong
</h1>
<div class="flex justify-end">
<button
on:click={() => handleCopy()}
class="transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-3 py-2 text-white rounded-full shadow-md text-sm"
class="rounded-full bg-immich-primary px-3 py-2 text-sm text-white shadow-md transition-colors hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80"
>
<ContentCopy size={24} />
</button>
@@ -62,8 +62,8 @@
<hr />
<div class="p-4 max-h-[75vh] min-h-[300px] overflow-y-auto immich-scrollbar pb-4 gap-4">
<div class="flex flex-col w-full gap-2">
<div class="immich-scrollbar max-h-[75vh] min-h-[300px] gap-4 overflow-y-auto p-4 pb-4">
<div class="flex w-full flex-col gap-2">
<p class="text-red-500">{$page.error?.message} ({$page.error?.code})</p>
{#if $page.error?.stack}
<label for="stacktrace">Stacktrace</label>
@@ -74,15 +74,15 @@
<hr />
<div class="flex justify-around place-items-center place-content-center">
<div class="flex place-content-center place-items-center justify-around">
<!-- href="https://github.com/immich-app/immich/issues/new" -->
<a
href="https://discord.com/invite/D8JsnBEuKb"
target="_blank"
rel="noopener noreferrer"
class="flex justify-center grow basis-0 p-4"
class="flex grow basis-0 justify-center p-4"
>
<button class="flex flex-col gap-2 place-items-center place-content-center">
<button class="flex flex-col place-content-center place-items-center gap-2">
<Message size={24} />
<p class="text-sm">Get Help</p>
</button>
@@ -92,9 +92,9 @@
href="https://github.com/immich-app/immich/releases"
target="_blank"
rel="noopener noreferrer"
class="flex justify-center grow basis-0 p-4"
class="flex grow basis-0 justify-center p-4"
>
<button class="flex flex-col gap-2 place-items-center place-content-center">
<button class="flex flex-col place-content-center place-items-center gap-2">
<PartyPopper size={24} />
<p class="text-sm">Read Changelog</p>
</button>
@@ -104,9 +104,9 @@
href="https://immich.app/docs/guides/docker-help"
target="_blank"
rel="noopener noreferrer"
class="flex justify-center grow basis-0 p-4"
class="flex grow basis-0 justify-center p-4"
>
<button class="flex flex-col gap-2 place-items-center place-content-center">
<button class="flex flex-col place-content-center place-items-center gap-2">
<CodeTags size={24} />
<p class="text-sm">Check Logs</p>
</button>

2
web/src/routes/+layout.svelte
View File

@@ -72,7 +72,7 @@
</svelte:head>
<noscript
class="h-screen w-screen absolute z-[1000] flex place-items-center place-content-center bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
class="absolute z-[1000] flex h-screen w-screen place-content-center place-items-center bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
>
<FullscreenContainer title="Welcome to Immich">
To use Immich, you must enable JavaScript or use a JavaScript compatible browser.

10
web/src/routes/+page.svelte
View File

@@ -4,16 +4,16 @@
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
</script>
<section class="h-screen w-screen flex place-items-center place-content-center">
<div class="flex flex-col place-items-center gap-8 text-center max-w-[350px]">
<div class="flex place-items-center place-content-center">
<section class="flex h-screen w-screen place-content-center place-items-center">
<div class="flex max-w-[350px] flex-col place-items-center gap-8 text-center">
<div class="flex place-content-center place-items-center">
<ImmichLogo class="text-center" height="200" width="200" />
</div>
<h1 class="text-4xl text-immich-primary dark:text-immich-dark-primary font-bold font-immich-title">
<h1 class="font-immich-title text-4xl font-bold text-immich-primary dark:text-immich-dark-primary">
Welcome to IMMICH Web
</h1>
<Button size="lg" rounded="lg" on:click={() => goto('/auth/register')}>
<span class="font-bold px-2">Getting Started</span>
<span class="px-2 font-bold">Getting Started</span>
</Button>
</div>
</section>

4
web/src/routes/admin/+layout.svelte
View File

@@ -69,8 +69,8 @@
</div>
</SideBarSection>
<section id="setting-content" class="flex place-content-center mx-4">
<section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
<section id="setting-content" class="mx-4 flex place-content-center">
<section class="w-full pb-28 pt-5 sm:w-5/6 md:w-[800px]">
<slot />
</section>
</section>

66
web/src/routes/admin/user-management/+page.svelte
View File

@@ -145,41 +145,41 @@
{#if shouldShowInfoPanel}
<FullScreenModal on:clickOutside={() => (shouldShowInfoPanel = false)}>
<div class="border bg-white shadow-sm w-[500px] max-w-[95vw] rounded-3xl p-8 text-sm">
<h1 class="font-medium text-immich-primary text-lg mb-4">Password reset success</h1>
<div class="w-[500px] max-w-[95vw] rounded-3xl border bg-white p-8 text-sm shadow-sm">
<h1 class="mb-4 text-lg font-medium text-immich-primary">Password reset success</h1>
<p>
The user's password has been reset to the default <code
class="font-bold bg-gray-200 px-2 py-1 rounded-md text-immich-primary">password</code
class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary">password</code
>
<br />
Please inform the user, and they will need to change the password at the next log-on.
</p>
<div class="flex w-full mt-6">
<div class="mt-6 flex w-full">
<Button fullwidth on:click={() => (shouldShowInfoPanel = false)}>Done</Button>
</div>
</div>
</FullScreenModal>
{/if}
<table class="text-left w-full my-5 sm:block hidden">
<table class="my-5 hidden w-full text-left sm:block">
<thead
class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
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"
>
<tr class="flex w-full place-items-center">
<th class="text-center w-1/4 font-medium text-sm">Email</th>
<th class="text-center w-1/4 font-medium text-sm">First name</th>
<th class="text-center w-1/4 font-medium text-sm">Last name</th>
<th class="text-center w-1/4 font-medium text-sm">Can import</th>
<th class="text-center w-1/4 font-medium text-sm">Action</th>
<th class="w-1/4 text-center text-sm font-medium">Email</th>
<th class="w-1/4 text-center text-sm font-medium">First name</th>
<th class="w-1/4 text-center text-sm font-medium">Last name</th>
<th class="w-1/4 text-center text-sm font-medium">Can import</th>
<th class="w-1/4 text-center text-sm font-medium">Action</th>
</tr>
</thead>
<tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray">
<tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
{#if allUsers}
{#each allUsers as user, i}
<tr
class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
isDeleted(user)
? 'bg-red-300 dark:bg-red-900'
: i % 2 == 0
@@ -187,11 +187,11 @@
: 'bg-immich-bg dark:bg-immich-dark-gray/50'
}`}
>
<td class="text-sm px-4 w-1/4 text-ellipsis break-all">{user.email}</td>
<td class="text-sm px-4 w-1/4 text-ellipsis break-all">{user.firstName}</td>
<td class="text-sm px-4 w-1/4 text-ellipsis break-all">{user.lastName}</td>
<td class="text-sm px-4 w-1/4 text-ellipsis break-all">
<div class="container flex flex-wrap mx-auto justify-center">
<td class="w-1/4 text-ellipsis break-all px-4 text-sm">{user.email}</td>
<td class="w-1/4 text-ellipsis break-all px-4 text-sm">{user.firstName}</td>
<td class="w-1/4 text-ellipsis break-all px-4 text-sm">{user.lastName}</td>
<td class="w-1/4 text-ellipsis break-all px-4 text-sm">
<div class="container mx-auto flex flex-wrap justify-center">
{#if user.externalPath}
<Check size="16" />
{:else}
@@ -199,18 +199,18 @@
{/if}
</div>
</td>
<td class="text-sm px-4 w-1/4 text-ellipsis break-all">
<td class="w-1/4 text-ellipsis break-all px-4 text-sm">
{#if !isDeleted(user)}
<button
on:click={() => editUserHandler(user)}
class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
>
<PencilOutline size="16" />
</button>
{#if user.id !== data.user.id}
<button
on:click={() => deleteUserHandler(user)}
class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
>
<TrashCanOutline size="16" />
</button>
@@ -219,7 +219,7 @@
{#if isDeleted(user)}
<button
on:click={() => restoreUserHandler(user)}
class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
title={`scheduled removal on ${getDeleteDate(user)}`}
>
<DeleteRestore size="16" />
@@ -232,23 +232,23 @@
</tbody>
</table>
<table class="text-left w-full my-5 block sm:hidden">
<table class="my-5 block w-full text-left sm:hidden">
<thead
class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
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"
>
<tr class="flex w-full place-items-center">
<th class="text-center w-1/2 font-medium text-sm flex justify-around">
<th class="flex w-1/2 justify-around text-center text-sm font-medium">
<span>Name</span>
<span>Email</span>
</th>
<th class="text-center w-1/2 font-medium text-sm">Action</th>
<th class="w-1/2 text-center text-sm font-medium">Action</th>
</tr>
</thead>
<tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray">
<tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
{#if allUsers}
{#each allUsers as user, i}
<tr
class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
isDeleted(user)
? 'bg-red-300 dark:bg-red-900'
: i % 2 == 0
@@ -256,21 +256,21 @@
: 'bg-immich-bg dark:bg-immich-dark-gray/50'
}`}
>
<td class="text-sm px-4 w-2/3 text-ellipsis">
<td class="w-2/3 text-ellipsis px-4 text-sm">
<span>{user.firstName} {user.lastName}</span>
<span>{user.email}</span>
</td>
<td class="text-sm px-4 w-1/3 text-ellipsis">
<td class="w-1/3 text-ellipsis px-4 text-sm">
{#if !isDeleted(user)}
<button
on:click={() => editUserHandler(user)}
class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 max-sm:mb-1 transition-all duration-150 hover:bg-immich-primary/75"
class="rounded-full bg-immich-primary p-2 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700 max-sm:mb-1 sm:p-3"
>
<PencilOutline size="16" />
</button>
<button
on:click={() => deleteUserHandler(user)}
class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 transition-all duration-150 hover:bg-immich-primary/75"
class="rounded-full bg-immich-primary p-2 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700 sm:p-3"
>
<TrashCanOutline size="16" />
</button>
@@ -278,7 +278,7 @@
{#if isDeleted(user)}
<button
on:click={() => restoreUserHandler(user)}
class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 transition-all duration-150 hover:bg-immich-primary/75"
class="rounded-full bg-immich-primary p-2 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700 sm:p-3"
title={`scheduled removal on ${getDeleteDate(user)}`}
>
<DeleteRestore size="16" />