Updated feed page

This commit is contained in:
Kayaya
2020-08-07 10:31:33 +01:00
parent 937ba8b579
commit b749731571
7 changed files with 338 additions and 21 deletions
+177 -3
View File
@@ -1,9 +1,183 @@
<ion-header>
<ion-header translucent="true">
<!-- <ion-buttons *ngIf="!showSearchbar" slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons> -->
<ion-toolbar>
<ion-title>feed</ion-title>
<app-custom-header></app-custom-header>
<ion-segment *ngIf="ios" [(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>
<!-- TABS -->
<ion-toolbar *ngIf="!ios">
<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-header>
<ion-content>
<!-- List of Text Items -->
<div [ngSwitch]="segment">
<ion-list *ngSwitchCase="'combinada'">
<ion-item-group>
<ion-item-divider>
<ion-label>8:00 am</ion-label>
</ion-item-divider>
<ion-item-sliding>
<ion-item lines="none">
<div class="div-item">
<div class="div-up">
<div class="div-icon">
<ion-icon slot="start" name="chatbox"></ion-icon>
</div>
<div class="div-content">
<h3>Reunião de Conselho de Ministros</h3>
<p>08:30 - 10:30</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">Luanda, Palácio presidencial</p>
</div>
<div class="div-botton-right">
<ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
</div>
</div>
</div>
</ion-item>
<ion-item-divider>
<ion-label>9:00 am</ion-label>
</ion-item-divider>
<ion-item lines="none">
<div class="div-item">
<div class="div-up">
<div class="div-icon">
<ion-icon slot="start" name="chatbox"></ion-icon>
</div>
<div class="div-content">
<h3>Conference call Particular</h3>
<p>11:00 - 12:30</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">Luanda, Palácio presidencial</p>
</div>
<div class="div-botton-right">
<ion-icon class="ion-icon-attach" slot="end" name="attach"></ion-icon>
</div>
</div>
</div>
</ion-item>
</ion-item-sliding>
</ion-item-group>
</ion-list>
<!-- OFICIAL -->
<ion-list *ngSwitchCase="'oficial'">
<ion-item-group>
<ion-item-sliding>
<ion-item-divider>
<ion-label>8:00 am</ion-label>
</ion-item-divider>
<ion-item lines="none">
<div class="div-item">
<div class="div-up">
<div class="div-icon">
<ion-icon slot="start" name="chatbox"></ion-icon>
</div>
<div class="div-content">
<h3>Reunião de Conselho de Ministros</h3>
<p>08:30 - 10:30</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">Luanda, Palácio presidencial</p>
</div>
<div class="div-botton-right">
<ion-icon class="ion-icon-attach" slot="end" name="document-attach"></ion-icon>
</div>
</div>
</div>
</ion-item>
<!--
<ion-item lines="none">
<ion-icon slot="start" name="chatbox"></ion-icon>
<ion-label>
<h3>Conference call Particular</h3>
<p>11:00 - 12:30</p>
</ion-label>
</ion-item>
<ion-item class="ion-item-class" lines="none">
<ion-icon class="ion-icon-size" slot="start" name="location"></ion-icon>
<ion-label class="label-text">
<p class="item-list-small">Luanda, Palácio presidencial</p>
</ion-label>
<ion-icon class="ion-icon-size" slot="end" name="attach-outline"></ion-icon>
</ion-item>
-->
</ion-item-sliding>
</ion-item-group>
</ion-list>
<ion-list *ngSwitchCase="'pessoal'">
<ion-item-group>
<ion-item-sliding>
<ion-item-divider>
<ion-label>9:00 am</ion-label>
</ion-item-divider>
<ion-item lines="none">
<div class="div-item">
<div class="div-up">
<div class="div-icon">
<ion-icon slot="start" name="chatbox"></ion-icon>
</div>
<div class="div-content">
<h3>Conference call Particular</h3>
<p>11:00 - 12:30</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">Luanda, Palácio presidencial</p>
</div>
<div class="div-botton-right">
<ion-icon class="ion-icon-attach" slot="end" name="document-attach"></ion-icon>
</div>
</div>
</div>
</ion-item>
</ion-item-sliding>
</ion-item-group>
</ion-list>
</div>
</ion-content>
+91
View File
@@ -0,0 +1,91 @@
/* CONTENT */
.item-list-small{
font-size: 11px;
overflow: auto;
}
.ion-item-class{
padding: 0;
}
.label-text{
width: 100%;
padding: 0;
margin: 0;
}
//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: 15px;
width: 100%;
}
.div-icon{
width: 10%;
font-size: 20px;
float: left;
color: #808080;
}
.div-icon ion-icon{
display: block;
margin: 0 auto;
}
.div-content{
width: 85%;
float: left;
border-left: 2px solid orange;
padding: 0 0 0 5px;
}
.div-content p{
font-size: 10.5pt;
color: rgb(94, 92, 92);
padding: 0;
margin: 0;
}
.div-botton{
width: 100%;
overflow: auto;
margin: 5px 0 5px 0;
}
.div-botton-left{
width: 10%;
float: left;
}
.ion-icon-location{
text-align: center;
display: block;
color: #000;
font-size: 14px;
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: 18px;
}
+4
View File
@@ -7,9 +7,13 @@ import { Component, OnInit } from '@angular/core';
})
export class FeedPage implements OnInit {
segment:string;
constructor() { }
ngOnInit() {
//Inicializar segment
this.segment = "combinada";
}
}