feat(web): Memory (#2759)

* Add on this day

* add query for x year

* dev: add query

* dev: front end

* dev: styling

* styling

* more styling

* add new page

* navigating

* navigate back and forth

* styling

* show gallery

* fix test

* fix test

* show previous and next title

* fix test

* show up down scrolling button

* more styling

* styling

* fix app bar

* fix height of next/previous

* autoplay

* auto play

* refactor

* refactor

* refactor

* show date

* Navigate

* finish

* pr feedback
This commit is contained in:
Alex 2023-06-14 20:47:18 -05:00 committed by GitHub
parent 408fa45c51
commit 43ec0b77a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 1033 additions and 10 deletions

View file

@ -9,6 +9,7 @@
export let showBackButton = true;
export let backIcon = Close;
export let tailwindClasses = '';
export let forceDark = false;
let appBarBorder = 'bg-immich-bg border border-transparent';
@ -17,6 +18,10 @@
const onScroll = () => {
if (window.pageYOffset > 80) {
appBarBorder = 'border border-gray-200 bg-gray-50 dark:border-gray-600';
if (forceDark) {
appBarBorder = 'border border-gray-600';
}
} else {
appBarBorder = 'bg-immich-bg border border-transparent';
}
@ -38,9 +43,11 @@
<div in:fly={{ y: 10, duration: 200 }} class="fixed top-0 w-full bg-transparent z-[100]">
<div
id="asset-selection-app-bar"
class={`flex justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center ${tailwindClasses} dark:bg-immich-dark-gray`}
class={`grid grid-cols-3 justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center ${tailwindClasses} dark:bg-immich-dark-gray ${
forceDark && 'bg-immich-dark-gray text-white'
}`}
>
<div class="flex place-items-center gap-6 dark:text-immich-dark-fg">
<div class="flex place-items-center gap-6 dark:text-immich-dark-fg justify-self-start">
{#if showBackButton}
<CircleIconButton
on:click={() => dispatch('close-button-click')}
@ -48,14 +55,17 @@
backgroundColor={'transparent'}
hoverColor={'#e2e7e9'}
size={'24'}
forceDark
/>
{/if}
<slot name="leading" />
</div>
<slot />
<div class="w-full">
<slot />
</div>
<div class="flex place-items-center gap-1 mr-4">
<div class="flex place-items-center gap-1 mr-4 justify-self-end">
<slot name="trailing" />
</div>
</div>