Grid View

<div *ngIf="showGridView" class="grid-container" (scroll)="onGridScroll($event)" [ngClass]="initialized && cooperations.length > 0 ? 'full-page-flex-item table-scroll-container mat-elevation-z8' : 'd-none'">
    <div *ngFor="let cooperation of cooperations">
      <mat-card style="margin-top:10px">
        <div class="colorBar" [ngStyle]="{'background-color': cooperation.cooperationStatusColor}"></div>
        <br>
        <mat-card-header>
          <div *ngIf="cooperation.property.logo && cooperation.property.filePath" mat-card-avatar class="headerImage"
            [ngStyle]="{'background-image':'url('+cooperation.property.logo.filePath+')'}"></div>
          <div *ngIf="!cooperation.property.logo || !cooperation.property.logo.filePath" mat-card-avatar class="headerImage"
            style="background-image: url('../../assets/default.png')"></div>
          <mat-card-title>
            <h5 class="headerTitle">
              {{cooperation.property.name}}
            </h5>
          </mat-card-title>
        </mat-card-header>
        <br>
        <mat-card-content>
          <div class="text-muted p-1">
            <span>{{cooperation.property.location.address}}, {{cooperation.property.location.postalCode}},
              {{cooperation.property.location.city}}</span>
          </div>
          <br>
          <p>{{cooperation.property.description | slice:0:50}}
            <span *ngIf="cooperation.property.description.length > 50">...</span>
          </p>
        </mat-card-content>
        <mat-divider></mat-divider>
        <mat-card-actions>
          <button mat-button (click)="openDetailsDialog(cooperation)">
            Details
          </button>
          <button mat-button *ngIf="cooperation.cooperationStatusCode=='APPROVED'" matTooltip="End the cooperation"
            (click)="openCancelDialog(cooperation)" class="float-right">Cancel
          </button>
          <span class="float-right">
            <button mat-button *ngIf="cooperation.cooperationStatusCode=='REQUESTED' && cooperation.issuedByEntity=='TRAVEL_AGENT'"
              matTooltip="Approve the request for cooperation" (click)="openApproveDialog(cooperation)">Approve
            </button>
            <button mat-button *ngIf="cooperation.cooperationStatusCode=='REQUESTED' && cooperation.issuedByEntity=='TRAVEL_AGENT'"
              matTooltip="Reject the request for cooperation" (click)="openRejectDialog(cooperation)">Reject
            </button>
          </span>
        </mat-card-actions>
      </mat-card>

    </div>
  </div>

.active {
    opacity: 1;
}

.notActive {
    opacity: 0.5;
}

.headerImage {
    background-size: cover;
    transform: scale(2);
}

.headerTitle {
    margin: 5px 5px 5px 13px;
}

.colorBar {
    width: 100%;
    height: 5px;
    position: absolute;
    right: 0px;
    top: 0px;
}

.grid-container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1%;
}

 @media(max-width: 1600px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
  }

 @media(max-width: 1300px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
 }

 @media(max-width: 1000px){
    .grid-container {
        grid-template-columns: repeat(1, 1fr);
    }
 }