From 5ad76cfa2469586180268b7954ebac5037493144 Mon Sep 17 00:00:00 2001
From: Vitor Hideyoshi <vitor.h.n.batista@gmail.com>
Date: Wed, 8 Nov 2023 19:06:55 -0300
Subject: [PATCH] Implements Responsiveness in Stack Slider

---
 .../stack-slider/stack-slider.component.ts    | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/app/home/stack-slider/stack-slider.component.ts b/src/app/home/stack-slider/stack-slider.component.ts
index 502cfb0..527ba34 100644
--- a/src/app/home/stack-slider/stack-slider.component.ts
+++ b/src/app/home/stack-slider/stack-slider.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, ChangeDetectorRef, Component, ViewChild} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, HostListener, ViewChild} from '@angular/core';
 import {NgxGlideComponent} from "ngx-glide";
 import {Stack} from "../../shared/model/stack/stack.model";
 
@@ -47,18 +47,27 @@ export class StackSliderComponent implements AfterViewInit {
 
     constructor(private cd: ChangeDetectorRef) { }
 
+    @HostListener('window:resize', ['$event'])
+    onResize(event: any) {
+        const numberOfCards = this.getNumberOfCards(event.target.innerWidth);
+        this.buildCarousel(numberOfCards);
+    }
+
     ngAfterViewInit(): void {
-        if (this.ngxGlide)
-            this.buildCarousel();
+        if (this.ngxGlide) {
+            const numberOfCards = this.getNumberOfCards(window.innerWidth);
+            this.buildCarousel(numberOfCards);
+        }
 
         this.cd.detectChanges();
     }
 
-    buildCarousel(): void {
+    buildCarousel(numberOfCards: number): void {
+        this.ngxGlide.perView = numberOfCards;
+
         this.ngxGlide.showArrows = false;
         this.ngxGlide.showBullets = false;
         this.ngxGlide.type = 'carousel';
-        this.ngxGlide.perView = 5;
         this.ngxGlide.focusAt = 'center';
         this.ngxGlide.gap = 10;
         this.ngxGlide.autoplay = 3000;
@@ -73,4 +82,18 @@ export class StackSliderComponent implements AfterViewInit {
     isInFocus(stack: Stack): boolean {
         return this.stacks.indexOf(stack) === this.currentIndex;
     }
+
+    private getNumberOfCards(windowWidth: number): number {
+        if (windowWidth <= 412) {
+            return 1;
+        } else if (windowWidth <= 768) {
+            return 2;
+        } else if (windowWidth <= 975) {
+            return 3;
+        } else if (windowWidth <= 1440) {
+            return 4;
+        } else {
+            return 5;
+        }
+    }
 }