Fix

src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.html

@@ -31,37 +31,37 @@
       <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
       <div >
         <ion-list>
-          <ion-item 
+          <div
-            class="expediente ion-no-padding cursor-pointer"  
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
             *ngFor = "let task of despachoList; let i = index"
             (click)="goToDespachoPr(task.SerialNumber)"
           >
             <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
             <div class="item width-100">
               <div class="exp-top-detail">
-                <div class="exp-date">
+                <div class="subject">
-                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                  <ion-label>{{ task.Folio }}</ion-label>
                 </div>
-                <div class="exp-remetente">
+                <div class="exp-icon">
-                  <ion-label>{{task.Senders}}</ion-label>
-                </div>
-                <div class="exp-workflow">
-                  <span class="label">{{task.activityInstanceName}}</span>
-                </div>
-                <div class="exp-icon d-flex align-center">
                   <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                  <label>{{task.DocumentsQty}}</label>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
-
-                  <!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
-                    <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                  </ion-menu-button> -->
                 </div>
               </div>
               <div class="exp-bottom-detail">
-                <ion-label>{{ task.Folio }}</ion-label>
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
+              </div>
             </div>
           </div>
-          </ion-item>
         </ion-list>
   
       </div>

src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss

@@ -133,7 +133,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -141,47 +146,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/pages/gabinete-digital/despachos/despachos.page.html

@@ -31,37 +31,37 @@
       <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
       <div class="height-100">
         <ion-list>
-          <ion-item 
+          <div
-              class="expediente ion-no-padding cursor-pointer"  
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
             *ngFor = "let task of despachoList; let i = index"
             (click)="GoToDespacho(task.SerialNumber)"
           >
             <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
             <div class="item width-100">
               <div class="exp-top-detail">
-                    <div class="exp-date">
+                <div class="subject">
-                      <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                  <ion-label>{{ task.Folio }}</ion-label>
                 </div>
-                    <div class="exp-remetente">
+                <div class="exp-icon">
-                      <ion-label>{{task.Senders}}</ion-label>
-                    </div>
-                    <div class="exp-workflow">
-                      <span class="label">{{task.activityInstanceName}}</span>
-                    </div>
-                    <div class="exp-icon d-flex align-center">
                   <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                      <label>{{task.DocumentsQty}}</label>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
-
-                      <!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
-                        <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                      </ion-menu-button> -->
                 </div>
               </div>
               <div class="exp-bottom-detail">
-                    <ion-label>{{ task.Folio }}</ion-label>
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
+              </div>
             </div>
           </div>
-              </ion-item>
         </ion-list>
 
       </div>

src/app/pages/gabinete-digital/despachos/despachos.page.scss

@@ -114,7 +114,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -122,47 +127,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;
@@ -181,7 +227,7 @@ ion-item{
   margin: 2.5px 0 2.5px 71px;
   float: left;
 }
