mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
style home for desktop
This commit is contained in:
tiago.kayaya
@@ -1,4 +1,4 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<!-- <ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
@@ -15,56 +15,74 @@
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
</ion-header> -->
|
||||
|
||||
<ion-content>
|
||||
<div class="main-content">
|
||||
<div class="upper-content">
|
||||
<div class="content-location">
|
||||
<div class="location-detail">
|
||||
<ion-label >{{loadedEvent.Location}}</ion-label>
|
||||
</div>
|
||||
<div class="button-{{profile}}-{{loadedEvent.CalendarName}}">
|
||||
<ion-button class="button-{{profile}}-{{loadedEvent.CalendarName}}" slot="end">{{loadedEvent.CalendarName}}</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-details">
|
||||
<ion-label>
|
||||
<p>{{customDate}}</p>
|
||||
<p>das {{loadedEvent.StartDate}} às {{loadedEvent.EndDate}}</p>
|
||||
<p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
|
||||
<p *ngIf="loadedEvent.IsRecurring">Repete</p>
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-content">
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<ion-label>
|
||||
<h3>Intervenientes</h3>
|
||||
<div *ngFor="let attendee of loadedEvent.Attendees">
|
||||
<p>{{attendee.Name}}</p>
|
||||
<ion-content class="height-100">
|
||||
<div class="main-content d-flex height-100">
|
||||
<div class="content d-flex flex-column width-100">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="left">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<ion-label>
|
||||
<h3>Detalhes</h3>
|
||||
<p>{{loadedEvent.Body.Text}}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</div>
|
||||
|
||||
<div *ngIf="loadedAttachments" class="bottom-content">
|
||||
<ion-list>
|
||||
<h3>Documentos Anexados</h3>
|
||||
<div class="middle">
|
||||
<ion-label class="title">{{loadedEvent.Subject}}</ion-label>
|
||||
</div>
|
||||
<div class="div-icon">
|
||||
<ion-icon class="edit" (click)="editEvent()" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
|
||||
<ion-icon class="delete" (click)="deleteEvent()" name="trash-sharp"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upper-content">
|
||||
<div class="content-location">
|
||||
<p><span class="date">{{loadedEvent.Location}}</span><span class="label">{{loadedEvent.CalendarName}}</span></p>
|
||||
</div>
|
||||
<div class="content-details">
|
||||
<ion-label>
|
||||
<p>{{customDate}}</p>
|
||||
<p>das {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
|
||||
<p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
|
||||
<p *ngIf="loadedEvent.IsRecurring">Repete</p>
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-content">
|
||||
<h5>Intervenientes</h5>
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<ion-label *ngFor="let attach of loadedAttachments"
|
||||
(click)="viewDocument()">
|
||||
<p class="attach-title-item">{{attach.SourceName}}</p>
|
||||
<p><span class="span-left">{{attach.Stakeholders}}</span><span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yy' }}</span></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-label>
|
||||
<div *ngFor="let attendee of loadedEvent.Attendees">
|
||||
<p>{{attendee.Name}}</p>
|
||||
</div>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<h5>Detalhes</h5>
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<ion-label>
|
||||
<p [innerHTML]="loadedEvent.Body.Text"></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</div>
|
||||
|
||||
<div *ngIf="loadedAttachments" class="bottom-content">
|
||||
<ion-list>
|
||||
<h3>Documentos Anexados</h3>
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<ion-label *ngFor="let attach of loadedAttachments"
|
||||
(click)="viewDocument()">
|
||||
<p class="attach-title-item">{{attach.SourceName}}</p>
|
||||
<p><span class="span-left">{{attach.Stakeholders}}</span><span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yy' }}</span></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aside-right flex-column height-100">
|
||||
<div class="buttons">
|
||||
<button full class="btn-ok" shape="round" >Editar</button>
|
||||
<div class="solid"></div>
|
||||
<button full class="btn-delete" shape="round" >Eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
@@ -1,9 +1,9 @@
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
--padding-top:0px;
|
||||
/* --padding-top:0px;
|
||||
--padding-start: 20px;
|
||||
--padding-end: 20px;
|
||||
font-size: 18px;
|
||||
font-size: 18px; */
|
||||
}
|
||||
ion-menu{
|
||||
--height: 225px;
|
||||
@@ -13,19 +13,13 @@ ion-menu{
|
||||
--opacity: 1;
|
||||
}
|
||||
.main-header{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
background-color: #fff;
|
||||
overflow:hidden;
|
||||
padding: 30px 0px 0px 0px;
|
||||
color:#000;
|
||||
transform: translate3d(0, 1px, 0);
|
||||
|
||||
.title-content{
|
||||
padding: 0px 20px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
@@ -37,10 +31,10 @@ ion-menu{
|
||||
overflow: hidden;
|
||||
}
|
||||
.middle{
|
||||
width: 230px;
|
||||
//width: 230px;
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
margin: 2.5px 0 0 0;
|
||||
//margin: 2.5px 0 0 0;
|
||||
}
|
||||
.header-icon-right{
|
||||
width: 45px;
|
||||
@@ -74,13 +68,16 @@ ion-menu{
|
||||
|
||||
}
|
||||
.main-content{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 15px 0px 0 0px;
|
||||
|
||||
.content{
|
||||
padding: 30px 20px 0 20px !important;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.upper-content{
|
||||
margin-left: 50px;
|
||||
@@ -92,6 +89,14 @@ ion-menu{
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
|
||||
.label{
|
||||
border-radius: 20px;
|
||||
background: #ffb703;
|
||||
float: right;
|
||||
padding: 5px 13.5px 5px 13.5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.location-detail{
|
||||
@@ -188,4 +193,41 @@ ion-menu{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.aside-right{
|
||||
padding: 30px 20px 0 20px !important;
|
||||
|
||||
.arrow-right{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.arrow-right-icon{
|
||||
width: 37px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.buttons{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn-ok, .btn-cancel, .btn-delete{
|
||||
height: auto !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
width: 100% !important;
|
||||
margin-bottom: 10px !important;
|
||||
padding: 15px !important;
|
||||
}
|
||||
}
|
||||
.solid {
|
||||
display: block;
|
||||
width: 90%;
|
||||
border-top: 1px solid #ebebeb;
|
||||
margin: 0 auto !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user