From 8b2f2c063c65278580d9469b00d9e67f01caaffb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <wulkanat@gmail.com>
Date: Tue, 25 Oct 2022 10:18:22 +0000
Subject: [PATCH] fix: profile module items show click effect on scroll

---
 .../modules/profile/page/profile-page-section.html |  7 ++++---
 .../modules/profile/page/profile-page-section.scss | 11 ++++++++++-
 src/app/util/element-size-change.directive.ts      | 14 +++++++++++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/app/modules/profile/page/profile-page-section.html b/src/app/modules/profile/page/profile-page-section.html
index 750ef797..9273de78 100644
--- a/src/app/modules/profile/page/profile-page-section.html
+++ b/src/app/modules/profile/page/profile-page-section.html
@@ -56,9 +56,10 @@
 <swiper
   #swiper
   (elementSizeChange)="resizeSwiper($event, swiper.swiperRef)"
-  (activeIndexChange)="activeIndexChange($event[0])"
-  [simulateTouch]="false"
-  [touchMoveStopPropagation]="false"
+  [elementSizeChangeDebounce]="100"
+  (toEdge)="activeIndexChange($event[0])"
+  (fromEdge)="activeIndexChange($event[0])"
+  [cssMode]="true"
   [spaceBetween]="0"
   [slidesPerView]="slidesPerView"
   class="card-swiper"
diff --git a/src/app/modules/profile/page/profile-page-section.scss b/src/app/modules/profile/page/profile-page-section.scss
index 101ddedc..b1ee35d7 100644
--- a/src/app/modules/profile/page/profile-page-section.scss
+++ b/src/app/modules/profile/page/profile-page-section.scss
@@ -28,6 +28,16 @@
   padding-inline: 0;
 }
 
+swiper {
+  //noinspection CssInvalidFunction
+  transform: translateY(calc(-1 * var(--spacing-sm)))
+}
+
+stapps-section-link-card {
+  // required spacing for box shadow
+  margin-block: var(--spacing-sm);
+}
+
 :host {
   display: grid;
   grid-template-columns: 1fr auto auto auto;
@@ -46,7 +56,6 @@
     width: 100%;
     padding-right: 0;
   }
-  margin-bottom: var(--spacing-md);
 }
 
 ion-button.hidden {
diff --git a/src/app/util/element-size-change.directive.ts b/src/app/util/element-size-change.directive.ts
index 594f46e2..1f2ff30f 100644
--- a/src/app/util/element-size-change.directive.ts
+++ b/src/app/util/element-size-change.directive.ts
@@ -17,6 +17,7 @@ import {
   Directive,
   ElementRef,
   EventEmitter,
+  Input,
   OnDestroy,
   OnInit,
   Output,
@@ -29,13 +30,24 @@ export class ElementSizeChangeDirective implements OnInit, OnDestroy {
   @Output()
   elementSizeChange = new EventEmitter<ResizeObserverEntry>();
 
+  @Input() elementSizeChangeDebounce?: number;
+
+  debounceStamp = 0;
+
   private resizeObserver: ResizeObserver;
 
   constructor(private elementRef: ElementRef) {}
 
   ngOnInit() {
     this.resizeObserver = new ResizeObserver(elements => {
-      if (!elements[0]) return;
+      const stamp = Date.now();
+      if (
+        !elements[0] ||
+        (this.elementSizeChangeDebounce &&
+          stamp - this.debounceStamp < this.elementSizeChangeDebounce)
+      )
+        return;
+      this.debounceStamp = stamp;
       this.elementSizeChange.emit(elements[0]);
     });
     this.resizeObserver.observe(this.elementRef.nativeElement);