diff --git a/apps/website/src/routes/(site)/photos/+page.svelte b/apps/website/src/routes/(site)/photos/+page.svelte index 95d119f..9621519 100644 --- a/apps/website/src/routes/(site)/photos/+page.svelte +++ b/apps/website/src/routes/(site)/photos/+page.svelte @@ -39,19 +39,11 @@ dayjs.extend(relativeTime) - let photosContentEl: HTMLElement let photosGridEl: HTMLElement let observerPhotos: IntersectionObserver let mutationPhotos: MutationObserver let scrollY: number let innerWidth: number, innerHeight: number - // Filters related - let scrollDirection = 0 - let lastScrollTop = 0 - let scrolledPastIntro: boolean - let filtersOver: boolean - let filtersVisible: boolean - let filtersTransitioning: boolean /** @@ -222,37 +214,6 @@ } - /** - * Scroll detection when entering content - */ - $: if (scrollY) { - // Detect scroll direction - throttle(() => { - scrollDirection = scrollY > lastScrollTop ? 1 : -1 - lastScrollTop = scrollY - - // Show filters bar when scrolling back up - filtersVisible = scrollDirection < 0 - - // Scrolled past grid of photos - if (scrollY > photosContentEl.offsetTop) { - if (!scrolledPastIntro) { - filtersOver = true - // Hacky: Set filters as transitioning after a little delay to avoid an transition jump - setTimeout(() => filtersTransitioning = true, 30) - } - scrolledPastIntro = true - } else { - if (scrolledPastIntro) { - filtersOver = false - filtersTransitioning = false - } - scrolledPastIntro = false - } - }, 200)() - } - - onMount(() => { /** * Observers @@ -336,20 +297,14 @@
-
+
-
+
Filter photos
    @@ -425,7 +380,7 @@
-
+
{#if photos}
diff --git a/apps/website/src/style/pages/_photos.scss b/apps/website/src/style/pages/_photos.scss index e77ae28..846de15 100644 --- a/apps/website/src/style/pages/_photos.scss +++ b/apps/website/src/style/pages/_photos.scss @@ -27,13 +27,6 @@ max-width: 524px; } } - - // Passed scroll - &.is-passed { - @include bp (sm) { - padding-bottom: 72px; - } - } } // Content Block @@ -394,26 +387,6 @@ /* ** States */ - // Fixed when scrolled pass intro - &.is-over { - --top: 24px; - transform: translate3d(0, calc(-100% - var(--top)), 0); - pointer-events: none; - - .filters__bar { - pointer-events: auto; - box-shadow: 0 10px 20px rgba(#000, 0.1); - } - - @include bp (sm) { - position: fixed; - z-index: 10; - top: var(--top); - left: 0; - right: 0; - } - } - // Visible when scrolling back up &.is-visible { transform: translate3d(0,0,0);