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

improve

Browse Source
This commit is contained in:
Peter Maquiran
2022-04-28 14:28:26 +01:00
parent f09d129735
commit d83a75062d
2 changed files with 125 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/gabinete-digital/gabinete-digital.page.html
+50 -9
View File
@@ -35,7 +35,8 @@
<!-- This is the list view -->
<div *ngSwitchCase="'listview'">
<ion-item-sliding>
<ion-item-sliding *ngIf="loadCount">
<div class="listview" >
<ion-list *ngIf="allProcessesList">
<div
@@ -87,6 +88,46 @@
</ion-list>
</div>
</ion-item-sliding>
<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>
</ion-item-sliding>
</div>
<!-- This is the box view -->
@@ -251,7 +292,7 @@
<ion-item-sliding class="width-100">
<ion-item lines="none"
class="item 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">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -260,7 +301,7 @@
</div>
</ion-item>
<ion-item lines="none"
class="item 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">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -269,7 +310,7 @@
</div>
</ion-item>
<ion-item lines="none"
class="item 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">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -278,7 +319,7 @@
</div>
</ion-item>
<ion-item lines="none"
class="item 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">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -289,7 +330,7 @@
</ion-item-sliding>
<ion-item-sliding class="width-100">
<ion-item lines="none"
class="item 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">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -298,7 +339,7 @@
</div>
</ion-item>
<ion-item lines="none"
class="item 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">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -307,7 +348,7 @@
</div>
</ion-item>
<ion-item lines="none"
class="item 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">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -316,7 +357,7 @@
</div>
</ion-item>
<ion-item lines="none"
class="item 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">
<p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
src/app/pages/gabinete-digital/gabinete-digital.page.scss
+75 -4
View File
@@ -62,7 +62,7 @@ ion-content{
border-radius: 20px;
}
ion-item{
--ion-background-color:#dae3f3;
--ion-background-color:#ffffff;
margin-bottom: 10px;
border-radius: 5px;
}
@@ -156,7 +156,7 @@ ion-content{
background: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
width: 360px;
margin: 7px 20px;
margin: 7px;
border-radius: 15px;
padding: 7px;
border:1px solid white;
@@ -440,7 +440,7 @@ ion-content{
}
.exp-card-long{
//display: none;
width: 100% !important;
width: 93% !important;
cursor: pointer;
user-select: none;
background: white;
@@ -600,4 +600,75 @@ ion-content{
color: white !important;
fill: red !important;
}
.item-skeleton{
width: 100% !important;
padding: 0px 20px 0 20px !important;
border-bottom: 1px solid #ebebeb;
align-items: center;
justify-content: space-between;
flex-direction: row;
background-color: transparent;
overflow: auto;
.item-icon{
//margin-top: 28px;
width: 45px;
float: left;
font-size: 40px;
.item-icon ion-icon{
color: #061b52;
}
}
.item-icon2{
//margin-top: 23px;
width: 45px;
float: left;
font-size: 40px;
}
.item-content{
width: 100%;
padding: 15px 0 15px 10px;
overflow: auto;
margin-right: 5px;
p{
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.item-content-date{
color: #797979;
font-size: 13px;
margin: 0 !important;
padding: 0 !important;
}
.item-content-title{
color: var(--title-text-color);
font-size: 15px;
margin: 0 !important;
padding: 0 !important;
}
.item-content-detail{
color: #000000;
font-size: 13px;
margin: 0 !important;
padding: 0 !important;
}
.item-options{
color: var(--box-hover-background-color);
width: 25px;
font-size: 20px;
}
.item-content-date-active, .item-content-title-active, .item-content-detail-active{
color: #fff;
}
}
.item-options-active{
display: none !important;
}
}