SHARE
TWEET

Grid View

a guest Jan 18th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <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'">
  2.     <div *ngFor="let cooperation of cooperations">
  3.       <mat-card style="margin-top:10px">
  4.         <div class="colorBar" [ngStyle]="{'background-color': cooperation.cooperationStatusColor}"></div>
  5.         <br>
  6.         <mat-card-header>
  7.           <div *ngIf="cooperation.property.logo && cooperation.property.filePath" mat-card-avatar class="headerImage"
  8.            [ngStyle]="{'background-image':'url('+cooperation.property.logo.filePath+')'}"></div>
  9.           <div *ngIf="!cooperation.property.logo || !cooperation.property.logo.filePath" mat-card-avatar class="headerImage"
  10.            style="background-image: url('../../assets/default.png')"></div>
  11.           <mat-card-title>
  12.             <h5 class="headerTitle">
  13.               {{cooperation.property.name}}
  14.             </h5>
  15.           </mat-card-title>
  16.         </mat-card-header>
  17.         <br>
  18.         <mat-card-content>
  19.           <div class="text-muted p-1">
  20.             <span>{{cooperation.property.location.address}}, {{cooperation.property.location.postalCode}},
  21.               {{cooperation.property.location.city}}</span>
  22.           </div>
  23.           <br>
  24.           <p>{{cooperation.property.description | slice:0:50}}
  25.             <span *ngIf="cooperation.property.description.length > 50">...</span>
  26.           </p>
  27.         </mat-card-content>
  28.         <mat-divider></mat-divider>
  29.         <mat-card-actions>
  30.           <button mat-button (click)="openDetailsDialog(cooperation)">
  31.             Details
  32.           </button>
  33.           <button mat-button *ngIf="cooperation.cooperationStatusCode=='APPROVED'" matTooltip="End the cooperation"
  34.            (click)="openCancelDialog(cooperation)" class="float-right">Cancel
  35.           </button>
  36.           <span class="float-right">
  37.             <button mat-button *ngIf="cooperation.cooperationStatusCode=='REQUESTED' && cooperation.issuedByEntity=='TRAVEL_AGENT'"
  38.              matTooltip="Approve the request for cooperation" (click)="openApproveDialog(cooperation)">Approve
  39.             </button>
  40.             <button mat-button *ngIf="cooperation.cooperationStatusCode=='REQUESTED' && cooperation.issuedByEntity=='TRAVEL_AGENT'"
  41.              matTooltip="Reject the request for cooperation" (click)="openRejectDialog(cooperation)">Reject
  42.             </button>
  43.           </span>
  44.         </mat-card-actions>
  45.       </mat-card>
  46.  
  47.     </div>
  48.   </div>
  49.  
  50. .active {
  51.     opacity: 1;
  52. }
  53.  
  54. .notActive {
  55.     opacity: 0.5;
  56. }
  57.  
  58. .headerImage {
  59.     background-size: cover;
  60.     transform: scale(2);
  61. }
  62.  
  63. .headerTitle {
  64.     margin: 5px 5px 5px 13px;
  65. }
  66.  
  67. .colorBar {
  68.     width: 100%;
  69.     height: 5px;
  70.     position: absolute;
  71.     right: 0px;
  72.     top: 0px;
  73. }
  74.  
  75. .grid-container {
  76.   display: grid;
  77.   width: 100%;
  78.   grid-template-columns: repeat(4, 1fr);
  79.   grid-gap: 1%;
  80. }
  81.  
  82.  @media(max-width: 1600px) {
  83.     .grid-container {
  84.         grid-template-columns: repeat(3, 1fr);
  85.     }
  86.   }
  87.  
  88.  @media(max-width: 1300px) {
  89.     .grid-container {
  90.         grid-template-columns: repeat(2, 1fr);
  91.     }
  92.  }
  93.  
  94.  @media(max-width: 1000px){
  95.     .grid-container {
  96.         grid-template-columns: repeat(1, 1fr);
  97.     }
  98.  }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top