This commit is contained in:
Peter Maquiran
2021-07-17 18:42:15 +01:00
parent 49f31c1b44
commit a66b346231
34 changed files with 1926 additions and 1088 deletions
@@ -31,37 +31,37 @@
<ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar> <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
<div > <div >
<ion-list> <ion-list>
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of despachoList; let i = index" *ngFor = "let task of despachoList; let i = index"
(click)="goToDespachoPr(task.SerialNumber)" (click)="goToDespachoPr(task.SerialNumber)"
> >
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div> </div>
<div class="exp-remetente"> <div class="exp-icon">
<ion-label>{{task.Senders}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-icon d-flex align-center">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon> <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label>{{task.DocumentsQty}}</label> <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
<!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
</ion-menu-button> -->
</div> </div>
</div> </div>
<div class="exp-bottom-detail"> <div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label> <div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div> </div>
</div> </div>
</ion-item> </div>
</ion-list> </ion-list>
</div> </div>
@@ -133,7 +133,12 @@ ion-item{
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -141,47 +146,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -31,37 +31,37 @@
<ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar> <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
<div class="height-100"> <div class="height-100">
<ion-list> <ion-list>
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of despachoList; let i = index" *ngFor = "let task of despachoList; let i = index"
(click)="GoToDespacho(task.SerialNumber)" (click)="GoToDespacho(task.SerialNumber)"
> >
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-icon d-flex align-center">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label>{{task.DocumentsQty}}</label>
<!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
</ion-menu-button> -->
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</ion-item> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list> </ion-list>
</div> </div>
@@ -114,7 +114,12 @@ ion-item{
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -122,47 +127,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -181,7 +227,7 @@ ion-item{
margin: 2.5px 0 2.5px 71px; margin: 2.5px 0 2.5px 71px;
float: left; float: left;
} }
.div-logo img { .div-logo img{
width: 100%; width: 100%;
} }
.div-profile{ .div-profile{
@@ -189,16 +235,3 @@ ion-item{
float: right; float: right;
margin-right: 10px; margin-right: 10px;
} }
.exp-workflow{
float: left;
margin-left: 15px;
.label{
border-radius: 20px;
background: #ffb703;
font-size: 12px;
float: right;
padding: 2.5px 13.5px 2.5px 13.5px;
color: #fff;
}
}
@@ -35,8 +35,8 @@
<ion-list > <ion-list >
<!-- *ngFor = "let task of parecerList; let i = index" <!-- *ngFor = "let task of parecerList; let i = index"
(click)="viewExpedientDetail(task.SerialNumber)" --> (click)="viewExpedientDetail(task.SerialNumber)" -->
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of diplomasList" *ngFor = "let task of diplomasList"
(click)="goToDiploma(task.SerialNumber)" (click)="goToDiploma(task.SerialNumber)"
> >
@@ -44,25 +44,29 @@
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div> </div>
<div class="exp-icon"> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon> <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label></label> <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div> </div>
</div> </div>
<div class="exp-bottom-detail"> <div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label> <div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div> </div>
</div> </div>
</ion-item> </div>
</ion-list> </ion-list>
</div> </div>
</div> </div>
@@ -123,52 +123,101 @@ ion-item{
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px;
overflow: auto; overflow: auto;
/* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-remetente{
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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -113,7 +113,12 @@ ion-item{
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -121,47 +126,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -1,85 +1,97 @@
<ion-header class="ion-no-border"> <ion-header class="ion-no-border">
<app-header></app-header> <app-header></app-header>
</ion-header> </ion-header>
<ion-header class="ion-no-border header-2">
<div class="header-content">
<div class="header-icon-left">
<button class="btn-no-color cursor-pointer" (click)="goBack()">
<ion-icon src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
</button>
</div>
<div class="header-title">
<label>Expediente</label>
</div>
<div class="btn-refresh">
<button class="btn-no-color" (click)="doRefresh($event)">
<ion-icon slot="end" class="title-icon" name="reload-circle"></ion-icon>
</button>
</div>
</div>
</ion-header>
<ion-content> <ion-content>
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)"> <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar> <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
<ion-refresher-content> <ion-refresher-content>
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> </ion-refresher>
<div class="main-content d-flex height-100" [ngSwitch]="segment"> <div class="main-content d-flex height-100" >
<div class="content d-flex flex-column width-100"> <div class="content d-flex flex-column width-100 overflow-y-auto px-20">
<div class="header-content">
<div class="header-icon-left">
<button class="btn-no-color cursor-pointer" (click)="goBack()">
<ion-icon src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
</button>
</div>
<div class="header-title">
<label>Expediente</label>
</div>
<div class="btn-refresh">
<button class="btn-no-color" (click)="doRefresh($event)">
<ion-icon slot="end" class="title-icon" name="reload-circle"></ion-icon>
</button>
</div>
</div>
<div class="width-100 overflow-y-auto height-100" *ngIf="taskslist">
<ion-list> <div class="width-100 flex-grow-1 " *ngIf="taskslist">
<ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar> <ion-list>
<div <div
class="expediente cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of taskslist" *ngFor = "let task of taskslist"
(click)="goToExpediente(task.SerialNumber)" (click)="goToExpediente(task.SerialNumber)"
> >
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail width-100"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div>
<div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label></label>
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</div> <div class="exp-icon">
</ion-list> <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
</div> <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
<div *ngIf="skeletonLoader && taskslist.length == 0"> </div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list>
</div>
<ion-list> <div *ngIf="skeletonLoader && taskslist.length == 0">
<ion-item>
<ion-thumbnail slot="end"> <ion-list>
<ion-skeleton-text animated></ion-skeleton-text> <ion-item>
</ion-thumbnail> <ion-thumbnail slot="end">
<ion-label> <ion-skeleton-text animated></ion-skeleton-text>
<h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3> </ion-thumbnail>
<p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p> <ion-label>
<p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p> <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
</ion-label> <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
</ion-item> <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
<ion-item> </ion-label>
<ion-thumbnail slot="end"> </ion-item>
<ion-skeleton-text animated></ion-skeleton-text> <ion-item>
</ion-thumbnail> <ion-thumbnail slot="end">
<ion-label> <ion-skeleton-text animated></ion-skeleton-text>
<h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3> </ion-thumbnail>
<p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p> <ion-label>
<p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p> <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
</ion-label> <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
</ion-item> <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
</ion-list> </ion-label>
</div> </ion-item>
</ion-list>
</div>
</div> </div>
</div> </div>
</ion-content> </ion-content>
@@ -3,12 +3,19 @@
background-color: #fff !important; background-color: #fff !important;
border-top-left-radius: 25px; border-top-left-radius: 25px;
border-top-right-radius: 25px; border-top-right-radius: 25px;
padding-top: 5px !important;
} }
.content{
.header-2 {
border-top-right-radius: 24px;
border-top-left-radius: 24px;
}
ion-content, .header-2{
padding: 30px 20px 0 20px !important; padding: 30px 20px 0 20px !important;
margin: 0; background-color: white;
float: left;
} }
.header-content{ .header-content{
margin: 0 !important; margin: 0 !important;
overflow: auto; overflow: auto;
@@ -100,10 +107,15 @@ ion-item{
padding-right: 18px; padding-right: 18px;
} }
/* New CSS */ /* New CSS */
.expediente{ .expediente{
padding-top: 10px; border-radius: 15px;
border-bottom: 1px solid #ebebeb; 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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -111,46 +123,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{
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-remetente{
//width: 200px;
font-family: Roboto;
font-size: 13px;
font-weight: normal;
color: #000000;
float: left;
margin-left: 16px;
} .exp-top-detail{
.exp-icon{ width: 100%;
width: fit-content;
float: right;
font-size: 13px;
}
.exp-icon ion-icon{
font-size: 25px;
color: #42b9fe;
}
.exp-bottom-detail{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -28,29 +28,36 @@
<div class="width-100" > <div class="width-100" >
<ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar> <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
<ion-list> <ion-list>
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of taskslist" *ngFor = "let task of taskslist"
(click)="goToExpediente(task.SerialNumber)" (click)="goToExpediente(task.SerialNumber)"
> >
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div>
<div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label></label>
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</ion-item> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list> </ion-list>
</div> </div>
@@ -110,10 +110,14 @@ ion-item{
font-size: 12px; font-size: 12px;
padding-right: 18px; padding-right: 18px;
} }
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -121,47 +125,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -8,7 +8,7 @@
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> </ion-refresher>
<div class="main-content d-flex height-100"> <div class="main-content d-flex height-100 ">
<!-- Aside left --> <!-- Aside left -->
<div class="aside-wrapper d-flex flex-column justify-center width-md-40 flex-grow-1 "> <div class="aside-wrapper d-flex flex-column justify-center width-md-40 flex-grow-1 ">
@@ -42,68 +42,75 @@
<ion-list *ngSwitchCase="'parecer'"> <ion-list *ngSwitchCase="'parecer'">
<!-- *ngFor = "let task of parecerList; let i = index" <!-- *ngFor = "let task of parecerList; let i = index"
(click)="viewExpedientDetail(task.SerialNumber)" --> (click)="viewExpedientDetail(task.SerialNumber)" -->
<ion-item <div
class="expediente ion-no-padding" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of parecerList" *ngFor = "let task of parecerList"
(click)="goToPedido(task.SerialNumber)" (click)="goToPedido(task.SerialNumber)"
> >
<!-- (click)="viewExpedientDetail(task.SerialNumber)" --> <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label></label>
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</ion-item> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list> </ion-list>
</div> </div>
<div *ngIf="deferimentoList"> <div *ngIf="deferimentoList">
<ion-list *ngSwitchCase="'deferimento'"> <ion-list *ngSwitchCase="'deferimento'">
<ion-item <div
class="expediente ion-no-padding" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of deferimentoList" *ngFor = "let task of deferimentoList"
(click)="goToPedido(task.SerialNumber)" (click)="goToPedido(task.SerialNumber)"
> >
<!-- (click)="viewExpedientDetail(task.SerialNumber)" --> <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-icon">
<ion-menu-button style="width: 35px; height: 41px;" autoHide="false">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
</ion-menu-button>
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</ion-item> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list> </ion-list>
</div> </div>
</div> </div>
@@ -50,14 +50,12 @@ ion-item{
--background: none; --background: none;
} }
.item { .item {
//border-radius: 15px; /* border-radius: 15px;
//box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07); */
//Sborder: solid 1px #e9e9e9; //Sborder: solid 1px #e9e9e9;
background-color: var(--white); background-color: var(--white);
margin: 0 auto; margin: 0 auto;
//padding: 10px; overflow: auto;
margin-bottom: 10px;
overflow: hidden;
} }
.div-content-expediente{ .div-content-expediente{
width: 100%; width: 100%;
@@ -98,7 +96,6 @@ ion-item{
margin: 0; margin: 0;
} }
.span-left{ .span-left{
/* border: 1px solid red; */
float: left; float: left;
font-size: 12px; font-size: 12px;
padding-left: 18px; padding-left: 18px;
@@ -113,7 +110,12 @@ ion-item{
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -121,47 +123,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -34,35 +34,35 @@
<div > <div >
<ion-list> <ion-list>
<div <div
class="expediente ion-no-padding ion-no-margin cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of pendentesList" *ngFor = "let task of pendentesList"
(click)="viewTaskDetails(task.SerialNumber, task.WorkflowName)" (click)="viewTaskDetails(task.SerialNumber, task.WorkflowName)"
> >
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="subject"> <div class="subject">
<ion-label>{{ task.Folio }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div> </div>
<div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div> </div>
</ion-list> </ion-list>
</div> </div>
@@ -31,7 +31,7 @@ export class PendentesPage implements OnInit {
private alertService: AlertService, private alertService: AlertService,
private router: Router, private router: Router,
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
){ ) {
this.profile = 'mdgpr'; this.profile = 'mdgpr';
} }
@@ -29,37 +29,37 @@
<div *ngIf="despachoList.length >= 1" class=" height-100"> <div *ngIf="despachoList.length >= 1" class=" height-100">
<ion-list> <ion-list>
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of despachoList; let i = index" *ngFor = "let task of despachoList; let i = index"
(click)="goToDespacho(task.SerialNumber)" (click)="goToDespacho(task.SerialNumber)"
> >
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-icon d-flex align-center">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label>{{task.DocumentsQty}}</label>
<!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
</ion-menu-button> -->
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</ion-item> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list> </ion-list>
</div> </div>
<div *ngIf="skeletonLoader && despachoList.length == 0"> <div *ngIf="skeletonLoader && despachoList.length == 0">
@@ -117,7 +117,12 @@ ion-item{
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -125,47 +130,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -25,37 +25,37 @@
<div *ngIf="despachoList.length >= 0"> <div *ngIf="despachoList.length >= 0">
<ion-list part="divo"> <ion-list part="divo">
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of despachoList; let i = index" *ngFor = "let task of despachoList; let i = index"
(click)="goToDespacho(task.SerialNumber)" (click)="goToDespacho(task.SerialNumber)"
> >
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-icon d-flex align-center">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label>{{task.DocumentsQty}}</label>
<!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
</ion-menu-button> -->
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</ion-item> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list> </ion-list>
</div> </div>
@@ -98,10 +98,14 @@ ion-item{
font-size: 12px; font-size: 12px;
padding-right: 18px; padding-right: 18px;
} }
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -109,47 +113,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -176,16 +221,3 @@ ion-item{
float: right; float: right;
margin-right: 10px; margin-right: 10px;
} }
.exp-workflow{
float: left;
margin-left: 15px;
.label{
border-radius: 20px;
background: #ffb703;
font-size: 12px;
float: right;
padding: 2.5px 13.5px 2.5px 13.5px;
color: #fff;
}
}
@@ -28,34 +28,38 @@
<ion-list > <ion-list >
<!-- *ngFor = "let task of parecerList; let i = index" <!-- *ngFor = "let task of parecerList; let i = index"
(click)="viewExpedientDetail(task.SerialNumber)" --> (click)="viewExpedientDetail(task.SerialNumber)" -->
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of diplomasList" *ngFor = "let task of diplomasList"
(click)="goToDiploma(task.SerialNumber)" (click)="goToDiploma(task.SerialNumber)"
> >
<!-- (click)="viewExpedientDetail(task.SerialNumber)" --> <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label></label>
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</ion-item> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list> </ion-list>
</div> </div>
@@ -107,54 +107,104 @@ ion-item{
padding-right: 18px; padding-right: 18px;
} }
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px;
overflow: auto; overflow: auto;
/* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-remetente{
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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -26,28 +26,32 @@
<div *ngIf="diplomasList.length >= 1"> <div *ngIf="diplomasList.length >= 1">
<ion-list *ngSwitchCase="'validar'"> <ion-list *ngSwitchCase="'validar'">
<ion-item <ion-item
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of diplomasList" *ngFor = "let task of diplomasList"
(click)="goToDiploma(task.SerialNumber)" (click)="goToDiploma(task.SerialNumber)"
> >
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div> </div>
<div class="exp-icon"> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon> <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label></label> <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div> </div>
</div> </div>
<div class="exp-bottom-detail"> <div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label> <div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div> </div>
</div> </div>
</ion-item> </ion-item>
@@ -56,32 +60,36 @@
</div> </div>
<div *ngIf="diplomasList.length >= 1"> <div *ngIf="diplomasList.length >= 1">
<ion-list *ngSwitchCase="'assinados'"> <ion-list *ngSwitchCase="'assinados'">
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of diplomasList" *ngFor = "let task of diplomasList"
(click)="goToDiploma(task.SerialNumber)" (click)="goToDiploma(task.SerialNumber)"
> >
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label></label>
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</ion-item> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list> </ion-list>
</div> </div>
@@ -98,9 +98,15 @@ ion-item{
padding-right: 18px; padding-right: 18px;
} }
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -108,47 +114,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -28,44 +28,44 @@
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar> <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<!-- </div> --> <!-- </div> -->
<ion-list class="width-100" *ngSwitchCase="'MDGPR'" > <ion-list class="width-100" *ngSwitchCase="'MDGPR'" >
<ion-item <div
class="item ion-no-padding width-100 cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor="let event of eventsMDGPRList" *ngFor="let event of eventsMDGPRList"
(click)="goToEventDetail(event)" (click)="goToEventDetail(event)"
> >
<!-- (click)="openApproveModal(event)" --> <!-- (click)="openApproveModal(event)" -->
<div class="event-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100"> <div class="event-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
<div class="approve-event-time"> <div class="approve-event-time">
<p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p> <p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p>
<p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p> <p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
</div> </div>
<div class="approve-event-detail"> <div class="approve-event-detail">
<p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} | {{event.workflowInstanceDataFields.Location}}</p> <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} | {{event.workflowInstanceDataFields.Location}}</p>
<p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} | {{event.workflowInstanceDataFields.Location}}</p> <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} | {{event.workflowInstanceDataFields.Location}}</p>
<h3>{{event.workflowInstanceDataFields.Subject}}</h3> <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
</div> </div>
</div> </div>
</ion-item> </div>
</ion-list> </ion-list>
<ion-list class="width-100" *ngSwitchCase="'PR'"> <ion-list class="width-100" *ngSwitchCase="'PR'">
<div class="width-100" *ngIf="eventsPRList"> <div class="width-100" *ngIf="eventsPRList">
<ion-item <div
class=" ion-no-padding width-100 cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor="let event of eventsPRList" *ngFor="let event of eventsPRList"
(click)="goToEventDetail(event)" (click)="goToEventDetail(event)"
> >
<div class="item event-pr-{{event.workflowInstanceDataFields.Agenda}} width-100"> <div class="item event-pr-{{event.workflowInstanceDataFields.Agenda}} width-100">
<div class="approve-event-time"> <div class="approve-event-time">
<p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p> <p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p>
<p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p> <p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
</div> </div>
<div class="approve-event-detail"> <div class="approve-event-detail">
<p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} | {{event.workflowInstanceDataFields.Location}}</p> <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} | {{event.workflowInstanceDataFields.Location}}</p>
<p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} | {{event.workflowInstanceDataFields.Location}}</p> <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} | {{event.workflowInstanceDataFields.Location}}</p>
<h3>{{event.workflowInstanceDataFields.Subject}}</h3> <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
</div> </div>
</div> </div>
</ion-item> </div>
</div> </div>
</ion-list> </ion-list>
</div> </div>
@@ -97,3 +97,127 @@
} }
} }
/* New CSS */
.expediente{
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;
overflow: auto;
/* border-bottom: 1px solid gray; */
margin: 10px auto;
}
.exp-top-detail{
width: 100%;
float: left;
font-family: Roboto;
font-size: 12pt;
font-weight: 700;
color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.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;
margin: 6px auto;
background-color: #0782c9;
overflow: auto;
}
.div-search{
font-size: 45px;
float: left;
margin: 0 0 0 10px
}
.div-logo{
background: transparent;
width: 150px;
margin: 2.5px 0 2.5px 71px;
float: left;
}
.div-logo img{
width: 100%;
}
.div-profile{
font-size: 45px;
float: right;
margin-right: 10px;
}
@@ -13,29 +13,36 @@
<div class="width-100 overflow-y-auto height-100" > <div class="width-100 overflow-y-auto height-100" >
<ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar> <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
<ion-list *ngIf="taskslist.length >= 1"> <ion-list *ngIf="taskslist.length >= 1">
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of taskslist" *ngFor = "let task of taskslist"
(click)="goToExpediente(task.SerialNumber)" (click)="goToExpediente(task.SerialNumber)"
> >
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div> </div>
<div class="exp-icon"> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon> <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label></label> <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div> </div>
</div> </div>
<div class="exp-bottom-detail"> <div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label> <div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div> </div>
</div> </div>
</ion-item> </div>
</ion-list> </ion-list>
<div *ngIf="skeletonLoader && taskslist.length == 0"> <div *ngIf="skeletonLoader && taskslist.length == 0">
@@ -100,7 +100,12 @@ ion-item{
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -108,47 +113,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -22,29 +22,36 @@
<div > <div >
<ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar> <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
<ion-list *ngIf="taskslist.length >= 1"> <ion-list *ngIf="taskslist.length >= 1">
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of taskslist" *ngFor = "let task of taskslist"
(click)="goToExpediente(task.SerialNumber)" (click)="goToExpediente(task.SerialNumber)"
> >
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div> </div>
<div class="exp-icon"> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon> <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label></label> <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div> </div>
</div> </div>
<div class="exp-bottom-detail"> <div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label> <div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div> </div>
</div> </div>
</ion-item> </div>
</ion-list> </ion-list>
</div> </div>
@@ -100,7 +100,12 @@ ion-item{
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -108,47 +113,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -34,68 +34,75 @@
<ion-list *ngSwitchCase="'parecer'"> <ion-list *ngSwitchCase="'parecer'">
<!-- *ngFor = "let task of parecerList; let i = index" <!-- *ngFor = "let task of parecerList; let i = index"
(click)="viewExpedientDetail(task.SerialNumber)" --> (click)="viewExpedientDetail(task.SerialNumber)" -->
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of parecerList" *ngFor = "let task of parecerList"
(click)="goToPedido(task.SerialNumber)" (click)="goToPedido(task.SerialNumber)"
> >
<!-- (click)="viewExpedientDetail(task.SerialNumber)" --> <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label></label>
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</ion-item> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list> </ion-list>
</div> </div>
<div *ngIf="deferimentoList.length >= 1"> <div *ngIf="deferimentoList.length >= 1">
<ion-list *ngSwitchCase="'deferimento'"> <ion-list *ngSwitchCase="'deferimento'">
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding ion-no-margin cursor-pointer"
*ngFor = "let task of deferimentoList" *ngFor = "let task of deferimentoList"
(click)="goToPedido(task.SerialNumber)" (click)="goToPedido(task.SerialNumber)"
> >
<!-- (click)="viewExpedientDetail(task.SerialNumber)" --> <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div>
<div class="exp-remetente">
<ion-label>{{task.Remetente}}</ion-label>
</div>
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-icon">
<ion-menu-button style="width: 35px; height: 41px;" autoHide="false">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
</ion-menu-button>
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label>
</div>
</div> </div>
</ion-item> <div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div>
</div>
</ion-list> </ion-list>
</div> </div>
@@ -97,10 +97,14 @@ ion-item{
font-size: 12px; font-size: 12px;
padding-right: 18px; padding-right: 18px;
} }
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -108,47 +112,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%; 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-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{
float: left; float: left;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 12pt;
font-weight: 700; font-weight: 700;
color: #0d89d1; color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%;
overflow: auto;
.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;
}
}
.exp-bottom-detail{
font-size: 8pt;
width: 100%;
overflow: auto;
padding-left: 3px;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;
@@ -175,16 +220,3 @@ ion-item{
float: right; float: right;
margin-right: 10px; margin-right: 10px;
} }
.exp-workflow{
float: left;
margin-left: 15px;
.label{
border-radius: 20px;
background: #ffb703;
font-size: 12px;
float: right;
padding: 2.5px 13.5px 2.5px 13.5px;
color: #fff;
}
}
@@ -21,33 +21,37 @@
<div class="width-100 overflow-y-auto height-100"> <div class="width-100 overflow-y-auto height-100">
<ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar> <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
<ion-list *ngIf="pendentesList.length >= 1"> <ion-list *ngIf="pendentesList.length >= 1">
<ion-item <div
class="expediente ion-no-padding cursor-pointer" class="expediente ion-no-padding cursor-pointer"
*ngFor = "let task of pendentesList" *ngFor = "let task of pendentesList"
(click)="viewTaskDetails(task.SerialNumber, task.WorkflowName, task)" (click)="viewTaskDetails(task.SerialNumber, task.WorkflowName, task)"
> >
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" --> <!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
<div class="item width-100"> <div class="item width-100">
<div class="exp-top-detail"> <div class="exp-top-detail">
<div class="exp-date"> <div class="subject">
<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.activityInstanceName}}</span>
</div>
<div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<ion-label>{{ task.Folio }}</ion-label> <ion-label>{{ task.Folio }}</ion-label>
</div> </div>
<div class="exp-icon">
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
</div>
</div>
<div class="exp-bottom-detail">
<div class="exp-remetente">
<ion-label>{{task.Senders}}</ion-label>
</div>
</div>
<div class="exp-middle-detail">
<div class="exp-workflow">
<span class="label">{{task.activityInstanceName}}</span>
</div>
<div class="exp-date">
<ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
</div>
</div>
</div> </div>
</ion-item> </div>
</ion-list> </ion-list>
<div <div
@@ -100,7 +100,12 @@ ion-item{
/* New CSS */ /* New CSS */
.expediente{ .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{ .exp-list-item{
//width: 368px; //width: 368px;
@@ -108,61 +113,88 @@ ion-item{
/* border-bottom: 1px solid gray; */ /* border-bottom: 1px solid gray; */
margin: 10px auto; margin: 10px auto;
} }
.exp-top-detail{ .exp-top-detail{
width: 100%;
float: left;
font-family: Roboto;
font-size: 12pt;
font-weight: 700;
color: #0d89d1;
padding-left: 3px;
.subject{
width: 84%;
float: left;
}
.exp-icon{
width: fit-content;
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-middle-detail, .exp-bottom-detail{
margin-bottom: 5px;
}
.exp-middle-detail{
font-size: 12pt;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
} .exp-workflow{
.exp-date{ float: left;
width: auto; margin: 0 !important;
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{ .label{
border-radius: 20px; border-radius: 15px;
background: #ffb703; background: #ffb703;
font-size: 12px; /* 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; 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-bottom-detail{
float: left; font-size: 8pt;
font-family: Roboto; width: 100%;
font-size: 16px; overflow: auto;
font-weight: 700; padding-left: 3px;
color: #0d89d1;
.exp-remetente{
//width: 200px;
font-family: Roboto;
/* font-size: 13px; */
font-weight: normal;
color: #000000;
float: left;
/* border: 1px solid red; */
}
} }
.div-top-header{ .div-top-header{
width: 400px; width: 400px;