You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mohemmionic5/Mohem/src/app/backend-integrations/announcement/announcement.component.html

90 lines
4.8 KiB
HTML

<app-generic-header
showBack="true"
[headerText]="'login,announcement' | translate">
</app-generic-header>
<ion-content style="--background:#F4F4F4;">
<ion-searchbar mode='md' (ionInput)="filterList($event)" style="--background: white; margin-top: 10px; padding-bottom: 20px;"></ion-searchbar>
<ion-list style="background: #f4f4f4; margin-top: -8px !important;">
<div *ngFor="let item of announcementList; let i = index"
[ngClass]="i>0 && !item.Open ? 'class-dev-close': 'class-dev-open'"
style="margin: 15px; background: white; border-radius: 10px;">
<!-- <ion-card *ngIf="i === 0 && !item.isOpen" (click)="toggleAnnouncement(item)" class="main-card-style">
<img [src]="item.img" class="main-card-image">
<ion-item class="main-card-item-list-style">
<ion-label class="main-card-label-style-all">
<p class="text-style item-list-first-date">{{item.date}}</p>
<h2 class="text-style item-list-first-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2>
<h2 class="text-style item-list-first-h" *ngIf="direction === 'ar'">{{item.title_AR}}</h2>
</ion-label>
</ion-item>
</ion-card>
<ion-card *ngIf="i === 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px; background: white;">
<ion-card-header style="background: transparent;">
<ion-card-title *ngIf="direction === 'en'"><h2 class="card-style-h">{{item.title_EN}}</h2><br>
<p class="card-style-date">{{item.date}}</p>
</ion-card-title>
<ion-card-title *ngIf="direction === 'ar'" class="card-style-h">{{item.title_AR}} <br>
<p class="card-style-date">{{item.date}}</p>
</ion-card-title>
<img [src]="item.img" class="image-center">
</ion-card-header>
<ion-card-content>
<p *ngIf="direction === 'en'" class="card-style-p"><span [innerHTML]="item.body_EN"></span></p>
<p *ngIf="direction === 'ar'" class="card-style-p">{{item.body_AR}}</p>
</ion-card-content>
</ion-card> -->
<ion-item no-padding *ngIf="!item.isOpen && item.img" (click)="toggleAnnouncement(item)" lines='none' class="announcement-items">
<img [src]="item.img" [ngClass]="direction === 'en'? 'image-item-en': 'image-item-ar' ">
<ion-label style="margin: 5px; margin-top: -20px;">
<h2 class="item-list-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2>
<!-- <p class="item-list-p-title" *ngIf="direction === 'en'"><span [innerHTML]="item.body_EN"></span></p> -->
<h2 class="item-list-h" *ngIf="direction === 'ar'">{{item.title_AR}}</h2>
<!-- <p class="item-list-p-title" *ngIf="direction === 'ar'">{{item.body_AR}}</p> -->
<p class="item-list-date-title">{{item.date}}</p>
</ion-label>
</ion-item>
<ion-item *ngIf="!item.isOpen && !item.img" (click)="toggleAnnouncement(item)" lines='none' class="announcement-items">
<ion-label style="margin: 10px;">
<h2 class="item-list-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2>
<p class="item-list-p-title" *ngIf="direction === 'en'"><span [innerHTML]="item.body_EN"></span></p>
<h2 class="item-list-h" *ngIf="direction === 'ar'">{{item.title_AR}}</h2>
<p class="item-list-p-title" *ngIf="direction === 'ar'"><span [innerHTML]="item.body_AR"></span></p>
<p class="item-list-date-title">{{item.date}}</p>
</ion-label>
</ion-item>
<ion-card *ngIf="item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<ion-card-header style="background: transparent;">
<ion-card-title style="font-size: 20px; margin: 5px;" *ngIf="direction === 'en'">{{item.title_EN}} <br>
<p style="font-size: 12px; color: gray;">{{item.date}}</p>
</ion-card-title>
<ion-card-title style="font-size: 20px; margin: 5px;" *ngIf="direction === 'ar'">{{item.title_AR}} <br>
<p style="font-size: 12px; color: gray;">{{item.date}}</p>
</ion-card-title>
<img *ngIf='item.img' [src]="item.img" class="image-center">
<div *ngIf='!item.img'></div>
</ion-card-header>
<ion-card-content>
<p *ngIf="direction === 'en'"><span [innerHTML]="item.body_EN"></span></p>
<p *ngIf="direction === 'ar'"><span [innerHTML]="item.body_AR"></span></p>
</ion-card-content>
</ion-card>
</div>
</ion-list>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
<!-- <ion-footer>
<ion-button (click)="loadData($event)"><ion-label><p>more</p></ion-label></ion-button>
</ion-footer> -->