self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-12 15:32:36 +02:00
Code Issues Releases Activity

feat(web): smaller thumbnails on timeline mobile (#2316)

Browse Source
This commit is contained in:
Alex 2023-04-22 21:13:15 -05:00 committed by GitHub
parent 787926c111
commit 57704522cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/lib/components/photos-page/asset-date-group.svelte
View File

@ -14,6 +14,7 @@
} from '$lib/stores/asset-interaction.store'; } from '$lib/stores/asset-interaction.store';
import { locale } from '$lib/stores/preferences.store'; import { locale } from '$lib/stores/preferences.store';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte'; import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
import { flip } from 'svelte/animate';
export let assets: AssetResponseDto[]; export let assets: AssetResponseDto[];
export let bucketDate: string; export let bucketDate: string;
@ -107,12 +108,17 @@
// Show multi select icon on hover on date group // Show multi select icon on hover on date group
hoveredDateGroup = dateGroupTitle; hoveredDateGroup = dateGroupTitle;
}; };
let clientWidth = 0;
</script> </script>
<!-- <svelte:window bind:innerWidth={clientWidth} /> -->
<section <section
id="asset-group-by-date" id="asset-group-by-date"
class="flex flex-wrap gap-12 mt-5" class="flex flex-wrap gap-12 mt-5"
bind:clientHeight={actualBucketHeight} bind:clientHeight={actualBucketHeight}
bind:clientWidth
> >
{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)} {#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
{@const dateGroupTitle = new Date(assetsInDateGroup[0].fileCreatedAt).toLocaleDateString( {@const dateGroupTitle = new Date(assetsInDateGroup[0].fileCreatedAt).toLocaleDateString(
@ -122,6 +128,7 @@
<!-- Asset Group By Date --> <!-- Asset Group By Date -->
<div <div
animate:flip={{ duration: 300 }}
class="flex flex-col" class="flex flex-col"
on:mouseenter={() => { on:mouseenter={() => {
isMouseOverGroup = true; isMouseOverGroup = true;
@ -131,7 +138,7 @@
> >
<!-- Date group title --> <!-- Date group title -->
<p <p
class="font-medium text-sm text-immich-fg dark:text-immich-dark-fg mb-2 flex place-items-center h-6" class="font-medium text-xs md:text-sm text-immich-fg dark:text-immich-dark-fg mb-2 flex place-items-center h-6"
> >
{#if (hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle)} {#if (hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle)}
<div <div
@ -156,7 +163,10 @@
<!-- Image grid --> <!-- Image grid -->
<div class="flex flex-wrap gap-[2px]"> <div class="flex flex-wrap gap-[2px]">
{#each assetsInDateGroup as asset (asset.id)} {#each assetsInDateGroup as asset (asset.id)}
<div animate:flip={{ duration: 300 }}>
<Thumbnail <Thumbnail
thumbnailWidth={clientWidth <= 768 ? clientWidth / 4 - 4 : undefined}
thumbnailHeight={clientWidth <= 768 ? clientWidth / 4 - 4 : undefined}
{asset} {asset}
{groupIndex} {groupIndex}
on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)} on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)}
@ -166,6 +176,7 @@
$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1} $assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
disabled={$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1} disabled={$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
/> />
</div>
{/each} {/each}
</div> </div>
</div> </div>