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 readonly = false;
export let showArchiveIcon = false; export let showArchiveIcon = false;
export let showStackedIcon = true; export let showStackedIcon = true;
export let href: string | undefined = undefined;
export let onClick: ((asset: AssetResponseDto, event: Event) => void) | undefined = undefined; export let onClick: ((asset: AssetResponseDto, event: Event) => void) | undefined = undefined;
let className = ''; let className = '';
@ -94,7 +93,7 @@
<IntersectionObserver once={false} on:intersected let:intersecting> <IntersectionObserver once={false} on:intersected let:intersecting>
<a <a
href={href ?? currentUrlReplaceAssetId(asset.id)} href={currentUrlReplaceAssetId(asset.id)}
style:width="{width}px" style:width="{width}px"
style:height="{height}px" style:height="{height}px"
class="group focus-visible:outline-none flex overflow-hidden {disabled 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"> <script lang="ts">
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 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 { getPeopleThumbnailUrl } from '$lib/utils'; import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
import type { SearchExploreResponseDto } from '@immich/sdk'; import { AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
import type { PageData } from './$types'; import type { PageData } from './$types';
import { getMetadataSearchQuery } from '$lib/utils/metadata-search'; import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -86,15 +85,14 @@
</div> </div>
<div class="flex flex-row flex-wrap gap-4"> <div class="flex flex-row flex-wrap gap-4">
{#each places as item (item.data.id)} {#each places as item (item.data.id)}
<div class="relative"> <a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}" draggable="false">
<div <div
class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter" class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
> >
<Thumbnail <img
thumbnailSize={156} src={getAssetThumbnailUrl({ id: item.data.id, size: AssetMediaSize.Thumbnail })}
asset={item.data} alt={item.value}
readonly class="object-cover w-[156px] h-[156px]"
href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}"
/> />
</div> </div>
<span <span
@ -102,7 +100,7 @@
> >
{item.value} {item.value}
</span> </span>
</div> </a>
{/each} {/each}
</div> </div>
</div> </div>

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

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.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 { mdiMapMarkerOff } from '@mdi/js'; import { mdiMapMarkerOff } from '@mdi/js';
import type { PageData } from './$types'; import type { PageData } from './$types';
import { getMetadataSearchQuery } from '$lib/utils/metadata-search'; 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 { t } from 'svelte-i18n';
import { getAssetThumbnailUrl } from '$lib/utils';
export let data: PageData; export let data: PageData;
@ -34,7 +34,11 @@
<div <div
class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter" 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> </div>
<span <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" 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"