From f661bc23e5e4b3e6ed2d65591c79359531af495d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 31 Oct 2023 12:59:42 +0100
Subject: [PATCH] fix: disable sticky state for Photo filters (temp)

it just doesn't really work anymore hey, needs a further research (duplicate it? as a component?)
---
 .../src/routes/(site)/photos/+page.svelte     | 51 ++-----------------
 apps/website/src/style/pages/_photos.scss     | 27 ----------
 2 files changed, 3 insertions(+), 75 deletions(-)

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 @@
 
 
 <main class="photos-page">
-    <section class="photos-page__intro"
-        class:is-passed={scrolledPastIntro}
-    >
+    <section class="photos-page__intro">
         <ScrollingTitle tag="h1" text="Houses">
             <SplitText text="Houses" mode="chars" />
         </ScrollingTitle>
 
         <DiscoverText />
 
-        <div class="filters"
-            class:is-over={filtersOver}
-            class:is-transitioning={filtersTransitioning}
-            class:is-visible={filtersVisible}
-        >
+        <div class="filters">
             <div class="filters__bar">
                 <span class="text-label filters__label">Filter photos</span>
                 <ul>
@@ -425,7 +380,7 @@
         </div>
     </section>
 
-    <section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px">
+    <section class="photos-page__content" style:--margin-sides="{sideMargins}px">
         <div class="grid container">
             {#if photos}
                 <div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll>
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);