KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-12-08 04:09:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): common layout for user pages (#1995)

Browse Source 
* refactor(web): common layout for user pages

* remove unused imports
This commit is contained in:
Michel Heusschen
2023-03-18 22:31:15 +01:00
committed by GitHub
parent dd02f1025f
commit 9a332074c7
17 changed files with 437 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,11 +5,10 @@
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import type { PageData } from './$types';
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
import { useAlbums } from './albums.bloc';
import empty1Url from '$lib/assets/empty-1.svg';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
export let data: PageData;
@@ -31,84 +30,57 @@
};
</script>
<section>
<NavigationBar user={data.user} shouldShowUploadButton={false} />
</section>
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<!-- Main Section -->
<section class="overflow-y-auto relative immich-scrollbar">
<section
id="album-content"
class="relative pt-8 pl-4 pr-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
<UserPageLayout user={data.user} title={data.meta.title}>
<div slot="buttons">
<button
on:click={handleCreateAlbum}
class="immich-text-button text-sm dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
>
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
<div>
<p class="font-medium">Albums</p>
</div>
<span>
<PlusBoxOutline size="18" />
</span>
<p>Create album</p>
</button>
</div>
<div>
<button
on:click={handleCreateAlbum}
class="immich-text-button text-sm dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
>
<span>
<PlusBoxOutline size="18" />
</span>
<p>Create album</p>
</button>
</div>
</div>
<!-- Album Card -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-8">
{#each $albums as album}
{#key album.id}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
<AlbumCard
{album}
on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
/>
</a>
{/key}
{/each}
</div>
<div class="my-4">
<hr class="dark:border-immich-dark-gray" />
</div>
<!-- Empty Message -->
{#if $albums.length === 0}
<div
on:click={handleCreateAlbum}
on:keydown={handleCreateAlbum}
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer 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"
>
<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
<!-- Album Card -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-8">
{#each $albums as album}
{#key album.id}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
<AlbumCard
{album}
on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
/>
</a>
{/key}
{/each}
</div>
<!-- Empty Message -->
{#if $albums.length === 0}
<div
on:click={handleCreateAlbum}
on:keydown={handleCreateAlbum}
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer 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"
>
<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
Create an album to organize your photos and videos
</p>
</div>
{/if}
</section>
</section>
<!-- Context Menu -->
{#if $isShowContextMenu}
<ContextMenu {...$contextMenuPosition} on:clickoutside={closeAlbumContextMenu}>
<MenuOption on:click={deleteSelectedContextAlbum}>
<span class="flex place-items-center place-content-center gap-2">
<DeleteOutline size="18" />
<p>Delete album</p>
</span>
</MenuOption>
</ContextMenu>
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
Create an album to organize your photos and videos
</p>
</div>
{/if}
</section>
</UserPageLayout>
<!-- Context Menu -->
{#if $isShowContextMenu}
<ContextMenu {...$contextMenuPosition} on:clickoutside={closeAlbumContextMenu}>
<MenuOption on:click={deleteSelectedContextAlbum}>
<span class="flex place-items-center place-content-center gap-2">
<DeleteOutline size="18" />
<p>Delete album</p>
</span>
</MenuOption>
</ContextMenu>
{/if}