c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

chore(web): remove thumbnail usage for places card (#10142)

Browse source 
* chore(web): remove thumbnail usage for places

* remove href attribute from Thumbnail

* linting
This commit is contained in:
Alex 2024-06-12 06:12:58 -05:00 committed by GitHub
parent e84657192c
commit 476eea44df
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View file

@ -40,7 +40,6 @@
export let readonly = false;
export let showArchiveIcon = false;
export let showStackedIcon = true;
export let href: string | undefined = undefined;
export let onClick: ((asset: AssetResponseDto, event: Event) => void) | undefined = undefined;
let className = '';
@ -94,7 +93,7 @@
<IntersectionObserver once={false} on:intersected let:intersecting>
<a
href={href ?? currentUrlReplaceAssetId(asset.id)}
href={currentUrlReplaceAssetId(asset.id)}
style:width="{width}px"
style:height="{height}px"
class="group focus-visible:outline-none flex overflow-hidden {disabled

18
web/src/routes/(user)/explore/+page.svelte
View file

@ -1,10 +1,9 @@
<script lang="ts">
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import { AppRoute } from '$lib/constants';
import { getPeopleThumbnailUrl } from '$lib/utils';
import type { SearchExploreResponseDto } from '@immich/sdk';
import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
import { AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
import type { PageData } from './$types';
import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
import { t } from 'svelte-i18n';
@ -86,15 +85,14 @@
</div>
<div class="flex flex-row flex-wrap gap-4">
{#each places as item (item.data.id)}
<div class="relative">
<a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}" draggable="false">
<div
class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
>
<Thumbnail
thumbnailSize={156}
asset={item.data}
readonly
href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}"
<img
src={getAssetThumbnailUrl({ id: item.data.id, size: AssetMediaSize.Thumbnail })}
alt={item.value}
class="object-cover w-[156px] h-[156px]"
/>
</div>
<span
@ -102,7 +100,7 @@
>
{item.value}
</span>
</div>
</a>
{/each}
</div>
</div>

10
web/src/routes/(user)/places/+page.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import { AppRoute } from '$lib/constants';
import { mdiMapMarkerOff } from '@mdi/js';
import type { PageData } from './$types';
import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
import type { AssetResponseDto } from '@immich/sdk';
import { AssetMediaSize, type AssetResponseDto } from '@immich/sdk';
import { t } from 'svelte-i18n';
import { getAssetThumbnailUrl } from '$lib/utils';
export let data: PageData;
@ -34,7 +34,11 @@
<div
class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
>
<Thumbnail thumbnailSize={156} asset={item} readonly />
<img
src={getAssetThumbnailUrl({ id: item.id, size: AssetMediaSize.Thumbnail })}
alt={city}
class="object-cover w-[156px] h-[156px]"
/>
</div>
<span
class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"