fix(demo): display just 1 item on mobile

Because there is not enough space for more.
daelmaak · Sep 5, 2023 · ed793f9 · ed793f9
1 parent 84b05d0
commit ed793f9
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
@@ -73,7 +73,10 @@ <h2 id="demos">Demos</h2>
           >documentation.</a
         >
       </div>
-      <app-demo-custom-templates [mobile]="mobile"></app-demo-custom-templates>
+      <app-demo-custom-templates
+        [mobile]="mobile"
+        [tablet]="tablet"
+      ></app-demo-custom-templates>
     </app-showcase>
 
     <app-showcase id="demo-rtl" heading="Right to left">

diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
@@ -131,17 +131,25 @@ export class AppComponent implements OnInit {
   ];
 
   mobile: boolean;
+  tablet: boolean;
 
   constructor(private cd: ChangeDetectorRef) {}
 
   ngOnInit(): void {
-    const mediaMatcher = matchMedia('(max-width: 1024px)');
+    const mobileMatcher = matchMedia('(max-width: 768px)');
+    const tabletMatcher = matchMedia('(max-width: 1024px)');
 
-    mediaMatcher.onchange = e => {
+    mobileMatcher.onchange = e => {
       this.mobile = e.matches;
       this.cd.detectChanges();
     };
 
-    this.mobile = mediaMatcher.matches;
+    tabletMatcher.onchange = e => {
+      this.tablet = e.matches;
+      this.cd.detectChanges();
+    };
+
+    this.mobile = mobileMatcher.matches;
+    this.tablet = tabletMatcher.matches;
   }
 }
diff --git a/apps/demo/src/app/components/demo-custom-templates/demo-custom-templates.component.html b/apps/demo/src/app/components/demo-custom-templates/demo-custom-templates.component.html
@@ -1,8 +1,8 @@
 <gallery
   [items]="images"
   [itemTemplate]="customItem"
-  [visibleItems]="mobile ? 2 : 3"
-  [moveByItems]="mobile ? 2 : 3"
+  [visibleItems]="mobile ? 1 : tablet ? 2 : 3"
+  [moveByItems]="mobile ? 1 : tablet ? 2 : 3"
   [clip]="false"
   [counter]="false"
   [arrowTemplate]="customArrow"

diff --git a/apps/demo/src/app/components/demo-custom-templates/demo-custom-templates.component.ts b/apps/demo/src/app/components/demo-custom-templates/demo-custom-templates.component.ts
@@ -9,6 +9,7 @@ import { GalleryItem } from '@daelmaak/ngx-gallery';
 })
 export class DemoCustomTemplatesComponent {
   @Input() mobile: boolean;
+  @Input() tablet: boolean;
 
   images: GalleryItem[] = [
     {