mirror of
https://github.com/immich-app/immich.git
synced 2024-12-25 10:43:13 +02:00
feat(web): improve page header + scrolling (#2453)
* fix: line to edge of screen * refactor: user layout page
This commit is contained in:
Jason Rasmussen
GitHub
parent
35c4887e4a
commit
4a0052026f
@ -22,24 +22,25 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main
|
<main
|
||||||
class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] relative pt-[var(--navbar-height)] h-screen bg-immich-bg dark:bg-immich-dark-bg immich-scrollbar"
|
class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] relative pt-[var(--navbar-height)] h-screen overflow-hidden bg-immich-bg dark:bg-immich-dark-bg"
|
||||||
>
|
>
|
||||||
<SideBar />
|
<SideBar />
|
||||||
<slot name="content">
|
<slot name="content">
|
||||||
<section class="overflow-y-auto my-8 mx-4 bg-immich-bg dark:bg-immich-dark-bg">
|
{#if title}
|
||||||
{#if title}
|
<section class="relative">
|
||||||
<div class="flex justify-between place-items-center dark:text-immich-dark-fg px-4 h-10">
|
<div
|
||||||
|
class="absolute border-b dark:border-immich-dark-gray flex justify-between place-items-center dark:text-immich-dark-fg w-full p-4 h-16"
|
||||||
|
>
|
||||||
<p class="font-medium">{title}</p>
|
<p class="font-medium">{title}</p>
|
||||||
|
|
||||||
<slot name="buttons" />
|
<slot name="buttons" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="my-4">
|
<div
|
||||||
<hr class="dark:border-immich-dark-gray" />
|
class="absolute overflow-y-auto top-16 h-[calc(100%-theme(spacing.16))] w-full immich-scrollbar p-4 pb-8"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</section>
|
||||||
|
{/if}
|
||||||
<slot />
|
|
||||||
</section>
|
|
||||||
</slot>
|
</slot>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
<section
|
<section
|
||||||
id="sidebar"
|
id="sidebar"
|
||||||
class="group flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-all duration-200 z-10 w-18 md:w-64 hover:sm:pr-6 md:pr-6 hover:sm:w-64 hover:sm:shadow-2xl hover:md:shadow-none hover:md:border-none hover:sm:border-r hover:sm:dark:border-r-immich-dark-gray"
|
class="group flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-all duration-200 z-10 w-18 md:w-64 hover:sm:pr-6 md:pr-6 hover:sm:w-64 hover:sm:shadow-2xl hover:md:shadow-none hover:md:border-none hover:sm:border-r hover:sm:dark:border-r-immich-dark-gray relative overflow-y-auto immich-scrollbar"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -36,7 +36,7 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode}>
|
<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode} title={data.meta.title}>
|
||||||
<!-- Empty Message -->
|
<!-- Empty Message -->
|
||||||
{#if $archivedAsset.length === 0}
|
{#if $archivedAsset.length === 0}
|
||||||
<EmptyPlaceholder
|
<EmptyPlaceholder
|
||||||
|
|||||||
@ -31,129 +31,125 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||||
<div class="mx-4">
|
{#if people.length > 0}
|
||||||
{#if people.length > 0}
|
<div class="mb-6 mt-2">
|
||||||
<div class="mb-6 mt-2">
|
<div class="flex justify-between">
|
||||||
<div class="flex justify-between">
|
<p class="mb-4 dark:text-immich-dark-fg font-medium">People</p>
|
||||||
<p class="mb-4 dark:text-immich-dark-fg font-medium">People</p>
|
{#if data.people.length > MAX_ITEMS}
|
||||||
{#if data.people.length > MAX_ITEMS}
|
<a
|
||||||
<a
|
href={AppRoute.PEOPLE}
|
||||||
href={AppRoute.PEOPLE}
|
class="font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
|
||||||
class="font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
|
draggable="false">View All</a
|
||||||
draggable="false">View All</a
|
>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row flex-wrap gap-4">
|
||||||
|
{#each people as person (person.id)}
|
||||||
|
<a href="/people/{person.id}" class="w-24 text-center">
|
||||||
|
<ImageThumbnail
|
||||||
|
circle
|
||||||
|
shadow
|
||||||
|
url={api.getPeopleThumbnailUrl(person.id)}
|
||||||
|
altText={person.name}
|
||||||
|
widthStyle="100%"
|
||||||
|
/>
|
||||||
|
<p class="font-medium mt-2 text-ellipsis text-sm dark:text-white">{person.name}</p>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if places.length > 0}
|
||||||
|
<div class="mb-6 mt-2">
|
||||||
|
<div>
|
||||||
|
<p class="mb-4 dark:text-immich-dark-fg font-medium">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"
|
||||||
>
|
>
|
||||||
{/if}
|
<Thumbnail thumbnailSize={156} asset={item.data} readonly />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row flex-wrap gap-4">
|
<span
|
||||||
{#each people as person (person.id)}
|
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]"
|
||||||
<a href="/people/{person.id}" class="w-24 text-center">
|
>
|
||||||
<ImageThumbnail
|
{item.value}
|
||||||
circle
|
</span>
|
||||||
shadow
|
|
||||||
url={api.getPeopleThumbnailUrl(person.id)}
|
|
||||||
altText={person.name}
|
|
||||||
widthStyle="100%"
|
|
||||||
/>
|
|
||||||
<p class="font-medium mt-2 text-ellipsis text-sm dark:text-white">{person.name}</p>
|
|
||||||
</a>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if places.length > 0}
|
|
||||||
<div class="mb-6 mt-2">
|
|
||||||
<div>
|
|
||||||
<p class="mb-4 dark:text-immich-dark-fg font-medium">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"
|
|
||||||
>
|
|
||||||
<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]"
|
|
||||||
>
|
|
||||||
{item.value}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if things.length > 0}
|
|
||||||
<div class="mb-6 mt-2">
|
|
||||||
<div>
|
|
||||||
<p class="mb-4 dark:text-immich-dark-fg font-medium">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"
|
|
||||||
>
|
|
||||||
<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]"
|
|
||||||
>
|
|
||||||
{item.value}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<hr class="dark:border-immich-dark-gray mb-4" />
|
|
||||||
|
|
||||||
<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="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"
|
|
||||||
draggable="false"
|
|
||||||
>
|
|
||||||
<HeartMultipleOutline size={24} />
|
|
||||||
<span>Favorites</span>
|
|
||||||
</a>
|
</a>
|
||||||
<a
|
{/each}
|
||||||
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"
|
|
||||||
draggable="false"
|
|
||||||
>
|
|
||||||
<ClockOutline size={24} />
|
|
||||||
<span>Recently added</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
|
</div>
|
||||||
<p class="text-sm">CATEGORIES</p>
|
{/if}
|
||||||
<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
|
|
||||||
|
{#if things.length > 0}
|
||||||
|
<div class="mb-6 mt-2">
|
||||||
|
<div>
|
||||||
|
<p class="mb-4 dark:text-immich-dark-fg font-medium">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"
|
||||||
|
>
|
||||||
|
<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]"
|
||||||
|
>
|
||||||
|
{item.value}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<hr class="dark:border-immich-dark-gray mb-4" />
|
||||||
|
|
||||||
|
<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="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"
|
||||||
|
draggable="false"
|
||||||
|
>
|
||||||
|
<HeartMultipleOutline size={24} />
|
||||||
|
<span>Favorites</span>
|
||||||
|
</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"
|
||||||
|
draggable="false"
|
||||||
|
>
|
||||||
|
<ClockOutline size={24} />
|
||||||
|
<span>Recently added</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
|
||||||
|
<p class="text-sm">CATEGORIES</p>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<PlayCircleOutline size={24} />
|
||||||
|
<span>Videos</span>
|
||||||
|
</a>
|
||||||
|
<div>
|
||||||
<a
|
<a
|
||||||
href="/search?type={AssetTypeEnum.Video}"
|
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="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
|
||||||
>
|
>
|
||||||
<PlayCircleOutline size={24} />
|
<MotionPlayOutline size={24} />
|
||||||
<span>Videos</span>
|
<span>Motion photos</span>
|
||||||
</a>
|
</a>
|
||||||
<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"
|
|
||||||
>
|
|
||||||
<MotionPlayOutline size={24} />
|
|
||||||
<span>Motion photos</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -40,7 +40,7 @@
|
|||||||
</AssetSelectControlBar>
|
</AssetSelectControlBar>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode}>
|
<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode} title={data.meta.title}>
|
||||||
<section>
|
<section>
|
||||||
<!-- Empty Message -->
|
<!-- Empty Message -->
|
||||||
{#if favorites.length === 0}
|
{#if favorites.length === 0}
|
||||||
|
|||||||
@ -45,7 +45,7 @@
|
|||||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||||
<div slot="buttons" />
|
<div slot="buttons" />
|
||||||
|
|
||||||
<div class="h-[90%] w-full relative z-0">
|
<div class="h-full w-full relative z-0">
|
||||||
{#await import('$lib/components/shared-components/leaflet') then { Map, TileLayer, AssetMarkerCluster }}
|
{#await import('$lib/components/shared-components/leaflet') then { Map, TileLayer, AssetMarkerCluster }}
|
||||||
<Map latlng={initialMapCenter} zoom={7}>
|
<Map latlng={initialMapCenter} zoom={7}>
|
||||||
<TileLayer
|
<TileLayer
|
||||||
|
|||||||
@ -53,7 +53,7 @@
|
|||||||
</LinkButton>
|
</LinkButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mx-4 flex flex-col">
|
<div class="flex flex-col">
|
||||||
{#if data.partners.length > 0}
|
{#if data.partners.length > 0}
|
||||||
<div class="mb-6 mt-2">
|
<div class="mb-6 mt-2">
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user