tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-02 18:59:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): user-management layout (#3704)

Browse Source 
* fix: user-management layout

* better user form scrollbar

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
martin 2023-08-16 03:46:23 +02:00 committed by GitHub
parent 4762fd83d4
commit bc66b1a556
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/forms/edit-user-form.svelte
View File

@ -67,7 +67,7 @@
</script> </script>
<div <div
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" class="max-h-screen w-[500px] max-w-[95vw] overflow-y-auto 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 <div
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary" class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"

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

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

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

@ -168,11 +168,11 @@
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" 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"> <tr class="flex w-full place-items-center">
<th class="w-1/4 text-center text-sm font-medium">Email</th> <th class="w-4/12 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-2/12 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-2/12 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-2/12 text-center text-sm font-medium">Can import</th>
<th class="w-1/4 text-center text-sm font-medium">Action</th> <th class="w-2/12 text-center text-sm font-medium">Action</th>
</tr> </tr>
</thead> </thead>
<tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md 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">
@ -187,10 +187,10 @@
: 'bg-immich-bg dark:bg-immich-dark-gray/50' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
}`} }`}
> >
<td class="w-1/4 text-ellipsis break-all px-4 text-sm">{user.email}</td> <td class="w-4/12 text-ellipsis break-all px-2 text-sm">{user.email}</td>
<td class="w-1/4 text-ellipsis break-all px-4 text-sm">{user.firstName}</td> <td class="w-2/12 text-ellipsis break-all px-2 text-sm">{user.firstName}</td>
<td class="w-1/4 text-ellipsis break-all px-4 text-sm">{user.lastName}</td> <td class="w-2/12 text-ellipsis break-all px-2 text-sm">{user.lastName}</td>
<td class="w-1/4 text-ellipsis break-all px-4 text-sm"> <td class="w-2/12 text-ellipsis break-all px-2 text-sm">
<div class="container mx-auto flex flex-wrap justify-center"> <div class="container mx-auto flex flex-wrap justify-center">
{#if user.externalPath} {#if user.externalPath}
<Check size="16" /> <Check size="16" />
@ -199,7 +199,7 @@
{/if} {/if}
</div> </div>
</td> </td>
<td class="w-1/4 text-ellipsis break-all px-4 text-sm"> <td class="w-2/12 text-ellipsis break-all px-4 text-sm">
{#if !isDeleted(user)} {#if !isDeleted(user)}
<button <button
on:click={() => editUserHandler(user)} on:click={() => editUserHandler(user)}
@ -237,11 +237,9 @@
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" 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"> <tr class="flex w-full place-items-center">
<th class="flex w-1/2 justify-around text-center text-sm font-medium"> <th class="w-1/4 text-center text-sm font-medium">Name</th>
<span>Name</span> <th class="w-1/2 text-center text-sm font-medium">Email</th>
<span>Email</span> <th class="w-1/4 text-center text-sm font-medium">Action</th>
</th>
<th class="w-1/2 text-center text-sm font-medium">Action</th>
</tr> </tr>
</thead> </thead>
<tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md 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">
@ -256,11 +254,9 @@
: 'bg-immich-bg dark:bg-immich-dark-gray/50' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
}`} }`}
> >
<td class="w-2/3 text-ellipsis px-4 text-sm"> <td class="w-1/4 text-ellipsis break-words px-2 text-sm">{user.firstName} {user.lastName}</td>
<span>{user.firstName} {user.lastName}</span> <td class="w-1/2 text-ellipsis break-all px-2 text-sm">{user.email}</td>
<span>{user.email}</span> <td class="w-1/4 text-ellipsis px-2 text-sm">
</td>
<td class="w-1/3 text-ellipsis px-4 text-sm">
{#if !isDeleted(user)} {#if !isDeleted(user)}
<button <button
on:click={() => editUserHandler(user)} on:click={() => editUserHandler(user)}