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

Added styles to page event-detail, attendees and attachments

Browse Source
This commit is contained in:
Tiago Kayaya
2020-08-27 11:56:50 +01:00
parent 199533087b
commit 876be2a267
7 changed files with 161 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/agenda/agenda.page.html
+3 -19
View File
@@ -16,22 +16,6 @@
</ion-segment>
</ion-toolbar>
</ion-header>
<!--
<ion-content> -->
<!-- <ion-toolbar>
<ion-segment [(ngModel)]="segment">
<ion-segment-button value="combinada">
Combinada
</ion-segment-button>
<ion-segment-button value="oficial">
Oficial
</ion-segment-button>
<ion-segment-button value="pessoal">
Pessoal
</ion-segment-button>
</ion-segment>
</ion-toolbar> -->
<ion-content>
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content
@@ -86,7 +70,7 @@
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div>
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
</div>
</div>
</ng-template>
@@ -135,7 +119,7 @@
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div>
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
</div>
</div>
</ng-template>
@@ -185,7 +169,7 @@
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div>
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
</div>
</div>
</ng-template>
src/app/pages/events/attachments/attachments.page.html
+9 -22
View File
@@ -1,7 +1,7 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button routerDirection="back">Voltar</ion-back-button>
<ion-back-button routerDirection="back" defaultHref="" icon="chevron-back"></ion-back-button>
</ion-buttons>
<ion-title>Anexos do evento</ion-title>
</ion-toolbar>
@@ -10,27 +10,14 @@
<div *ngIf="loadedEventAttachments">
<ion-list>
<ion-item-sliding>
<ion-item lines="none" *ngFor="let att of loadedEventAttachments" (click)="viewDocument(att.Link)">
<div class="div-item">
<div class="div-up">
<div class="div-icon">
<ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
</div>
<div class="div-content-attachment">
<h3>{{ att.SourceName }}</h3>
<p>{{ att.CreateDate }}</p>
<p>{{ att.Description }}</p>
</div>
</div>
<div class="div-botton">
<div class="div-botton-left">
<ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
</div>
<div class="div-botton-middle">
<p class="item-list-small">{{ att.Stakeholders }}</p>
</div>
</div>
</div>
<ion-item class="main-item" lines="none" *ngFor="let att of loadedEventAttachments" (click)="viewDocument(att.Link)">
<ion-icon style="zoom:1.5" class="ion-icon-attach" name="attach"></ion-icon>
<ion-label class="div-content-attachment">
<h3 class="h3">{{ att.SourceName }}</h3>
<p>{{ att.Description }}</p>
<p>{{ att.CreateDate }}</p>
<p class="item-list-small">{{ att.Stakeholders }}</p>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-list>
src/app/pages/events/attachments/attachments.page.scss
+25 -74
View File
@@ -1,4 +1,14 @@
/* CONTENT */
ion-content{
--background: #f2f2f2;
}
.div-attach-results{
background: none;
}
ion-list, ion-item-sliding{
background: none;
}
.item-list-small{
font-size: 14px;
overflow: auto;
@@ -14,84 +24,25 @@
}
//DIV
.div-item{
width: 100%;
overflow: auto;
border-bottom: 1px solid #ccc;
margin: 10px 0 5px 0;
}
.div-up{
width: 100%;
overflow: auto;
}
.div-up h3{
margin: 0;
padding: 0;
font-size: 17px;
width: 100%;
}
.div-icon{
width: 10%;
font-size: 22px;
float: left;
color: #808080;
}
.div-icon ion-icon{
display: block;
margin: 0 auto;
}
.main-item{
margin: 15px;
/* border: 1px solid #ccc; */
border-radius: 5px;
box-shadow: 0 4px 8px 0 #ccc, 0 6px 20px 0 #f2f2f2;
}
.div-content-attachment{
width: 85%;
float: left;
padding: 0 0 0 12px;
margin:0;
padding: 10px;
}
.div-content-oficial h3, .div-content-pessoal h3{
font-size: 16pt;
/* border: 1px solid red; */
.div-content-attachment h3{
font-size: 18px;
font-weight: 700;
padding-bottom: 5px;
}
.div-content-oficial p, .div-content-pessoal p{
font-size: 14pt;
color: rgb(94, 92, 92);
padding: 0 !important;
margin: 0 !important;
}
.div-botton{
width: 100%;
overflow: auto;
margin: 10px 0 5px 0;
}
.div-botton-left{
width: 10%;
float: left;
}
.ion-icon-location{
text-align: center;
display: block;
color: #000;
font-size: 16px;
margin: 0 auto;
}
.div-botton-middle{
width: 75%;
float: left;
margin-top: 0.5px;
}
.div-botton-middle p{
padding: 0;
margin: 0;
}
.div-botton-right{
width: 10%;
float: left;
margin: 0;
padding: 0;
}
.ion-icon-attach{
color: #666666;
font-size: 20px;
ion-item ion-icon{
--border-color: red;
}
/* Custom Skeleton Line Height and Margin */
.custom-skeleton ion-skeleton-text {
line-height: 13px;
src/app/pages/events/attendees/attendees.page.html
+12 -30
View File
@@ -2,9 +2,6 @@
<ion-toolbar>
<ion-title>Intervenientes</ion-title>
</ion-toolbar>
<ion-button (click)="addAttendees()" expand="block">
<ion-label>Adicionar intervenientes</ion-label>
</ion-button>
<ion-toolbar>
<ion-segment [(ngModel)]="segment">
<ion-segment-button value="true">
@@ -17,42 +14,27 @@
</ion-toolbar>
</ion-header>
<ion-content>
<div [ngSwitch]="segment" *ngFor="let attendee of eventAttendees">
<ion-item-group>
<ion-button shape="round" (click)="addAttendees()" expand="block">
<ion-label>Adicionar intervenientes</ion-label>
</ion-button>
</ion-item-group>
<ion-item-group [ngSwitch]="segment" *ngFor="let attendee of eventAttendees">
<ion-list *ngSwitchCase="attendee.IsRequired.toString()">
<ion-item-sliding>
<ion-item-options side="end">
<ion-item-option color="danger" (click)="removeAttendee(attendee)">Delete</ion-item-option>
</ion-item-options>
<ion-item lines="none">
<div class="div-item">
<div class="div-up">
<div class="div-content-attachment">
<h3>{{ attendee.Name }}</h3>
<p>{{ attendee.EmailAddress }}</p>
</div>
</div>
</div>
<ion-icon slot="start" name="person"></ion-icon>
<ion-label>
<h3>{{ attendee.Name }}</h3>
<p>{{ attendee.EmailAddress }}</p>
</ion-label>
</ion-item>
</ion-item-sliding>
<!-- <ion-item-sliding>
<ion-item-options side="end">
<ion-item-option color="danger" (click)="removeAttendee(attendee)">
Remover
</ion-item-option>
</ion-item-options>
<ion-item lines="none" *ngFor="let attendee of showAttendees">
<div class="div-item">
<div class="div-up">
<div class="div-content-attachment">
<h3>{{ attendee.Name }}</h3>
<p>{{ attendee.EmailAddress }}</p>
</div>
</div>
</div>
</ion-item>
</ion-item-sliding> -->
</ion-list>
</div>
</ion-item-group>
</ion-content>
<ion-footer class="ion-no-border">
<ion-toolbar color="primary">
src/app/pages/events/attendees/attendees.page.scss
+11
View File
@@ -0,0 +1,11 @@
ion-item-group{
margin: 15px;
}
ion-item{
border-bottom:1px solid #ccc;
}
ion-button{
width: 90%;
margin: 0 auto;
margin-bottom: 15px;
}
src/app/pages/events/event-detail/event-detail.page.html
+32 -6
View File
@@ -22,11 +22,11 @@
<ion-label position="stacked">Localização</ion-label>
<ion-input [(ngModel)]='loadedEvent.Location'></ion-input>
</ion-item>
<ion-item-sliding>
<!-- <ion-item-sliding>
<ion-item (click)="openAttendees()">
<ion-label position="stacked">Pessoas</ion-label>
</ion-item>
</ion-item-sliding>
</ion-item-sliding> -->
<ion-item>
<ion-label position="stacked">Calendário</ion-label>
<ion-input [(ngModel)]='loadedEvent.CalendarName'></ion-input>
@@ -43,18 +43,44 @@
<ion-label position="stacked">Data Fim</ion-label>
<ion-input [(ngModel)]='loadedEvent.EndDate'></ion-input>
</ion-item>
<ion-item-sliding>
<!-- <ion-item-sliding>
<ion-item
[routerLink]="['/home/attachments', loadedEvent.EventId]">
<ion-label position="stacked">Anexos</ion-label>
</ion-item>
</ion-item-sliding>
</ion-item-sliding> -->
<div class="div-card-button">
<ion-card (click)="openAttendees()">
<ion-card-header>
<ion-card-title center>
<div class="center">
<ion-icon name="person"></ion-icon>
</div>
</ion-card-title>
</ion-card-header>
<ion-card-content class="center">
Intervenientes
</ion-card-content>
</ion-card>
<ion-card [routerLink]="['/home/attachments', loadedEvent.EventId]">
<ion-card-header>
<ion-card-title center>
<div class="center">
<ion-icon name="attach"></ion-icon>
</div>
</ion-card-title>
</ion-card-header>
<ion-card-content class="center">
Anexos
</ion-card-content>
</ion-card>
</div>
</ion-item-group>
</ion-content>
<ion-footer class="ion-no-border">
<div class="event-detail-buttons">
<ion-button fill="outline" class="ion-button-left" (click)="deleteConfirm()">Apagar</ion-button>
<ion-button class="ion-button-right" (click)="Save()">Gravar</ion-button>
<ion-button shape="round" fill="outline" class="ion-button-left" (click)="deleteConfirm()">Apagar</ion-button>
<ion-button shape="round" class="ion-button-right" (click)="Save()">Gravar</ion-button>
</div>
</ion-footer>
src/app/pages/events/event-detail/event-detail.page.scss
+69 -43
View File
@@ -1,50 +1,76 @@
.div-item{
width: 100%;
overflow: auto;
border-bottom: 1px solid #ccc;
margin: 10px 0 5px 0;
}
.div-up{
width: 100%;
overflow: auto;
}
.div-up h3{
margin: 0;
padding: 0;
font-size: 17px;
width: 100%;
}
.div-icon{
width: 10%;
font-size: 22px;
float: left;
color: #808080;
}
.div-icon ion-icon{
display: block;
margin: 0 auto;
}
.div-content-attachment{
width: 85%;
float: left;
padding: 0 0 0 12px;
}
.ion-icon-attach{
color: #666666;
font-size: 20px;
}
ion-item-group{
margin: 15px;
}
.btn-attach{
margin: 15px 0 0 0;
--color: #333;
--border-color:#333;
}
.div-card-button{
width: 100%;
overflow: auto;
padding: 0 !important;
}
ion-card{
margin: 2.5% !important;
width: 45%;
float: left;
}
.center{
text-align: center;
float: center;
}
/* FFOTER */
.event-detail-buttons{
width: 80%;
margin: 10px auto;
width: 90%;
margin: 10px auto;
}
.event-detail-buttons ion-button{
width: 40%;
width: 45%;
margin-bottom: 15px;
}
.ion-button-left{
float: left;
background: none;
float: left;
background: none;
}
.ion-button-right{
float: right;
}
.div-item{
width: 100%;
overflow: auto;
border-bottom: 1px solid #ccc;
margin: 10px 0 5px 0;
}
.div-up{
width: 100%;
overflow: auto;
}
.div-up h3{
margin: 0;
padding: 0;
font-size: 17px;
width: 100%;
}
.div-icon{
width: 10%;
font-size: 22px;
float: left;
color: #808080;
}
.div-icon ion-icon{
display: block;
margin: 0 auto;
}
.div-content-attachment{
width: 85%;
float: left;
padding: 0 0 0 12px;
}
.ion-icon-attach{
color: #666666;
font-size: 20px;
}
float: right;
}