|
|
|
@ -2,13 +2,13 @@
|
|
|
|
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
|
|
|
|
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
|
|
|
|
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
|
|
|
|
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
|
|
|
|
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
|
|
|
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
|
|
|
import { AppRoute } from '$lib/constants';
|
|
|
|
import {AppRoute} from '$lib/constants';
|
|
|
|
import { AssetTypeEnum, SearchExploreResponseDto, api } from '@api';
|
|
|
|
import {AssetTypeEnum, SearchExploreResponseDto, api} from '@api';
|
|
|
|
import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
|
|
|
|
import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
|
|
|
|
import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
|
|
|
|
import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
|
|
|
|
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
|
|
|
|
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
|
|
|
|
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
|
|
|
|
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
|
|
|
|
import type { PageData } from './$types';
|
|
|
|
import type {PageData} from './$types';
|
|
|
|
|
|
|
|
|
|
|
|
export let data: PageData;
|
|
|
|
export let data: PageData;
|
|
|
|
|
|
|
|
|
|
|
|
@ -71,7 +71,7 @@
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] flex justify-center"
|
|
|
|
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 />
|
|
|
|
<Thumbnail thumbnailSize={156} asset={item.data} readonly/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<span
|
|
|
|
<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]"
|
|
|
|
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]"
|
|
|
|
@ -95,7 +95,7 @@
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center flex"
|
|
|
|
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 />
|
|
|
|
<Thumbnail thumbnailSize={156} asset={item.data} readonly/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<span
|
|
|
|
<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]"
|
|
|
|
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]"
|
|
|
|
@ -108,7 +108,7 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
<hr class="dark:border-immich-dark-gray mb-4" />
|
|
|
|
<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="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">
|
|
|
|
<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
|
|
|
|
@ -119,7 +119,7 @@
|
|
|
|
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
|
|
|
|
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
|
|
|
|
draggable="false"
|
|
|
|
draggable="false"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<HeartMultipleOutline size={24} />
|
|
|
|
<HeartMultipleOutline size={24}/>
|
|
|
|
<span>Favorites</span>
|
|
|
|
<span>Favorites</span>
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
<a
|
|
|
|
@ -127,7 +127,7 @@
|
|
|
|
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
|
|
|
|
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
|
|
|
|
draggable="false"
|
|
|
|
draggable="false"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<ClockOutline size={24} />
|
|
|
|
<ClockOutline size={24}/>
|
|
|
|
<span>Recently added</span>
|
|
|
|
<span>Recently added</span>
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -139,7 +139,7 @@
|
|
|
|
href="/search?type={AssetTypeEnum.Video}"
|
|
|
|
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"
|
|
|
|
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} />
|
|
|
|
<PlayCircleOutline size={24}/>
|
|
|
|
<span>Videos</span>
|
|
|
|
<span>Videos</span>
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
@ -147,7 +147,7 @@
|
|
|
|
href="/search?motion=true"
|
|
|
|
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"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<MotionPlayOutline size={24} />
|
|
|
|
<MotionPlayOutline size={24}/>
|
|
|
|
<span>Motion photos</span>
|
|
|
|
<span>Motion photos</span>
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|