mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 04:57:52 +00:00
add skeleton to gabinete page
This commit is contained in:
@@ -1,8 +1,5 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<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="header-top">
|
||||
<div class="left">
|
||||
|
||||
@@ -98,41 +98,45 @@
|
||||
|
||||
<ion-item-sliding *ngIf="!loadCount" class="width-100">
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
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="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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 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">
|
||||
<div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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 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">
|
||||
<div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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 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">
|
||||
<div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -282,79 +286,87 @@
|
||||
|
||||
<ion-item-sliding class="width-100">
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
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="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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 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">
|
||||
<div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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 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">
|
||||
<div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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 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">
|
||||
<div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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 class="width-100">
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
<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>
|
||||
<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>
|
||||
</ion-item>
|
||||
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="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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 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">
|
||||
<div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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 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">
|
||||
<div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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 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">
|
||||
<div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -35,7 +35,7 @@ export class PendentesPage implements OnInit {
|
||||
private storage: Storage
|
||||
) {
|
||||
this.loggeduser = authService.ValidatedUser;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
@@ -80,13 +80,13 @@ export class PendentesPage implements OnInit {
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
getFromDb() {
|
||||
this.storage.get('pendente-list').then((pendentes) => {
|
||||
this.listToPresent =pendentes
|
||||
})
|
||||
}
|
||||
getFromDb() {
|
||||
this.storage.get('pendente-list').then((pendentes) => {
|
||||
this.listToPresent =pendentes
|
||||
})
|
||||
}
|
||||
|
||||
doRefresh() {
|
||||
setTimeout(()=>{
|
||||
|
||||
Reference in New Issue
Block a user