mirror of
https://github.com/KevinMidboe/immich.git
synced 2025-10-29 17:40:28 +00:00
feat(web): small responsivness improvements regarding mobile use (#2255)
* make sidebar load more fluid use css before js kicks in added xs breakpoint in tailwind config * fix sidebar hr still showing if opened * make share tab not overflow on mobile * make user management tab responsive * make jobs panel responsive * fix format in tailwind config * fix full width on large screens use md breakpoint for w-[800px] * show accessible name for all screens * replace grid with flex-col * replace all xs with sm * remove isCollapsed completly using only tailwinds group feature and sm and md breakpoints * remove leftovers of isCollapsed and make the settings content less stretched * remove isCollapsed in layout and side-bar * fix code style --------- Co-authored-by: faupau03 <paul.paffe@gmx.net> Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
faupau
GitHub
@@ -36,25 +36,25 @@
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<div class="flex" slot="buttons">
|
||||
<LinkButton on:click={createSharedAlbum}>
|
||||
<div class="flex place-items-center gap-1 text-sm">
|
||||
<PlusBoxOutline size="18" />
|
||||
Create shared album
|
||||
<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
|
||||
<PlusBoxOutline size="18" class="shrink-0" />
|
||||
<span class="max-sm:text-xs leading-none">Create shared album</span>
|
||||
</div>
|
||||
</LinkButton>
|
||||
|
||||
<LinkButton on:click={() => goto('/sharing/sharedlinks')}>
|
||||
<div class="flex place-items-center gap-1 text-sm">
|
||||
<Link size="18" />
|
||||
Shared links
|
||||
<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
|
||||
<Link size="18" class="shrink-0" />
|
||||
<span class="max-sm:text-xs leading-none">Shared links</span>
|
||||
</div>
|
||||
</LinkButton>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<!-- Share Album List -->
|
||||
<div class="w-full flex flex-col place-items-center">
|
||||
<div class="md:w-full flex flex-col place-items-center">
|
||||
{#each data.sharedAlbums as album}
|
||||
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
|
||||
<a class="max-md:w-full" data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
|
||||
<SharedAlbumListTile {album} user={data.user} />
|
||||
</a>
|
||||
{/each}
|
||||
@@ -63,7 +63,7 @@
|
||||
<!-- Empty List -->
|
||||
{#if data.sharedAlbums.length === 0}
|
||||
<div
|
||||
class="border dark:border-immich-dark-gray p-5 w-[50%] 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="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"
|
||||
>
|
||||
<img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
|
||||
<p class="text-center text-immich-text-gray-500">
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
import type { LayoutData } from './$types';
|
||||
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
|
||||
|
||||
let isCollapsed: boolean;
|
||||
export let data: LayoutData;
|
||||
|
||||
// Circumvents the need to import the page store. Should be replaced by
|
||||
@@ -43,37 +42,33 @@
|
||||
|
||||
<main>
|
||||
<section class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] pt-[72px] h-screen">
|
||||
<SideBarSection bind:isCollapsed>
|
||||
<SideBarSection>
|
||||
<SideBarButton
|
||||
title="Users"
|
||||
logo={AccountMultipleOutline}
|
||||
isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
|
||||
on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
|
||||
{isCollapsed}
|
||||
/>
|
||||
<SideBarButton
|
||||
title="Jobs"
|
||||
logo={Sync}
|
||||
isSelected={data.routeId === AppRoute.ADMIN_JOBS}
|
||||
on:selected={() => goto(AppRoute.ADMIN_JOBS)}
|
||||
{isCollapsed}
|
||||
/>
|
||||
<SideBarButton
|
||||
title="Settings"
|
||||
logo={Cog}
|
||||
isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
|
||||
on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
|
||||
{isCollapsed}
|
||||
/>
|
||||
<SideBarButton
|
||||
title="Server Stats"
|
||||
logo={Server}
|
||||
isSelected={data.routeId === AppRoute.ADMIN_STATS}
|
||||
on:selected={() => goto(AppRoute.ADMIN_STATS)}
|
||||
{isCollapsed}
|
||||
/>
|
||||
<div class="mb-6 mt-auto">
|
||||
<StatusBox {isCollapsed} />
|
||||
<StatusBox />
|
||||
</div>
|
||||
</SideBarSection>
|
||||
|
||||
@@ -85,8 +80,8 @@
|
||||
<hr class="dark:border-immich-dark-gray" />
|
||||
</div>
|
||||
|
||||
<section id="setting-content" class="flex place-content-center mx-2">
|
||||
<section class="w-[800px] pt-5 pb-28">
|
||||
<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">
|
||||
<slot />
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -159,7 +159,7 @@
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
<table class="text-left w-full my-5">
|
||||
<table class="text-left w-full my-5 sm:block 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"
|
||||
>
|
||||
@@ -218,5 +218,66 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="text-left w-full my-5 block 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"
|
||||
>
|
||||
<tr class="flex w-full place-items-center">
|
||||
<th class="text-center w-1/2 font-medium text-sm flex justify-around">
|
||||
<span>Name</span>
|
||||
<span>Email</span>
|
||||
</th>
|
||||
<th class="text-center w-1/2 font-medium text-sm">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="overflow-y-auto rounded-md w-full max-h-[320px] block 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 ${
|
||||
isDeleted(user)
|
||||
? 'bg-red-300 dark:bg-red-900'
|
||||
: i % 2 == 0
|
||||
? 'bg-immich-gray dark:bg-immich-dark-gray/75'
|
||||
: 'bg-immich-bg dark:bg-immich-dark-gray/50'
|
||||
}`}
|
||||
>
|
||||
<td class="text-sm px-4 w-2/3 text-ellipsis">
|
||||
<span>{user.firstName} {user.lastName}</span>
|
||||
<span>{user.email}</span>
|
||||
</td>
|
||||
<td class="text-sm px-4 w-1/3 text-ellipsis">
|
||||
{#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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<TrashCanOutline size="16" />
|
||||
</button>
|
||||
{/if}
|
||||
{#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"
|
||||
title={`scheduled removal on ${getDeleteDate(user)}`}
|
||||
>
|
||||
<DeleteRestore size="16" />
|
||||
</button>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<Button size="sm" on:click={() => (shouldShowCreateUserForm = true)}>Create user</Button>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user