From ad610c5deedccabfec552292c5b610ff08f835d7 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Thu, 24 Jun 2021 15:03:54 +0100
Subject: [PATCH] save

---
 .../pendentes/pendentes.page.html             |  24 ++--
 .../pendentes/pendentes.page.scss             | 130 +++++++++++-------
 2 files changed, 92 insertions(+), 62 deletions(-)

diff --git a/src/app/pages/gabinete-digital/pendentes/pendentes.page.html b/src/app/pages/gabinete-digital/pendentes/pendentes.page.html
index 80dd5f6e1..4169b451b 100644
--- a/src/app/pages/gabinete-digital/pendentes/pendentes.page.html
+++ b/src/app/pages/gabinete-digital/pendentes/pendentes.page.html
@@ -6,7 +6,7 @@
 <ion-header class="ion-no-border header-2">
   <app-btn-modal-dismiss (click)="goBack()" ></app-btn-modal-dismiss>
   <div class="title">
-    <div class="thetitle"><ion-label >Pendentes</ion-label></div>
+    <div class="thetitle"><ion-label >Pendentes MOB</ion-label></div>
     <div class="theicon btn-refresh">
       <button class="btn-no-color" (click)="doRefresh($event)">
         <ion-icon slot="end" class="title-icon" name="reload-circle"></ion-icon>
@@ -30,22 +30,24 @@
     <div class="width-100">
       <div *ngIf="pendentesList">
         <ion-list>
-          <ion-item 
-              class="expediente ion-no-padding cursor-pointer"  
+          <div 
+              class="expediente ion-no-padding ion-no-margin cursor-pointer"  
               *ngFor = "let task of pendentesList"
               (click)="viewTaskDetails(task.SerialNumber, task.WorkflowName)"
               >
               <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
                 <div class="item width-100">
                   <div class="exp-top-detail">
+                    <div class="exp-workflow">
+                      <span class="label">{{task.WorkflowName}}</span>
+                    </div>
                     <div class="exp-date">
                       <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
                     </div>
-                    <div class="exp-remetente">
-                      <ion-label>{{task.Senders}}</ion-label>
-                    </div>
-                    <div class="exp-workflow">
-                      <span class="label">{{task.WorkflowName}}</span>
+                  </div>
+                  <div class="exp-middle-detail">
+                    <div class="subject">
+                      <ion-label>{{ task.Folio }}</ion-label>
                     </div>
                     <div class="exp-icon">
                       <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
@@ -53,10 +55,12 @@
                     </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>
-              </ion-item>
+              </div>
         </ion-list>
   
       </div>
diff --git a/src/app/pages/gabinete-digital/pendentes/pendentes.page.scss b/src/app/pages/gabinete-digital/pendentes/pendentes.page.scss
index 727b79ead..e61343f4c 100644
--- a/src/app/pages/gabinete-digital/pendentes/pendentes.page.scss
+++ b/src/app/pages/gabinete-digital/pendentes/pendentes.page.scss
@@ -50,14 +50,12 @@ ion-item{
   --background: none;
 }
 .item {
-    //border-radius: 15px;
-    //box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+    /* border-radius: 15px;
+    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;
-    margin-bottom: 10px;
-    overflow: hidden;
+    overflow: auto;
   }
 .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,61 +123,85 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+.exp-top-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
 .exp-top-detail{
+  font-size: 12pt;
   width: 100%;
   overflow: auto;
 
-}
-.exp-date{
-  width: auto;
-  font-family: Roboto;
-  font-size: 13px;
-  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;
+  .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;
-    padding: 2.5px 13.5px 2.5px 13.5px;
-    color: #fff;
+  }
 }
-}
-.exp-remetente{
-  //width: 200px;
-  font-family: Roboto;
-  font-size: 13px;
-  font-weight: normal;
-  color: #000000;
-  float: left;
-  margin-left: 16px;
-
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
+.exp-middle-detail{
+  width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 16px;
+  font-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: 15%;
+    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-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+
+  .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;