Add responsiveness to edit event component in agenda

This commit is contained in:
Peter Maquiran
2021-03-25 11:38:59 +01:00
parent 9b71c33c7b
commit f072ff46f6
5 changed files with 33 additions and 38 deletions
@@ -16,11 +16,11 @@
<ion-input placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-item-class-2 width-100 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
</div>
<div class="ion-input-class">
<div class="ion-input-class flex-grow-1">
<ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
</div>
</div>
@@ -32,11 +32,11 @@
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-item-class-2 width-100 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<div class="ion-input-class flex-grow-1">
<ion-select disabled placeholder="Selecione agenda"
selectedText="{{postEvent.CalendarName}}"
[(ngModel)]="postEvent.CalendarName"
@@ -50,11 +50,11 @@
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-item-class-2 width-100 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<div class="ion-input-class flex-grow-1">
<ion-select placeholder="Selecione tipo"
[(ngModel)]="postEvent.Categories[0]"
selectedText="{{postEvent.Categories[0]}}"
@@ -91,11 +91,11 @@
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-item-class-2 width-100 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<div class="ion-input-class flex-grow-1">
<ion-datetime
placeholder="Fim"
[(ngModel)]="postEvent.EndDate"
@@ -112,11 +112,11 @@
</div>
<div class="container-div d-flex">
<div class="ion-item-class-2">
<div class="ion-item-class-2 width-100 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
</div>
<div class="ion-input-class">
<div class="ion-input-class flex-grow-1">
<ion-select placeholder="Selecione repetição"
[(ngModel)]="postEvent.IsRecurring"
selectedText="{{isRecurring}}"
@@ -130,12 +130,12 @@
</div>
<div class="container-div d-flex">
<div class="ion-item-class-2">
<div class="ion-item-class-2 width-100 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
</div>
<div (click)="openAttendees()" class="ion-input-class-no-height">
<div class="list-people">
<div (click)="openAttendees()" class="ion-input-class d-flex flex-grow-1 width-100 overflow-hidden">
<div class="list-people flex-grow-1">
<ion-item lines="none">
<ion-list>
<ion-label class="list-people-title">Ver ou editar participantes</ion-label>
@@ -143,7 +143,7 @@
</ion-list>
</ion-item>
</div>
<div class="add-people">
<div class="d-flex justify-center align-center font-35">
<ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</div>
@@ -151,12 +151,12 @@
</div>
<div hidden class="container-div d-flex">
<div class="ion-item-class-2">
<div class="ion-item-class-2 width-100 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
</div>
<div class="ion-input-class-no-height">
<div class="list-people">
<div class="ion-input-class d-flex flex-grow-1 width-100 overflow-hidden">
<div class="list-people flex-grow-1">
<ion-item lines="none">
<ion-list>
<ion-label class="list-people-title">Com conhecimento</ion-label>
@@ -164,7 +164,7 @@
</ion-list>
</ion-item>
</div>
<div class="add-people">
<div class="d-flex justify-center align-center font-35">
<ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</div>
@@ -172,7 +172,7 @@
</div>
<div class="container-div d-flex">
<div class="ion-item-class-2">
<div class="ion-item-class-2 width-100 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
</div>
@@ -209,7 +209,7 @@
</div>
</ion-content>
<ion-footer class="ion-no-border">
<ion-toolbar class="width-100 d-flex justify-space-between">
<ion-toolbar class="width-100 d-flex justify-space-between px-20">
<ion-buttons slot="start">
<ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
<ion-label>Cancelar</ion-label>
@@ -18,15 +18,12 @@ ion-content{
transform: translate3d(0, 1px, 0);
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
background: #fff;
.middle{
padding: 0!important;
float: left;
width: 221px;
margin: 2.5px 0 0 5px;
}
}
@@ -42,7 +39,6 @@ ion-content{
font-family: Roboto;
margin: 0 auto;
background-color: #fff;
overflow:auto;
padding: 15px 20px 0 20px;
.ion-item-container{
@@ -56,11 +52,9 @@ ion-content{
width: 100%;
margin: 0px auto;
padding: 0 !important;
overflow: auto;
}
.container-div{
margin-bottom: 15px;
overflow: auto;
}
.ion-item-class-2{
@@ -89,7 +83,6 @@ ion-content{
.ion-input-class-no-height{
border: 1px solid #ebebeb;
border-radius: 5px;
overflow: auto;
}
.list-people{
@@ -99,7 +92,6 @@ ion-content{
.add-people{
width: 45px;
float: right;
overflow: auto;
font-size: 25px;
padding: 10px;
}
@@ -136,7 +128,6 @@ ion-content{
}
.container-footer{
margin:0 auto;
overflow: auto;
}
.button-cancel {
width: 170px;
@@ -28,6 +28,7 @@ export class EditEventComponent implements OnInit {
@Input() profile:string;
@Input() selectedSegment: string;
@Input() postEvent: any;
@Output() clearContact = new EventEmitter<any>();
@Output() cloneAllmobileComponent = new EventEmitter<any>();
@@ -54,6 +55,7 @@ export class EditEventComponent implements OnInit {
close(){
// this.modalController.dismiss();
this.cloneAllmobileComponent.emit();
this.clearContact.emit();
}
save(){
@@ -68,6 +70,8 @@ export class EditEventComponent implements OnInit {
this.isEventEdited = true;
// this.modalController.dismiss(this.isEventEdited);
this.cloneAllmobileComponent.emit(this.isEventEdited);
this.clearContact.emit();
}
async openAttendees()