Improve home publication

src/app/shared/publication/view-publications/view-publications.page.html

@@ -28,16 +28,16 @@
   <div class="main-container px-20">
     <ion-list>
       <!-- [routerLink]="['/home/publications/view-publications/publication-detail', publication.publicationId]" -->
-      <div class="post-item d-lg-flex d-md-block mb-10"
+      <div class="post-item  d-md-block mb-10"
         *ngFor="let publication of publicationList"
         (click)="viewPublicationDetail(publication.DocumentId)">
-        <div *ngIf="publication.FileBase64.length > 30" class="mb-10 post-img width-md-100 width-lg-50">
+        <div *ngIf="publication.FileBase64.length > 30" class="mb-10 post-img width-md-100">
           <img src="{{publication.FileBase64}}" alt="image">
         </div>
         <div *ngIf="publication.FileBase64.length < 30" class="mb-10 post-img">
           <img src="/assets/icon/icon-no-image.svg" alt="image">
         </div>
-        <div class="post-content px-20 width-md-100 width-lg-50">
+        <div class="post-content px-20 width-md-100 ">
           <div class="post-title-time">
             <div class="post-title">
               <ion-label>{{publication.Title}}</ion-label>

src/app/shared/publication/view-publications/view-publications.page.ts

@@ -21,7 +21,7 @@ export class ViewPublicationsPage implements OnInit {
 
   @Input() folderId: string;
   @Output() addNewPublication =  new EventEmitter<any>();
-  
+  @Output() openPublicationDetails= new EventEmitter<any>();
 
   constructor(
     private loadingController: LoadingService,
@@ -30,7 +30,7 @@ export class ViewPublicationsPage implements OnInit {
     ) { 
       this.item = new PublicationFolder();
 
-    }
+  }
 
   ngOnInit() {
     console.log(this.folderId);
@@ -121,19 +121,29 @@ export class ViewPublicationsPage implements OnInit {
 
   }
 
+  
   async viewPublicationDetail(publicationId:string) {
-    const modal = await this.modalController.create({
-      component: PublicationDetailPage,
-      componentProps:{
-        publicationId: publicationId,
-      },
-      cssClass: 'publication-detail',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then(()=>{
-      this.doRefresh(event);
-    });
+
+    console.log(publicationId);
+
+    if( window.innerWidth <= 1024) {
+      const modal = await this.modalController.create({
+        component: PublicationDetailPage,
+        componentProps:{
+          publicationId: publicationId,
+        },
+        cssClass: 'publication-detail',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss().then(()=>{
+        this.doRefresh(event);
+      });
+    } else {
+      // open publication details
+      this.openPublicationDetails.emit(publicationId);
+    }
+
   }
 
 }