fix: sticky header on mobile

farscrl · Dec 8, 2023 · e114f2c · e114f2c
1 parent 314990d
commit e114f2c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/app/components/events/events-list/events-list-cards/events-list-cards.component.scss b/src/app/components/events/events-list/events-list-cards/events-list-cards.component.scss
@@ -87,15 +87,16 @@
         }
     }
 
+    &.touchesTop:not(.first) {
+        border-top: none;
+    }
+
     @include media-breakpoint-up(md) {
         h2 {
             font-size: 1.5rem;
             margin: 1rem 2rem;
         }
 
-        &.touchesTop:not(.first) {
-            border-top: none;
-        }
         &.isOnTop {
             border-top: none;
         }
@@ -114,8 +115,9 @@
 }
 
 ul {
-    padding: 0 1rem;
     list-style: none;
+    margin-bottom: 0;
+    padding: 0 1rem 1rem;;
 
     @include media-breakpoint-up(md) {
         padding: 2rem;

diff --git a/src/app/shared/directives/scrollable-title.directive.ts b/src/app/shared/directives/scrollable-title.directive.ts
@@ -30,14 +30,20 @@ export class ScrollableTitleDirective implements OnInit, OnDestroy {
 
     private _checkScroll() {
         if (isPlatformBrowser(this.platformId)) {
+            const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
             const {
                 top: t,
             } = this.el.nativeElement.getBoundingClientRect();
             const {
                 scrollX,
             } = window
             const topPos = t + scrollX
-            this.touchesTop = topPos <= 75;
+
+            if (width < 768) {
+                this.touchesTop = topPos <= 54;
+            } else {
+                this.touchesTop = topPos <= 75;
+            }
             this.isOnTop = topPos < 1;
             this.startsHiding = topPos < 0;
         }