Added styles to page event-detail, attendees and attachments

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
@@ -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>
@@ -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;