self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +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

33
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,16 +163,20 @@
<!-- 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)}
<Thumbnail <div animate:flip={{ duration: 300 }}>
{asset} <Thumbnail
{groupIndex} thumbnailWidth={clientWidth <= 768 ? clientWidth / 4 - 4 : undefined}
on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)} thumbnailHeight={clientWidth <= 768 ? clientWidth / 4 - 4 : undefined}
on:select={() => assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle)} {asset}
on:mouse-event={() => assetMouseEventHandler(dateGroupTitle)} {groupIndex}
selected={$selectedAssets.has(asset) || on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)}
$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1} on:select={() => assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle)}
disabled={$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1} on:mouse-event={() => assetMouseEventHandler(dateGroupTitle)}
/> selected={$selectedAssets.has(asset) ||
$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
disabled={$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
/>
</div>
{/each} {/each}
</div> </div>
</div> </div>