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

feat(web): add sticky date headers for asset-date-group (#7824)

Browse source 
* feat(web): add sticky date headers for asset-date-group

* use existing classes
This commit is contained in:
Sam Holton 2024-03-10 15:32:05 -04:00 committed by GitHub
parent 60c521101a
commit d257cdcbbf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/src/lib/components/photos-page/asset-date-group.svelte
View file

@ -127,7 +127,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="mt-5 flex flex-col" class="flex flex-col"
on:mouseenter={() => { on:mouseenter={() => {
isMouseOverGroup = true; isMouseOverGroup = true;
assetMouseEventHandler(groupTitle, null); assetMouseEventHandler(groupTitle, null);
@ -138,8 +138,8 @@
}} }}
> >
<!-- Date group title --> <!-- Date group title -->
<p <div
class="mb-2 flex h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm" class="flex z-[100] sticky top-0 pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg md:text-sm"
style="width: {geometry[groupIndex].containerWidth}px" style="width: {geometry[groupIndex].containerWidth}px"
> >
{#if !singleSelect && ((hoveredDateGroup == groupTitle && isMouseOverGroup) || $selectedGroup.has(groupTitle))} {#if !singleSelect && ((hoveredDateGroup == groupTitle && isMouseOverGroup) || $selectedGroup.has(groupTitle))}
@ -160,7 +160,7 @@
<span class="truncate first-letter:capitalize" title={groupTitle}> <span class="truncate first-letter:capitalize" title={groupTitle}>
{groupTitle} {groupTitle}
</span> </span>
</p> </div>
<!-- Image grid --> <!-- Image grid -->
<div <div