Update the dashboard-tile component to use the checkMobile service to…

… detect the orientation

src/app/dashboard/dashboard-tile-accordion-layout.component.html

@@ -1,5 +1,5 @@
 <mat-accordion>
- <mat-expansion-panel (opened)="showAccordion = true" (closed)="showAccordion = false">
+ <mat-expansion-panel (opened)="isMobile = true" (closed)="isMobile = false">
  <mat-expansion-panel-header class="accent-color">
  <mat-panel-title class="accent-color">
  <planet-dashboard-left-tile [cardTitle]="cardTitle" [cardType]="cardType" [link]="link" [emptyLink]="emptyLink">
@@ -10,4 +10,4 @@
  (droppedEvent)="drop($event)" (removeEvent)="removeFromShelf($event)">
  </planet-dashboard-right-tile>
  </mat-expansion-panel>
-</mat-accordion>
+</mat-accordion>

src/app/dashboard/dashboard-tile.component.html

@@ -1,8 +1,8 @@
 <mat-card class="dashboard-card">
  <planet-dashboard-row-layout [cardTitle]="cardTitle" [cardType]="cardType" [link]="link" [emptyLink]="emptyLink" [itemData]="itemData"
- (droppedEvent)="drop($event)" (removeEvent)="removeFromShelf($event)" *ngIf="!showAccordion">
+ (droppedEvent)="drop($event)" (removeEvent)="removeFromShelf($event)" *ngIf="!isMobile">
  </planet-dashboard-row-layout>
  <planet-dashboard-accordion-layout [cardTitle]="cardTitle" [cardType]="cardType" [link]="link" [emptyLink]="emptyLink" [itemData]="itemData"
- (droppedEvent)="drop($event)" (removeEvent)="removeFromShelf($event)" *ngIf="showAccordion">
+ (droppedEvent)="drop($event)" (removeEvent)="removeFromShelf($event)" *ngIf="isMobile">
  </planet-dashboard-accordion-layout>
 </mat-card>

src/app/dashboard/dashboard-tile.component.ts

@@ -1,19 +1,20 @@
-import { Component, Input, ElementRef, ViewChild, Output, EventEmitter, AfterViewChecked, ChangeDetectorRef, HostListener, OnInit } from '@angular/core';
+import { Component, Input, ElementRef, ViewChild, Output, EventEmitter, AfterViewChecked, ChangeDetectorRef, HostListener } from '@angular/core';
 import { elementAt, tap } from 'rxjs/operators';
 import { PlanetMessageService } from '../shared/planet-message.service';
 import { UserService } from '../shared/user.service';
 import { TeamsService } from '../teams/teams.service';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { DialogsPromptComponent } from '../shared/dialogs/dialogs-prompt.component';
+import { CheckMobileService } from '../shared/checkMobile.service';
 
 // Main page once logged in. At this stage is more of a placeholder.
 @Component({
  selector: 'planet-dashboard-tile',
  templateUrl: './dashboard-tile.component.html',
  styleUrls: [ './dashboard-tile.scss' ]
 })
-export class DashboardTileComponent implements OnInit {
+export class DashboardTileComponent {
  @Input() cardTitle: string;
  @Input() cardType: string;
  @Input() color: string;
@@ -25,14 +26,14 @@ export class DashboardTileComponent implements OnInit {
  // @ViewChild('items') itemDiv: ElementRef;
  dialogPrompt: MatDialogRef<DialogsPromptComponent>;
  // tileLines = 2;
- screenWidth: number;
- showAccordion: boolean;
+ isMobile: boolean = this.checkMobileService.checkIsMobile();
 
  constructor(
  private planetMessageService: PlanetMessageService,
  private userService: UserService,
  private teamsService: TeamsService,
  private dialog: MatDialog,
+ private checkMobileService: CheckMobileService
  // private cd: ChangeDetectorRef
  ) { }
 
@@ -50,11 +51,6 @@ export class DashboardTileComponent implements OnInit {
  // }
  // }
 
- ngOnInit(): void {
- this.screenWidth = window.innerWidth;
- this.setAccordion();
- }
-
  removeFromShelf({ event, item }) {
  event.stopPropagation();
  const { _id: userId, planetCode: userPlanetCode } = this.userService.get();
@@ -102,13 +98,9 @@ export class DashboardTileComponent implements OnInit {
  );
  }
 
- setAccordion() {
- this.screenWidth <= 600 ? this.showAccordion = true : this.showAccordion = false;
- }
-
  @HostListener('window:resize') onResize() {
- this.screenWidth = window.innerWidth;
- this.setAccordion();
+ this.isMobile = this.checkMobileService.checkIsMobile();
+ console.log(this.isMobile);
  }
 }
 
@@ -159,7 +151,7 @@ export class DashboardTileRowLayoutComponent {
 })
 export class DashboardTileAccordionLayoutComponent {
 
- @Input() showAccordion;
+ @Input() isMobile;
  @Input() cardTitle;
  @Input() cardType;
  @Input() link;