mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 21:06:06 +00:00
improve style of events to approve list in desktop
This commit is contained in:
+3
-2
@@ -210,11 +210,12 @@ ion-button{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
width: 75%;
|
||||
width: 80%;
|
||||
border-right: 1px solid #d8d8d8;
|
||||
}
|
||||
|
||||
.aside-right{
|
||||
width: 25%;
|
||||
width: 20%;
|
||||
border: 1px solid red;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-header hidden class="ion-no-border px-20">
|
||||
<!-- <ion-header hidden class="ion-no-border px-20">
|
||||
<div class="header-content d-flex justify-space-between">
|
||||
<div class="header-icon-left">
|
||||
<ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
|
||||
@@ -10,7 +10,7 @@
|
||||
<ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</ion-header>
|
||||
</ion-header> -->
|
||||
<ion-menu autoHide="false" side="end" content-id="main-content">
|
||||
<ion-header>
|
||||
<ion-toolbar translucent>
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
padding: 30px 20px 0 20px !important;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
border-right: 1px solid #d8d8d8;
|
||||
|
||||
.upper-content{
|
||||
margin-left: 40px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<ion-content>
|
||||
<div class="title width-100">
|
||||
<label>Sim Eventos para Aprovação</label>
|
||||
<label>Eventos para Aprovação</label>
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="segment">
|
||||
<ion-segment-button value="MDGPR">
|
||||
@@ -17,39 +17,35 @@
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div [ngSwitch]="segment">
|
||||
<div class="main-content" [ngSwitch]="segment" *ngIf="eventsMDGPRList">
|
||||
<!-- <div class="header-content width-100"> -->
|
||||
|
||||
<!-- </div> -->
|
||||
<ion-list class="width-100" *ngSwitchCase="'MDGPR'">
|
||||
<div class="width-100" *ngIf="eventsMDGPRList">
|
||||
<ion-list>
|
||||
<ion-item-sliding>
|
||||
<ion-item class="Rectangle width-100" lines="none"
|
||||
*ngFor="let event of eventsMDGPRList" (click)="openApproveModal(event.serialNumber)">
|
||||
|
||||
<div class="content-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
|
||||
<div class="approve-event-time">
|
||||
<p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
|
||||
<p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
|
||||
</div>
|
||||
<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.Location}}</p>
|
||||
<h3>{{event.workflowInstanceDataFields.Subject}}</h3>
|
||||
</div>
|
||||
<ion-list class="width-100" *ngSwitchCase="'MDGPR'" >
|
||||
<ion-item
|
||||
class="item ion-no-padding width-100"
|
||||
*ngFor="let event of eventsMDGPRList"
|
||||
(click)="openApproveModal(event.serialNumber)">
|
||||
<div class="event-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
|
||||
<div class="approve-event-time">
|
||||
<p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
|
||||
<p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
</div>
|
||||
<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.Location}}</p>
|
||||
<h3>{{event.workflowInstanceDataFields.Subject}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-list *ngSwitchCase="'PR'">
|
||||
<div *ngIf="eventsPRList">
|
||||
<ion-item-sliding>
|
||||
<ion-item class="Rectangle" lines="none"
|
||||
*ngFor="let event of eventsPRList" (click)="openApproveModal(event.serialNumber)">
|
||||
<div class="content-pr-{{event.workflowInstanceDataFields.Agenda}}">
|
||||
<ion-list class="width-100" *ngSwitchCase="'PR'">
|
||||
<div class="width-100" *ngIf="eventsPRList">
|
||||
<ion-item
|
||||
class=" ion-no-padding width-100"
|
||||
*ngFor="let event of eventsPRList"
|
||||
(click)="openApproveModal(event.serialNumber)">
|
||||
<div class="item event-pr-{{event.workflowInstanceDataFields.Agenda}} width-100">
|
||||
<div class="approve-event-time">
|
||||
<p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
|
||||
<p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
|
||||
@@ -61,7 +57,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
</div>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
@@ -11,82 +11,80 @@
|
||||
ion-item-sliding{
|
||||
margin-top: 5px;
|
||||
}
|
||||
.Rectangle {
|
||||
//width: 360px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
|
||||
border: solid 1px #e9e9e9;
|
||||
background-color: var(--white);
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
.content-mdgpr-Oficial{
|
||||
border-radius: 5px;
|
||||
border-right: 5px solid #99e47b;
|
||||
overflow: auto;
|
||||
}
|
||||
.content-mdgpr-Pessoal{
|
||||
border-radius: 5px;
|
||||
border-right: 5px solid #958bfc;
|
||||
overflow: auto;
|
||||
}
|
||||
.content-pr-Oficial{
|
||||
border-radius: 5px;
|
||||
border-right: 5px solid #ffb703;
|
||||
overflow: auto;
|
||||
}
|
||||
.content-pr-Pessoal{
|
||||
border-radius: 5px;
|
||||
border-right: 5px solid #f05d5e;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.approve-event-time{
|
||||
float: left;
|
||||
}
|
||||
.approve-event-time p{
|
||||
width: 33px;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: var(--Antartic-grey);
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.approve-event-detail{
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.approve-event-detail p{
|
||||
//width: 250px;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.approve-event-detail h3{
|
||||
width: 250px;
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: #0d89d1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.main-content{
|
||||
margin-top: 20px;
|
||||
.item{
|
||||
--inner-padding-end: 0 !important;
|
||||
--inner-padding-top: 10px;
|
||||
--inner-padding-bottom:10px;
|
||||
}
|
||||
.event-pr-Oficial{
|
||||
background-color: var(--white);
|
||||
border-radius: 5px;
|
||||
border-right: 5px solid #99e47b;
|
||||
overflow: auto;
|
||||
}
|
||||
.event-pr-Pessoal{
|
||||
background-color: var(--white);
|
||||
border-radius: 5px;
|
||||
border-right: 5px solid #958bfc;
|
||||
overflow: auto;
|
||||
}
|
||||
.event-mdgpr-Oficial{
|
||||
border-radius: 5px;
|
||||
border-right: 5px solid #ffb703;
|
||||
overflow: auto;
|
||||
}
|
||||
.event-mdgpr-Pessoal{
|
||||
border-radius: 5px;
|
||||
border-right: 5px solid #f05d5e;
|
||||
overflow: auto;
|
||||
}
|
||||
.approve-event-time{
|
||||
float: left;
|
||||
}
|
||||
.approve-event-time p{
|
||||
width: 33px;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: var(--Antartic-grey);
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.approve-event-detail{
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.approve-event-detail p{
|
||||
//width: 250px;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.approve-event-detail h3{
|
||||
width: 250px;
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: #0d89d1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user