Improve home publication

src/app/pages/publications/publication-detail/publication-detail.page.scss

@@ -1,16 +1,12 @@
-:host{
-    background: #0782c9;
-  }
+
   ion-content{
     --background: transparent;
-    transform: translate3d(0, 5px, 0);
     --border-radius: 30px;
   }
   ion-footer{
       background: #fff;
   }
   ion-toolbar{
-    /* --background:#0782c9; */
     border-width: 0 !important;
   }
   .div-top-header{
@@ -55,7 +51,6 @@
     border-top-right-radius: 25px;
     background: #ffffff;
     height: 100%;
-    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
     padding: 25px 0px 0 0px;
     overflow: auto;
   }

src/app/pages/publications/publications.module.ts

@@ -10,6 +10,7 @@ import { PublicationsPage } from './publications.page';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { ViewPublicationsPage } from 'src/app/shared/publication/view-publications/view-publications.page';
 import { NewPublicationPage } from 'src/app/shared/publication/new-publication/new-publication.page';
+import { PublicationDetailPage } from 'src/app/shared/publication/publication-detail/publication-detail.page';
 
 
 @NgModule({
@@ -23,7 +24,8 @@ import { NewPublicationPage } from 'src/app/shared/publication/new-publication/n
   declarations: [
     PublicationsPage,
     ViewPublicationsPage,
-    NewPublicationPage
+    NewPublicationPage,
+    PublicationDetailPage
   ]
 })
 export class PublicationsPageModule {}

src/app/pages/publications/publications.page.html

@@ -44,10 +44,9 @@
             </ion-label>
           </div>
         </div>
-        <div class="item"
-        
-        *ngFor="let evento of publicationsEventFolderList"
-        (click)="viewPublications(evento)">
+        <div class="item width-100"
+          *ngFor="let evento of publicationsEventFolderList"
+          (click)="viewPublications(evento)">
           <div class="item-icon2">
             <ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
           </div>
@@ -71,6 +70,7 @@
         [folderId]="folderId"
         class="height-100 d-flex flex-column overflow-hidden"
         (addNewPublication)="addNewPublication($event)"
+        (openPublicationDetails)="openPublicationDetails($event)"
       >
       </app-view-publications>
 
@@ -78,10 +78,16 @@
         class="height-100 d-flex flex-column overflow-hidden background-white"
         [folderId]="folderId"
         [publicationType]="publicationType"
-        (closeDesktopComponent)="closeDesktopComponent"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
       >
       </app-new-publication>
 
+      <app-publication-detail-shared
+        *ngIf="desktopComponent.showPublicationDetail"
+        class="height-100 d-flex flex-column overflow-hidden background-white"
+        [publicationId]="publicationId"
+      ></app-publication-detail-shared>
+
     </div>
 
   </div>

src/app/pages/publications/publications.page.scss

@@ -91,7 +91,6 @@ ion-toolbar{
     padding: 15px 20px 0 20px;
   }
   .item{
-    width: 360px;
     padding: 0 0px 0 0px;
     overflow: auto;
     margin: 0px auto;

src/app/pages/publications/publications.page.ts

@@ -34,11 +34,13 @@ export class PublicationsPage implements OnInit {
 
   desktopComponent: any = {
     showViewPublication: false,
-    showAddNewPublication: false
+    showAddNewPublication: false,
+    showPublicationDetail: false
   }
 
   folderId: string;
   publicationType: any;
+  publicationId: string;
 
   constructor(
     private router: Router, 
@@ -181,14 +183,21 @@ export class PublicationsPage implements OnInit {
     this.desktopComponent.showAddNewPublication = true;
   }
 
-  async closeDesktopComponent (){
+  async openPublicationDetails(publicationId: string){
+    
+    this.publicationId = publicationId;
+    
+    this.closeDesktopComponent();
+    this.desktopComponent.showPublicationDetail = true;
 
-    this.desktopComponent.showViewPublication = false;
-    this.desktopComponent.showAddNewPublication = false;
+  }
+
+  async closeDesktopComponent (xx?: any){
 
     this.desktopComponent = {
       showViewPublication: false,
-      showAddNewPublication: false
+      showAddNewPublication: false,
+      showPublicationDetail: false
     }
   }