-.div-logo img {
+.div-logo img{
   width: 100%;
 }
 .div-profile{
@@ -189,16 +235,3 @@ ion-item{
   float: right;
   margin-right: 10px;
 }
-.exp-workflow{
-  float: left;
-  margin-left: 15px;
-
-  .label{
-    border-radius: 20px;
-    background: #ffb703;
-    font-size: 12px;
-    float: right;
-    padding: 2.5px 13.5px 2.5px 13.5px;
-    color: #fff;
-}
-}

src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html

@@ -35,8 +35,8 @@
         <ion-list >
           <!-- *ngFor = "let task of parecerList; let i = index"
           (click)="viewExpedientDetail(task.SerialNumber)" -->
-          <ion-item 
+          <div
-            class="expediente ion-no-padding cursor-pointer"  
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
             *ngFor = "let task of diplomasList"
             (click)="goToDiploma(task.SerialNumber)"
           >
@@ -44,25 +44,29 @@
             <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
             <div class="item width-100">
               <div class="exp-top-detail">
-                <div class="exp-date">
+                <div class="subject">
-                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                  <ion-label>{{ task.Folio }}</ion-label>
-                </div>
-                <div class="exp-remetente">
-                  <ion-label>{{task.Remetente}}</ion-label>
-                </div>
-                <div class="exp-workflow">
-                  <span class="label">{{task.activityInstanceName}}</span>
                 </div>
                 <div class="exp-icon">
                   <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                  <label></label>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
                 </div>
               </div>
               <div class="exp-bottom-detail">
-                <ion-label>{{ task.Folio }}</ion-label>
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
+              </div>
             </div>
           </div>
-          </ion-item>
         </ion-list>
       </div>
     </div>

src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss

@@ -123,52 +123,101 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
+  //width: 368px;
   overflow: auto;
+  /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/pages/gabinete-digital/diplomas/diplomas.page.scss

@@ -113,7 +113,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -121,47 +126,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/pages/gabinete-digital/expediente/expediente.page.html

@@ -1,14 +1,9 @@
 <ion-header class="ion-no-border">
   <app-header></app-header>
 </ion-header>
-<ion-content>
+
-  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+
-    <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
+<ion-header class="ion-no-border header-2">
-     <ion-refresher-content>
-    </ion-refresher-content>
-  </ion-refresher>
-  <div class="main-content d-flex height-100" [ngSwitch]="segment">
-    <div class="content d-flex flex-column width-100">
   <div class="header-content">
     <div class="header-icon-left">
       <button class="btn-no-color cursor-pointer" (click)="goBack()">
@@ -24,36 +19,53 @@
       </button>
     </div>
   </div>
+</ion-header>
 
-    <div class="width-100 overflow-y-auto height-100" *ngIf="taskslist">
+<ion-content>
-
+  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-      <ion-list>
     <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
+     <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+  <div class="main-content d-flex height-100" >
+    <div class="content d-flex flex-column width-100 overflow-y-auto px-20">
+
+
+      <div class="width-100 flex-grow-1 " *ngIf="taskslist">
+        <ion-list>
           <div
-            class="expediente cursor-pointer"
+          class="expediente ion-no-padding ion-no-margin cursor-pointer" 
             *ngFor = "let task of taskslist"
             (click)="goToExpediente(task.SerialNumber)"
           >
           <div class="item width-100">
-                <div class="exp-top-detail width-100">
+            <div class="exp-top-detail">
-                  <div class="exp-date">
+              <div class="subject">
-                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                <ion-label>{{ task.Folio }}</ion-label>
-                  </div>
-                  <div class="exp-remetente">
-                    <ion-label>{{task.Remetente}}</ion-label>
               </div>
               <div class="exp-icon">
                 <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    <label></label>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
               </div>
             </div>
             <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
             </div>
           </div>
           </div>
         </ion-list>
       </div>
+
       <div *ngIf="skeletonLoader && taskslist.length == 0">
 
         <ion-list>
@@ -78,8 +90,8 @@
             </ion-label>
           </ion-item>
         </ion-list>
+      
       </div>
     </div>
   </div>
 </ion-content>
-

src/app/pages/gabinete-digital/expediente/expediente.page.scss

@@ -3,12 +3,19 @@
   background-color: #fff !important;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
+  padding-top: 5px !important;
 }
-.content{
+
+.header-2 {
+  border-top-right-radius: 24px;
+  border-top-left-radius: 24px;
+}
+
+ion-content, .header-2{
   padding: 30px 20px 0 20px !important;
-  margin: 0;
+  background-color: white;
-  float: left;
 }
+
 .header-content{
   margin: 0 !important;
   overflow: auto;
@@ -100,10 +107,15 @@ ion-item{
     padding-right: 18px;
 }
 
+
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
-  border-bottom: 1px solid #ebebeb;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -111,46 +123,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
-  overflow: auto;
+  width: 100%;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: fit-content;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.html

@@ -28,29 +28,36 @@
     <div class="width-100" >
       <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
       <ion-list>
-        <ion-item 
+        <div
-            class="expediente ion-no-padding cursor-pointer"  
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
           *ngFor = "let task of taskslist"
           (click)="goToExpediente(task.SerialNumber)"
         >
           <div class="item width-100">
             <div class="exp-top-detail">
-                  <div class="exp-date">
+              <div class="subject">
-                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                <ion-label>{{ task.Folio }}</ion-label>
-                  </div>
-                  <div class="exp-remetente">
-                    <ion-label>{{task.Remetente}}</ion-label>
               </div>
               <div class="exp-icon">
                 <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    <label></label>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
               </div>
             </div>
             <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
           </div>
         </div>
-        </ion-item>
       </ion-list>
     </div>
     

src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss

@@ -110,10 +110,14 @@ ion-item{
     font-size: 12px;
     padding-right: 18px;
 }
-
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -121,47 +125,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/pages/gabinete-digital/gabinete-digital.page.html

@@ -8,7 +8,7 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <div class="main-content d-flex height-100">
+  <div class="main-content d-flex height-100 ">
 
       <!-- Aside left -->
       <div class="aside-wrapper d-flex flex-column justify-center width-md-40 flex-grow-1 ">

src/app/pages/gabinete-digital/pedidos/pedidos.page.html

@@ -42,8 +42,8 @@
         <ion-list *ngSwitchCase="'parecer'">
           <!-- *ngFor = "let task of parecerList; let i = index"
           (click)="viewExpedientDetail(task.SerialNumber)" -->
-          <ion-item 
+          <div 
-              class="expediente ion-no-padding"  
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
             *ngFor = "let task of parecerList"
             (click)="goToPedido(task.SerialNumber)"
           >
@@ -51,32 +51,36 @@
             <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
             <div class="item width-100">
               <div class="exp-top-detail">
-                    <div class="exp-date">
+                <div class="subject">
-                      <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                  <ion-label>{{ task.Folio }}</ion-label>
-                    </div>
-                    <div class="exp-remetente">
-                      <ion-label>{{task.Remetente}}</ion-label>
-                    </div>
-                    <div class="exp-workflow">
-                      <span class="label">{{task.activityInstanceName}}</span>
                 </div>
                 <div class="exp-icon">
                   <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                      <label></label>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
                 </div>
               </div>
               <div class="exp-bottom-detail">
-                    <ion-label>{{ task.Folio }}</ion-label>
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
+              </div>
             </div>
           </div>
-              </ion-item>
         </ion-list>
   
       </div>
       <div *ngIf="deferimentoList">
         <ion-list *ngSwitchCase="'deferimento'">
-          <ion-item 
+          <div
-              class="expediente ion-no-padding"  
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
             *ngFor = "let task of deferimentoList"
             (click)="goToPedido(task.SerialNumber)"
           >
@@ -84,26 +88,29 @@
             <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
             <div class="item width-100">
               <div class="exp-top-detail">
-                    <div class="exp-date">
+                <div class="subject">
-                      <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                  <ion-label>{{ task.Folio }}</ion-label>
-                    </div>
-                    <div class="exp-remetente">
-                      <ion-label>{{task.Remetente}}</ion-label>
-                    </div>
-                    <div class="exp-workflow">
-                      <span class="label">{{task.activityInstanceName}}</span>
                 </div>
                 <div class="exp-icon">
-                      <ion-menu-button style="width: 35px; height: 41px;" autoHide="false">
                   <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                      </ion-menu-button> 
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
                 </div>
               </div>
               <div class="exp-bottom-detail">
-                    <ion-label>{{ task.Folio }}</ion-label>
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
+              </div>
             </div>
           </div>
-              </ion-item>
         </ion-list>
       </div>
     </div>

src/app/pages/gabinete-digital/pedidos/pedidos.page.scss

@@ -50,14 +50,12 @@ ion-item{
   --background: none;
 }
 .item {
-    //border-radius: 15px;
+    /* border-radius: 15px;
-    //box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07); */
     //Sborder: solid 1px #e9e9e9;
     background-color: var(--white);
     margin: 0 auto;
-    //padding: 10px;
+    overflow: auto;
-    margin-bottom: 10px;
-    overflow: hidden;
   }
 .div-content-expediente{
   width: 100%;
@@ -98,7 +96,6 @@ ion-item{
     margin: 0;
   }
   .span-left{
-      /* border: 1px solid red; */
       float: left;
       font-size: 12px;
       padding-left: 18px;
@@ -113,7 +110,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -121,47 +123,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/pages/gabinete-digital/pendentes/pendentes.page.ts

@@ -31,7 +31,7 @@ export class PendentesPage implements OnInit {
     private alertService: AlertService,
     private router: Router,
     private activatedRoute: ActivatedRoute,
-    ){
+    ) {
       this.profile = 'mdgpr';
     }
 

src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.html

@@ -29,37 +29,37 @@
     <div *ngIf="despachoList.length >= 1"  class=" height-100">
       
       <ion-list>
-        <ion-item 
+        <div 
-            class="expediente ion-no-padding cursor-pointer"  
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"    
           *ngFor = "let task of despachoList; let i = index"
           (click)="goToDespacho(task.SerialNumber)"
         >
           <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
           <div class="item width-100">
             <div class="exp-top-detail">
-                  <div class="exp-date">
+              <div class="subject">
-                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
-                  <div class="exp-remetente">
+              <div class="exp-icon">
-                    <ion-label>{{task.Senders}}</ion-label>
-                  </div>
-                  <div class="exp-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
-                  </div>
-                  <div class="exp-icon d-flex align-center">
                 <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    <label>{{task.DocumentsQty}}</label>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
-  
-                    <!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
-                      <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    </ion-menu-button> -->
               </div>
             </div>
             <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
           </div>
         </div>
-            </ion-item>
       </ion-list>
     </div>
     <div *ngIf="skeletonLoader && despachoList.length == 0">

src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.scss

@@ -117,7 +117,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -125,47 +130,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/shared/gabinete-digital/despachos/despachos.page.html

@@ -25,37 +25,37 @@
     
     <div  *ngIf="despachoList.length >= 0">
       <ion-list part="divo">
-        <ion-item 
+        <div
-            class="expediente ion-no-padding cursor-pointer"  
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
           *ngFor = "let task of despachoList; let i = index"
           (click)="goToDespacho(task.SerialNumber)"
         >
           <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
           <div class="item width-100">
             <div class="exp-top-detail">
-                  <div class="exp-date">
+              <div class="subject">
-                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
-                  <div class="exp-remetente">
+              <div class="exp-icon">
-                    <ion-label>{{task.Senders}}</ion-label>
-                  </div>
-                  <div class="exp-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
-                  </div>
-                  <div class="exp-icon d-flex align-center">
                 <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    <label>{{task.DocumentsQty}}</label>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
-
-                    <!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
-                      <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    </ion-menu-button> -->
               </div>
             </div>
             <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
           </div>
         </div>
-            </ion-item>
       </ion-list>
     </div>
 

src/app/shared/gabinete-digital/despachos/despachos.page.scss

@@ -98,10 +98,14 @@ ion-item{
     font-size: 12px;
     padding-right: 18px;
 }
-
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -109,47 +113,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;
@@ -176,16 +221,3 @@ ion-item{
   float: right;
   margin-right: 10px;
 }
-.exp-workflow{
-  float: left;
-  margin-left: 15px;
-
-  .label{
-    border-radius: 20px;
-    background: #ffb703;
-    font-size: 12px;
-    float: right;
-    padding: 2.5px 13.5px 2.5px 13.5px;
-    color: #fff;
-}
-}

src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html

@@ -28,8 +28,8 @@
       <ion-list >
         <!-- *ngFor = "let task of parecerList; let i = index"
         (click)="viewExpedientDetail(task.SerialNumber)" -->
-        <ion-item 
+        <div 
-            class="expediente ion-no-padding cursor-pointer"  
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
           *ngFor = "let task of diplomasList"
           (click)="goToDiploma(task.SerialNumber)"
         >
@@ -37,25 +37,29 @@
           <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
           <div class="item width-100">
             <div class="exp-top-detail">
-                  <div class="exp-date">
+              <div class="subject">
-                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                <ion-label>{{ task.Folio }}</ion-label>
-                  </div>
-                  <div class="exp-remetente">
-                    <ion-label>{{task.Remetente}}</ion-label>
-                  </div>
-                  <div class="exp-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
               </div>
               <div class="exp-icon">
                 <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    <label></label>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
               </div>
             </div>
             <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
           </div>
         </div>
-            </ion-item>
       </ion-list>
     </div>
 

src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss

@@ -107,54 +107,104 @@ ion-item{
     padding-right: 18px;
 }
 
+
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
+  //width: 368px;
   overflow: auto;
+  /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/shared/gabinete-digital/diplomas/diplomas.page.html

@@ -26,28 +26,32 @@
     <div *ngIf="diplomasList.length >= 1">
       <ion-list *ngSwitchCase="'validar'">
         <ion-item 
-          class="expediente ion-no-padding cursor-pointer"  
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"   
           *ngFor = "let task of diplomasList"
           (click)="goToDiploma(task.SerialNumber)"
           >
             <div class="item width-100">
               <div class="exp-top-detail">
-                <div class="exp-date">
+                <div class="subject">
-                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                  <ion-label>{{ task.Folio }}</ion-label>
-                </div>
-                <div class="exp-remetente">
-                  <ion-label>{{task.Remetente}}</ion-label>
-                </div>
-                <div class="exp-workflow">
-                  <span class="label">{{task.activityInstanceName}}</span>
                 </div>
                 <div class="exp-icon">
                   <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                  <label></label>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
                 </div>
               </div>
               <div class="exp-bottom-detail">
-                <ion-label>{{ task.Folio }}</ion-label>
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
               </div>
             </div>
         </ion-item>
@@ -56,32 +60,36 @@
     </div>
     <div *ngIf="diplomasList.length >= 1">
       <ion-list *ngSwitchCase="'assinados'">
-        <ion-item 
+        <div 
-            class="expediente ion-no-padding cursor-pointer"  
+          class="expediente ion-no-padding ion-no-margin cursor-pointer" 
           *ngFor = "let task of diplomasList"
           (click)="goToDiploma(task.SerialNumber)"
           >
           <div class="item width-100">
             <div class="exp-top-detail">
-                  <div class="exp-date">
+              <div class="subject">
-                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                <ion-label>{{ task.Folio }}</ion-label>
-                  </div>
-                  <div class="exp-remetente">
-                    <ion-label>{{task.Remetente}}</ion-label>
-                  </div>
-                  <div class="exp-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
               </div>
               <div class="exp-icon">
                 <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    <label></label>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
               </div>
             </div>
             <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
           </div>
         </div>
-        </ion-item>
       </ion-list>
     </div>
 

src/app/shared/gabinete-digital/diplomas/diplomas.page.scss

@@ -98,9 +98,15 @@ ion-item{
     padding-right: 18px;
 }
 
+
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -108,47 +114,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html

@@ -28,8 +28,8 @@
     <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
   <!-- </div> --> 
     <ion-list class="width-100" *ngSwitchCase="'MDGPR'" >
-      <ion-item 
+      <div 
-        class="item ion-no-padding width-100 cursor-pointer" 
+        class="expediente ion-no-padding ion-no-margin cursor-pointer"  
         *ngFor="let event of eventsMDGPRList"
         (click)="goToEventDetail(event)"
       >
@@ -45,12 +45,12 @@
             <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
           </div>
         </div>
-      </ion-item>
+      </div>
     </ion-list>
     <ion-list class="width-100" *ngSwitchCase="'PR'">
       <div class="width-100" *ngIf="eventsPRList">
-        <ion-item
+        <div
-            class=" ion-no-padding width-100 cursor-pointer"
+          class="expediente ion-no-padding ion-no-margin cursor-pointer" 
           *ngFor="let event of eventsPRList"
           (click)="goToEventDetail(event)"
         >
@@ -65,7 +65,7 @@
               <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
             </div>
           </div>
-        </ion-item>
+        </div>
       </div>
     </ion-list>
   </div>

src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss

@@ -97,3 +97,127 @@
     }
 }
 
+
+/* New CSS */
+.expediente{
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
+}
+.exp-list-item{
+  //width: 368px;
+  overflow: auto;
+  /* border-bottom: 1px solid gray; */
+  margin: 10px auto;
+}
+
+.exp-top-detail{
+  width: 100%;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
+}
+.div-top-header{
+  width: 400px;
+  margin: 6px auto;
+  background-color: #0782c9;
+  overflow: auto;
+}
+.div-search{
+  font-size: 45px;
+  float: left;
+  margin: 0 0 0 10px
+}
+.div-logo{
+  background: transparent;
+  width: 150px;
+  margin: 2.5px 0 2.5px 71px;
+  float: left;
+}
+.div-logo img{
+  width: 100%;
+}
+.div-profile{
+  font-size: 45px;
+  float: right;
+  margin-right: 10px;
+}

src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html

@@ -13,29 +13,36 @@
   <div class="width-100 overflow-y-auto height-100" >
     <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
     <ion-list *ngIf="taskslist.length >= 1">
-      <ion-item 
+      <div
-        class="expediente ion-no-padding cursor-pointer"  
+        class="expediente ion-no-padding ion-no-margin cursor-pointer"
         *ngFor = "let task of taskslist"
         (click)="goToExpediente(task.SerialNumber)"
       >
         <div class="item width-100">
           <div class="exp-top-detail">
-            <div class="exp-date">
+            <div class="subject">
-              <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              <ion-label>{{ task.Folio }}</ion-label>
-            </div>
-            <div class="exp-remetente">
-              <ion-label>{{task.Remetente}}</ion-label>
             </div>
             <div class="exp-icon">
               <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-              <label></label>
+              <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
             </div>
           </div>
           <div class="exp-bottom-detail">
-            <ion-label>{{ task.Folio }}</ion-label>
+            <div class="exp-remetente">
+              <ion-label>{{task.Senders}}</ion-label>
+            </div>
+          </div>
+          <div class="exp-middle-detail">
+            <div class="exp-workflow">
+              <span class="label">{{task.activityInstanceName}}</span>
+            </div>
+            <div class="exp-date">
+              <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+            </div>
+          </div>
         </div>
       </div>
-      </ion-item>
     </ion-list>
 
     <div *ngIf="skeletonLoader && taskslist.length == 0">

src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.scss

@@ -100,7 +100,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -108,47 +113,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/shared/gabinete-digital/expedients/expedients.page.html

@@ -22,29 +22,36 @@
     <div >
       <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
       <ion-list *ngIf="taskslist.length >= 1">
-        <ion-item 
+        <div 
-          class="expediente ion-no-padding cursor-pointer"  
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
           *ngFor = "let task of taskslist"
           (click)="goToExpediente(task.SerialNumber)"
         >
           <div class="item width-100">
             <div class="exp-top-detail">
-              <div class="exp-date">
+              <div class="subject">
-                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                <ion-label>{{ task.Folio }}</ion-label>
-              </div>
-              <div class="exp-remetente">
-                <ion-label>{{task.Remetente}}</ion-label>
               </div>
               <div class="exp-icon">
                 <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                <label></label>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
               </div>
             </div>
             <div class="exp-bottom-detail">
-              <ion-label>{{ task.Folio }}</ion-label>
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
           </div>
         </div>
-        </ion-item>
       </ion-list>
     </div>
 

src/app/shared/gabinete-digital/expedients/expedients.page.scss

@@ -100,7 +100,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -108,47 +113,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;

src/app/shared/gabinete-digital/pedidos/pedidos.page.html

@@ -34,8 +34,8 @@
       <ion-list *ngSwitchCase="'parecer'">
         <!-- *ngFor = "let task of parecerList; let i = index"
         (click)="viewExpedientDetail(task.SerialNumber)" -->
-        <ion-item 
+        <div 
-            class="expediente ion-no-padding cursor-pointer"  
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
           *ngFor = "let task of parecerList"
           (click)="goToPedido(task.SerialNumber)"
         >
@@ -43,32 +43,36 @@
           <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
           <div class="item width-100">
             <div class="exp-top-detail">
-                  <div class="exp-date">
+              <div class="subject">
-                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                <ion-label>{{ task.Folio }}</ion-label>
-                  </div>
-                  <div class="exp-remetente">
-                    <ion-label>{{task.Remetente}}</ion-label>
-                  </div>
-                  <div class="exp-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
               </div>
               <div class="exp-icon">
                 <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    <label></label>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
               </div>
             </div>
             <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
           </div>
         </div>
-            </ion-item>
       </ion-list>
 
     </div>
     <div *ngIf="deferimentoList.length >= 1">
       <ion-list *ngSwitchCase="'deferimento'">
-        <ion-item 
+        <div
-            class="expediente ion-no-padding cursor-pointer"  
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
           *ngFor = "let task of deferimentoList"
           (click)="goToPedido(task.SerialNumber)"
         >
@@ -76,26 +80,29 @@
           <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
           <div class="item width-100">
             <div class="exp-top-detail">
-                  <div class="exp-date">
+              <div class="subject">
-                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                <ion-label>{{ task.Folio }}</ion-label>
-                  </div>
-                  <div class="exp-remetente">
-                    <ion-label>{{task.Remetente}}</ion-label>
-                  </div>
-                  <div class="exp-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
               </div>
               <div class="exp-icon">
-                    <ion-menu-button style="width: 35px; height: 41px;" autoHide="false">
                 <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    </ion-menu-button> 
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
               </div>
             </div>
             <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
           </div>
         </div>
-            </ion-item>
       </ion-list>
     </div>
 

src/app/shared/gabinete-digital/pedidos/pedidos.page.scss

@@ -97,10 +97,14 @@ ion-item{
     font-size: 12px;
     padding-right: 18px;
 }
-
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -108,47 +112,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
   width: 100%;
-  overflow: auto;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
 }
-.exp-date{
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
+    float: right;
+  }
 }
-.exp-remetente{
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;
@@ -175,16 +220,3 @@ ion-item{
   float: right;
   margin-right: 10px;
 }
-.exp-workflow{
-  float: left;
-  margin-left: 15px;
-
-  .label{
-    border-radius: 20px;
-    background: #ffb703;
-    font-size: 12px;
-    float: right;
-    padding: 2.5px 13.5px 2.5px 13.5px;
-    color: #fff;
-}
-}

src/app/shared/gabinete-digital/pendentes/pendentes.page.html

@@ -21,7 +21,7 @@
   <div  class="width-100 overflow-y-auto height-100">
     <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
     <ion-list  *ngIf="pendentesList.length >= 1">
-      <ion-item
+      <div
         class="expediente ion-no-padding cursor-pointer"
         *ngFor = "let task of pendentesList"
         (click)="viewTaskDetails(task.SerialNumber, task.WorkflowName, task)"
@@ -29,14 +29,8 @@
         <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
         <div class="item width-100">
           <div class="exp-top-detail">
-              <div class="exp-date">
+            <div class="subject">
-                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              <ion-label>{{ task.Folio }}</ion-label>
-              </div>
-              <div class="exp-remetente">
-                <ion-label>{{task.Senders}}</ion-label>
-              </div>
-              <div class="exp-workflow">
-                <span class="label">{{task.activityInstanceName}}</span>
             </div>
             <div class="exp-icon">
               <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
@@ -44,10 +38,20 @@
             </div>
           </div>
           <div class="exp-bottom-detail">
-              <ion-label>{{ task.Folio }}</ion-label>
+            <div class="exp-remetente">
+              <ion-label>{{task.Senders}}</ion-label>
+            </div>
+          </div>
+          <div class="exp-middle-detail">
+            <div class="exp-workflow">
+              <span class="label">{{task.activityInstanceName}}</span>
+            </div>
+            <div class="exp-date">
+              <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+            </div>
+          </div>
         </div>
       </div>
-      </ion-item>
     </ion-list>
     
     <div 

src/app/shared/gabinete-digital/pendentes/pendentes.page.scss

@@ -100,7 +100,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -108,61 +113,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
+  width: 100%;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
   width: 100%;
   overflow: auto;
 
-}
+  .exp-workflow{
-.exp-date{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
     width: auto;
     font-family: Roboto;
-  font-size: 13px;
+    font-size: 10pt;
     font-weight: normal;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
     letter-spacing: normal;
     color: #797979;
-  float: left;
-}
-.exp-workflow{
-  float: left;
-  margin-left: 15px;
-
-  .label{
-    border-radius: 20px;
-    background: #ffb703;
-    font-size: 12px;
     float: right;
-    padding: 2.5px 13.5px 2.5px 13.5px;
+  }
-    color: #fff;
 }
-}
+.exp-bottom-detail{
-.exp-remetente{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
     //width: 200px;
     font-family: Roboto;
-  font-size: 13px;
+   /*  font-size: 13px; */
     font-weight: normal;
     color: #000000;
     float: left;
-  margin-left: 16px;
+    /* border: 1px solid red; */
-
+  }
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
 }
 .div-top-header{
   width: 400px;