peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 20:47:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

add skeleton to gabinete page

Browse Source
This commit is contained in:
Peter Maquiran
2022-07-04 17:53:39 +01:00
parent 1a8be35a6e
commit d8d1fc7b0c
3 changed files with 124 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/messages/messages.page.html
-3
View File
@@ -1,8 +1,5 @@
<ion-header class="ion-no-border"> <ion-header class="ion-no-border">
<ion-toolbar class="header-toolbar"> <ion-toolbar class="header-toolbar">
<!-- <div #rectangle class="rectangle" (press)="handlePress()">
Double click me to change the color
</div> -->
<div class="main-header"> <div class="main-header">
<div class="header-top"> <div class="header-top">
<div class="left"> <div class="left">
src/app/pages/gabinete-digital/gabinete-digital.page.html
+117 -105
View File
@@ -98,41 +98,45 @@
<ion-item-sliding *ngIf="!loadCount" class="width-100"> <ion-item-sliding *ngIf="!loadCount" class="width-100">
<ion-item lines="none" <ion-item lines="none"
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding"> class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<div class="item-content flex-grow-1 cursor-pointer"> <div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
</div> </div>
</ion-item>
<ion-item lines="none" </ion-item>
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding"> <ion-item lines="none"
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p> <div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
</div> <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
</ion-item> </div>
<ion-item lines="none"
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding"> </ion-item>
<ion-item lines="none"
<div class="item-content flex-grow-1 cursor-pointer"> class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p> <div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
</div> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
</ion-item> <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
<ion-item lines="none" </div>
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
</ion-item>
<div class="item-content flex-grow-1 cursor-pointer"> <ion-item lines="none"
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p> class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="item-content flex-grow-1 cursor-pointer">
</div> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
</ion-item> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
<div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
</div>
</ion-item>
</ion-item-sliding> </ion-item-sliding>
</div> </div>
@@ -282,79 +286,87 @@
<ion-item-sliding class="width-100"> <ion-item-sliding class="width-100">
<ion-item lines="none" <ion-item lines="none"
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding"> class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<div class="item-content flex-grow-1 cursor-pointer"> <div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
</div> </div>
</ion-item>
<ion-item lines="none" </ion-item>
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding"> <ion-item lines="none"
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p> <div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
</div> <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
</ion-item> </div>
<ion-item lines="none"
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding"> </ion-item>
<ion-item lines="none"
<div class="item-content flex-grow-1 cursor-pointer"> class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p> <div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
</div> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
</ion-item> <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
<ion-item lines="none" </div>
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
</ion-item>
<div class="item-content flex-grow-1 cursor-pointer"> <ion-item lines="none"
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p> class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="item-content flex-grow-1 cursor-pointer">
</div> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
</ion-item> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
<div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
</div>
</ion-item>
</ion-item-sliding> </ion-item-sliding>
<ion-item-sliding class="width-100"> <ion-item-sliding class="width-100">
<ion-item lines="none" <ion-item lines="none"
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding"> class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<div class="item-content flex-grow-1 cursor-pointer"> <div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
</div> </div>
</ion-item>
<ion-item lines="none" </ion-item>
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding"> <ion-item lines="none"
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p> <div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
</div> <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
</ion-item> </div>
<ion-item lines="none"
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding"> </ion-item>
<ion-item lines="none"
<div class="item-content flex-grow-1 cursor-pointer"> class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p> <div class="item-content flex-grow-1 cursor-pointer">
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
</div> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
</ion-item> <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
<ion-item lines="none" </div>
class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
</ion-item>
<div class="item-content flex-grow-1 cursor-pointer"> <ion-item lines="none"
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p> class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
<p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
<p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p> <div class="item-content flex-grow-1 cursor-pointer">
</div> <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
</ion-item> <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
<div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
</div>
</ion-item>
</ion-item-sliding> </ion-item-sliding>
</div> </div>
src/app/shared/gabinete-digital/pendentes/pendentes.page.ts
+7 -7
View File
@@ -35,7 +35,7 @@ export class PendentesPage implements OnInit {
private storage: Storage private storage: Storage
) { ) {
this.loggeduser = authService.ValidatedUser; this.loggeduser = authService.ValidatedUser;
} }
ngOnInit() { ngOnInit() {
@@ -80,13 +80,13 @@ export class PendentesPage implements OnInit {
} }
}) })
} }
getFromDb() { getFromDb() {
this.storage.get('pendente-list').then((pendentes) => { this.storage.get('pendente-list').then((pendentes) => {
this.listToPresent =pendentes this.listToPresent =pendentes
}) })
} }
doRefresh() { doRefresh() {
setTimeout(()=>{ setTimeout(()=>{