tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-03 19:29:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): Timeline narrow date groups style (#2713)

Browse Source 
* Truncate date group title

* Precalculate justified layout width

* Add title to date group title to show when truncated

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Sergey Kondrikov 2023-06-10 21:13:06 +03:00 committed by GitHub
parent 9cdec62918
commit 053a0482b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View File

@ -66,7 +66,7 @@
<div <div
style:width="{width}px" style:width="{width}px"
style:height="{height}px" style:height="{height}px"
class="relative group {disabled class="relative group overflow-hidden {disabled
? 'bg-gray-300' ? 'bg-gray-300'
: 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}" : 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
class:cursor-not-allowed={disabled} class:cursor-not-allowed={disabled}

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

@ -52,15 +52,17 @@
$: geometry = (() => { $: geometry = (() => {
const geometry = []; const geometry = [];
for (let group of assetsGroupByDate) { for (let group of assetsGroupByDate) {
geometry.push( const justifiedLayoutResult = justifiedLayout(group.map(getAssetRatio), {
justifiedLayout(group.map(getAssetRatio), { boxSpacing: 2,
boxSpacing: 2, containerWidth: Math.floor(viewportWidth),
containerWidth: Math.floor(viewportWidth), containerPadding: 0,
containerPadding: 0, targetRowHeightTolerance: 0.15,
targetRowHeightTolerance: 0.15, targetRowHeight: 235
targetRowHeight: 235 });
}) geometry.push({
); ...justifiedLayoutResult,
containerWidth: calculateWidth(justifiedLayoutResult.boxes)
});
} }
return geometry; return geometry;
})(); })();
@ -182,6 +184,7 @@
<!-- Date group title --> <!-- Date group title -->
<p <p
class="font-medium text-xs md: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"
style="width: {geometry[groupIndex].containerWidth}px"
> >
{#if (hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle)} {#if (hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle)}
<div <div
@ -198,7 +201,7 @@
</div> </div>
{/if} {/if}
<span> <span class="truncate" title={dateGroupTitle}>
{dateGroupTitle} {dateGroupTitle}
</span> </span>
</p> </p>
@ -206,9 +209,8 @@
<!-- Image grid --> <!-- Image grid -->
<div <div
class="relative" class="relative"
style="height: {geometry[groupIndex].containerHeight}px;width: {calculateWidth( style="height: {geometry[groupIndex].containerHeight}px;width: {geometry[groupIndex]
geometry[groupIndex].boxes .containerWidth}px"
)}px"
> >
{#each assetsInDateGroup as asset, index (asset.id)} {#each assetsInDateGroup as asset, index (asset.id)}
{@const box = geometry[groupIndex].boxes[index]} {@const box = geometry[groupIndex].boxes[index]}