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/faces-page/edit-name-input.svelte
View file

@ -15,7 +15,7 @@
</script>
<div
class="flex place-items-center max-w-lg rounded-lg border dark:border-transparent p-2 bg-gray-100 dark:bg-gray-700"
class="flex max-w-lg place-items-center rounded-lg border bg-gray-100 p-2 dark:border-transparent dark:bg-gray-700"
use:clickOutside
on:outclick={() => dispatch('cancel')}
>
@ -28,14 +28,14 @@
heightStyle="2rem"
/>
<form
class="ml-4 flex justify-between w-full gap-16"
class="ml-4 flex w-full justify-between gap-16"
autocomplete="off"
on:submit|preventDefault={() => dispatch('change', name)}
>
<!-- svelte-ignore a11y-autofocus -->
<input
autofocus
class="gap-2 w-full bg-gray-100 dark:bg-gray-700 dark:text-white"
class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
type="text"
placeholder="New name or nickname"
bind:value={name}

4
web/src/lib/components/faces-page/face-thumbnail-selector.svelte
View file

@ -25,12 +25,12 @@
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
>
<ControlAppBar on:close-button-click={onClose}>
<svelte:fragment slot="leading">Select feature photo</svelte:fragment>
</ControlAppBar>
<section class="pt-[100px] pl-[70px] bg-immich-bg dark:bg-immich-dark-bg">
<section class="bg-immich-bg pl-[70px] pt-[100px] dark:bg-immich-dark-bg">
<AssetSelectionViewer {assets} on:select={handleSelectedAsset} />
</section>
</section>

10
web/src/lib/components/faces-page/face-thumbnail.svelte
View file

@ -18,14 +18,14 @@
</script>
<button
class="relative transition-all rounded-lg"
class="relative rounded-lg transition-all"
on:click={handleOnClicked}
disabled={!selectable}
style:width={thumbnailSize ? thumbnailSize + 'px' : '100%'}
style:height={thumbnailSize ? thumbnailSize + 'px' : '100%'}
>
<div
class="filter w-full h-full brightness-90 border-2"
class="h-full w-full border-2 brightness-90 filter"
class:rounded-full={circle}
class:rounded-lg={!circle}
class:border-transparent={!border}
@ -42,7 +42,7 @@
</div>
<div
class="absolute top-0 left-0 w-full h-full bg-immich-primary/30 opacity-0"
class="absolute left-0 top-0 h-full w-full bg-immich-primary/30 opacity-0"
class:hover:opacity-100={selectable}
class:rounded-full={circle}
class:rounded-lg={!circle}
@ -50,7 +50,7 @@
{#if selected}
<div
class="absolute top-0 left-0 w-full h-full bg-blue-500/80"
class="absolute left-0 top-0 h-full w-full bg-blue-500/80"
class:rounded-full={circle}
class:rounded-lg={!circle}
/>
@ -58,7 +58,7 @@
{#if person.name}
<span
class="absolute bottom-2 left-0 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
class="w-100 absolute bottom-2 left-0 w-full text-ellipsis px-1 text-center font-medium text-white backdrop-blur-[1px] hover:cursor-pointer"
>
{person.name}
</span>

14
web/src/lib/components/faces-page/merge-face-selector.svelte
View file

@ -75,7 +75,7 @@
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
>
<ControlAppBar on:close-button-click={onClose}>
<svelte:fragment slot="leading">
@ -99,12 +99,12 @@
>
</svelte:fragment>
</ControlAppBar>
<section class="pt-[100px] px-[70px] bg-immich-bg dark:bg-immich-dark-bg">
<section class="bg-immich-bg px-[70px] pt-[100px] dark:bg-immich-dark-bg">
<section id="merge-face-selector relative">
<div class="place-items-center place-content-center mb-10 h-[200px]">
<p class="uppercase mb-4 dark:text-white text-center">Choose matching faces to merge</p>
<div class="mb-10 h-[200px] place-content-center place-items-center">
<p class="mb-4 text-center uppercase dark:text-white">Choose matching faces to merge</p>
<div class="grid grid-flow-col-dense place-items-center place-content-center gap-4">
<div class="grid grid-flow-col-dense place-content-center place-items-center gap-4">
{#each selectedPeople as person (person.id)}
<div animate:flip={{ duration: 250, easing: quintOut }}>
<FaceThumbnail border circle {person} selectable thumbnailSize={120} on:click={() => onSelect(person)} />
@ -118,10 +118,10 @@
</div>
</div>
<div
class="p-10 overflow-y-auto rounded-3xl bg-gray-200 dark:bg-immich-dark-gray"
class="overflow-y-auto rounded-3xl bg-gray-200 p-10 dark:bg-immich-dark-gray"
style:max-height={screenHeight - 200 - 200 + 'px'}
>
<div class="grid grid-col-2 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-8">
<div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
{#each unselectedPeople as person (person.id)}
<FaceThumbnail {person} on:click={() => onSelect(person)} circle border selectable />
{/each}

8
web/src/lib/components/faces-page/show-hide.svelte
View file

@ -11,19 +11,19 @@
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
>
<div
class="absolute border-b dark:border-immich-dark-gray flex justify-between place-items-center dark:text-immich-dark-fg w-full h-16"
class="absolute flex h-16 w-full place-items-center justify-between border-b dark:border-immich-dark-gray dark:text-immich-dark-fg"
>
<div class="flex items-center justify-between p-8 w-full">
<div class="flex w-full items-center justify-between p-8">
<div class="flex items-center">
<CircleIconButton logo={Close} on:click={() => dispatch('closeClick')} />
<p class="ml-4">Show & hide faces</p>
</div>
<IconButton on:click={() => dispatch('doneClick')}>Done</IconButton>
</div>
<div class="absolute top-16 h-[calc(100%-theme(spacing.16))] w-full immich-scrollbar p-4 pb-8">
<div class="immich-scrollbar absolute top-16 h-[calc(100%-theme(spacing.16))] w-full p-4 pb-8">
<slot />
</div>
</div>