Stuled expedient-detail page

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

@@ -3,13 +3,13 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/expediente"></ion-back-button>
     </ion-buttons>
-    <ion-title>Detalhes do Processo</ion-title>
+    <ion-title>Expediente</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content  padding>
   <div *ngIf="task">
-
+  <h3 class="h3-event-title">Detalhes do Expediente</h3>
   <ion-item-group>
     <ion-item>
       <ion-label position="stacked">Assunto</ion-label>
@@ -21,14 +21,16 @@
     </ion-item>
     <ion-item>
       <ion-label position="stacked">Data</ion-label>
-      <ion-input disabled="true" value=''>{{ task.CreateDate }}</ion-input>
+      <ion-input disabled="true" value=''>{{ task.CreateDate | date: 'dd-MM-yy | hh:mm'}}</ion-input>
     </ion-item>
-    <ion-button  (click)="viewDocument()" shape="round" expand="outline">
+    <ion-button  (click)="viewDocument()" shape="round" expand="block">
       <ion-icon name="attach" slot="start"></ion-icon>
       Ver documento
     </ion-button>
+  </ion-item-group>
+    <div *ngIf="eventsList">
+      <h3 class="h3-event-title">Eventos Associados</h3>
     <ion-list>
-      <ion-item-group>
         <ion-item-sliding>
           <ion-item lines="none" 
           *ngFor="let event of eventsList"
@@ -40,7 +42,7 @@
                 </div>
                 <div class="div-content-{{event.CalendarName}}">
                   <h3 class="capitalizeText">{{event.Subject}}</h3>
-                  <p>{{event.StartDate | date: 'hh:mm'}} - {{event.EndDate| date: 'hh:mm'}}</p>
+                  <p>{{event.StartDate | date: 'dd-MM-yy | hh:mm'}} - {{event.EndDate| date: 'hh:mm'}}</p>
                 </div>
               </div>
               <div class="div-botton">
@@ -57,9 +59,52 @@
             </div>
           </ion-item>
         </ion-item-sliding>
-      </ion-item-group>
     </ion-list>
-  </ion-item-group>
+  </div>
+  <div *ngIf="!eventsList"> 
+    <ion-list>
+      <ion-list-header>
+        <ion-label>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </ion-label>
+      </ion-list-header>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ion-skeleton-text animated></ion-skeleton-text>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ion-skeleton-text animated></ion-skeleton-text>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+     
+    </ion-list>
+  </div>
+
+  
 </div>
   <div *ngIf="!task">
     <ion-list>
@@ -91,8 +136,8 @@
           </p>
         </ion-label>
       </ion-item>
-      <ion-button color="medium" shape="round" expand="outline">
+      <ion-button color="medium" shape="round" expand="block">
-        <ion-icon color="medium" name="attach" slot="start"></ion-icon>
+        <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
         <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
       </ion-button>
     </ion-list>

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

@@ -4,5 +4,118 @@ ion-item-group{
 ion-button{
     display: block;
     width: 80%;
-    margin: 15px auto;
+    margin: 20px auto;
-}
+}
+.h3-event-title{
+    padding: 15px 0 0px 25px;
+    font-weight: bold;
+}
+
+//DIV
+.div-item-Oficial{
+    width: 100%;
+    overflow: auto;
+    border-bottom: 1px solid #ccc;
+    margin: 10px 0 5px 0;
+    /* background: #cab0dc; */
+    /* border-radius: 20px; */
+    /* padding: 10px; */
+    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+  }
+  .div-item-Pessoal{
+    width: 100%;
+    overflow: auto;
+    border-bottom: 1px solid #ccc;
+    margin: 10px 0 5px 0;
+    /* background: #cbeecb; */
+    /* border-radius: 20px; */
+    /* padding: 10px; */
+    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+  }
+  .div-up{
+    width: 100%;
+    overflow: auto;
+  }
+  .div-up h3{
+    margin: 0;
+    padding: 0;
+    font-size: 17px;
+    width: 100%;
+  }
+  .div-icon{
+    width: 10%;
+    font-size: 22px;
+    float: left;
+    color: #808080;
+  }
+  .div-icon ion-icon{
+    display: block;
+    margin: 0 auto;
+  
+  }
+  .div-content-Oficial{
+    width: 85%;
+    float: left;
+    border-left: 4px solid #cab0dc;
+    padding: 0 0 0 12px;
+  }
+  .div-content-Pessoal{
+    width: 85%;
+    float: left;
+    border-left: 4px solid #cbeecb;
+    padding: 0 0 0 12px;
+  }
+  .div-content-Oficial h3, .div-content-Pessoal h3{
+    font-size: 14pt;
+    /* border: 1px solid red; */
+  }
+  .div-content-Oficial p, .div-content-Pessoal p{
+    font-size: 12pt;
+    color: rgb(94, 92, 92);
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+  .div-botton{
+    width: 100%;
+    overflow: auto;
+    margin: 10px 0 5px 0;
+  }
+  .div-botton-left{
+    width: 10%;
+    float: left;
+  }
+  .ion-icon-location{
+    text-align: center;
+    display: block;
+    color: #000;
+    font-size: 16px;
+    margin: 0 auto;
+  }
+  .div-botton-middle{
+    width: 75%;
+    float: left;
+    margin-top: 0.5px;
+  }
+  .div-botton-middle p{
+    padding: 0;
+    margin: 0;
+  }
+  .div-botton-right{
+    width: 10%;
+    float: left;
+    margin: 0;
+    padding: 0;
+  }
+  .ion-icon-attach{
+    color: #666666;
+    font-size: 20px;
+  }
+/* TOGGLE BUTTON */
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 90px;
+    height: 34px;
+    float: right;
+    margin:20px 20px 0 0;
+  }