1-Added logo to login page. 2-Increase the font at home and login page. 3-customized the page according to the feedback on our last meeting

This commit is contained in:
Tiago Kayaya
2020-08-17 14:56:42 +01:00
parent 06d1ec21db
commit 4f166bf0cf
9 changed files with 125 additions and 60 deletions
+1 -1
View File
@@ -40,7 +40,7 @@
<ion-item class="radio-button" lines="none"> <ion-item class="radio-button" lines="none">
<ion-label>Pessoal</ion-label> <ion-label>Pessoal</ion-label>
<ion-radio [(ngModel)]="event.type" slot="start" value="griff"></ion-radio> <ion-radio slot="start" value="griff"></ion-radio>
</ion-item> </ion-item>
</ion-radio-group> </ion-radio-group>
</ion-list> </ion-list>
+43 -18
View File
@@ -6,11 +6,9 @@
<ion-toolbar> <ion-toolbar>
<ion-title> <ion-title>
<ion-item class="ion-text-header-top" lines="none"> <ion-item class="ion-text-header-top" lines="none">
<ion-thumbnail slot="start"> <div class="div-logo">
<div class="div-logo"> <img src='assets/images/logo.png' alt='logo'>
<img src='assets/images/logo.png' alt='logo'> </div>
</div>
</ion-thumbnail>
<ion-label> <ion-label>
<h6 class="header-xsmall">Presidente da República</h6> <h6 class="header-xsmall">Presidente da República</h6>
<h2 class="header-large">GABINETE DIGITAL</h2> <h2 class="header-large">GABINETE DIGITAL</h2>
@@ -18,7 +16,10 @@
</ion-item> </ion-item>
<ion-item class="ion-text-right" lines="none"> <ion-item class="ion-text-right" lines="none">
<ion-label class="ion-text-wrap"> <ion-label class="ion-text-wrap">
<h3 class="header-medium">Bom dia Excelência <br />Presidente da República</h3> <h3 class="header-medium"> {{greetting}} Sua Excelência <br />
Minístro Director do Gabinete do<br />
Presidente da República
</h3>
<p class="p-small">{{customDate}}</p> <p class="p-small">{{customDate}}</p>
<!-- <p>{{timeDate}}</p> --> <!-- <p>{{timeDate}}</p> -->
</ion-label> </ion-label>
@@ -57,17 +58,17 @@
<div [ngSwitch]="segment"> <div [ngSwitch]="segment">
<ion-list *ngSwitchCase="'combinada'"> <ion-list *ngSwitchCase="'combinada'">
<ion-item-group> <ion-item-group>
<ion-item-divider> <!-- <ion-item-divider>
<ion-label>8:00 am</ion-label> <ion-label>8:00 am</ion-label>
</ion-item-divider> </ion-item-divider> -->
<ion-item-sliding> <ion-item-sliding>
<ion-item lines="none"> <ion-item lines="none">
<div class="div-item"> <div class="div-item">
<div class="div-up"> <div class="div-up">
<div class="div-icon"> <div class="div-icon">
<ion-icon slot="start" name="chatbox"></ion-icon> <ion-icon slot="start" name="reader"></ion-icon>
</div> </div>
<div class="div-content"> <div class="div-content-oficial">
<h3>Reunião de Conselho de Ministros</h3> <h3>Reunião de Conselho de Ministros</h3>
<p>08:30 - 10:30</p> <p>08:30 - 10:30</p>
</div> </div>
@@ -85,16 +86,40 @@
</div> </div>
</div> </div>
</ion-item> </ion-item>
<ion-item-divider> <!-- <ion-item-divider>
<ion-label>9:00 am</ion-label> <ion-label>9:00 am</ion-label>
</ion-item-divider> </ion-item-divider> -->
<ion-item lines="none"> <ion-item lines="none">
<div class="div-item"> <div class="div-item">
<div class="div-up"> <div class="div-up">
<div class="div-icon"> <div class="div-icon">
<ion-icon slot="start" name="chatbox"></ion-icon> <ion-icon slot="start" name="reader"></ion-icon>
</div> </div>
<div class="div-content"> <div class="div-content-pessoal">
<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 lines="none">
<div class="div-item">
<div class="div-up">
<div class="div-icon">
<ion-icon slot="start" name="reader"></ion-icon>
</div>
<div class="div-content-pessoal">
<h3>Conference call Particular</h3> <h3>Conference call Particular</h3>
<p>11:00 - 12:30</p> <p>11:00 - 12:30</p>
</div> </div>
@@ -128,7 +153,7 @@
<div class="div-icon"> <div class="div-icon">
<ion-icon slot="start" name="chatbox"></ion-icon> <ion-icon slot="start" name="chatbox"></ion-icon>
</div> </div>
<div class="div-content"> <div class="div-content-oficial">
<h3>Reunião de Conselho de Ministros</h3> <h3>Reunião de Conselho de Ministros</h3>
<p>08:30 - 10:30</p> <p>08:30 - 10:30</p>
</div> </div>
@@ -141,7 +166,7 @@
<p class="item-list-small">Luanda, Palácio presidencial</p> <p class="item-list-small">Luanda, Palácio presidencial</p>
</div> </div>
<div class="div-botton-right"> <div class="div-botton-right">
<ion-icon class="ion-icon-attach" slot="end" name="document-attach"></ion-icon> <ion-icon class="ion-icon-attach" slot="end" name="attach"></ion-icon>
</div> </div>
</div> </div>
</div> </div>
@@ -177,7 +202,7 @@
<div class="div-icon"> <div class="div-icon">
<ion-icon slot="start" name="chatbox"></ion-icon> <ion-icon slot="start" name="chatbox"></ion-icon>
</div> </div>
<div class="div-content"> <div class="div-content-pessoal">
<h3>Conference call Particular</h3> <h3>Conference call Particular</h3>
<p>11:00 - 12:30</p> <p>11:00 - 12:30</p>
</div> </div>
@@ -190,7 +215,7 @@
<p class="item-list-small">Luanda, Palácio presidencial</p> <p class="item-list-small">Luanda, Palácio presidencial</p>
</div> </div>
<div class="div-botton-right"> <div class="div-botton-right">
<ion-icon class="ion-icon-attach" slot="end" name="document-attach"></ion-icon> <ion-icon class="ion-icon-attach" slot="end" name="attach"></ion-icon>
</div> </div>
</div> </div>
</div> </div>
+44 -33
View File
@@ -1,47 +1,48 @@
/* .div-logo{ /* .div-logo{
width: 100px; width: 100px;
border: 1px solid blue;
} */ } */
img{ /* img{
width: 100px; width: 100px;
} border: 1px solid red;
} */
/* HEADER */ /* HEADER */
.header-medium{
font-size: 12pt;
font-family: roboto;
}
.p-small{
font-size: 9pt;
margin-top: 10px;
color:#000;
}
.ion-text-header-top{ .ion-text-header-top{
text-align: center; text-align: center;
padding-top: 20px; padding-top: 20px;
} }
.div-img{ .div-logo{
width: 98px;
}
.div-logo img{
width: 100%; width: 100%;
} }
.div-im img{ .header-large{
width: 100%; font-family: Arial, Helvetica, sans-serif;
height: 100%; font-size: 16pt;
font-weight: bold;
}
.header-medium{
font-size: 16pt;
font-family: roboto;
} }
.header-xsmall{ .header-xsmall{
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 8.5pt; font-size: 12.7pt;
font-weight: bold; font-weight: bold;
padding-bottom: 3.5px; padding-bottom: 3.5px;
margin-bottom: 3.5px; margin-bottom: 3.5px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.header-large{ .p-small{
font-family: Arial, Helvetica, sans-serif; font-size: 12pt;
font-size: 10.5pt; margin-top: 25px;
font-weight: bold; color:#000;
} }
/* CONTENT */ /* CONTENT */
.item-list-small{ .item-list-small{
font-size: 11px; font-size: 14px;
overflow: auto; overflow: auto;
} }
.ion-item-class{ .ion-item-class{
@@ -68,12 +69,12 @@ img{
.div-up h3{ .div-up h3{
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 15px; font-size: 17px;
width: 100%; width: 100%;
} }
.div-icon{ .div-icon{
width: 10%; width: 10%;
font-size: 20px; font-size: 22px;
float: left; float: left;
color: #808080; color: #808080;
} }
@@ -82,22 +83,32 @@ img{
margin: 0 auto; margin: 0 auto;
} }
.div-content{ .div-content-oficial{
width: 85%; width: 85%;
float: left; float: left;
border-left: 2px solid orange; border-left: 3px solid #cab0dc;
padding: 0 0 0 5px; padding: 0 0 0 12px;
} }
.div-content p{ .div-content-pessoal{
font-size: 10.5pt; width: 85%;
float: left;
border-left: 3px solid #cbeecb;
padding: 0 0 0 12px;
}
.div-content-oficial h3, .div-content-pessoal h3{
font-size: 16pt;
/* border: 1px solid red; */
}
.div-content-oficial p, .div-content-pessoal p{
font-size: 14pt;
color: rgb(94, 92, 92); color: rgb(94, 92, 92);
padding: 0; padding: 0 !important;
margin: 0; margin: 0 !important;
} }
.div-botton{ .div-botton{
width: 100%; width: 100%;
overflow: auto; overflow: auto;
margin: 5px 0 5px 0; margin: 10px 0 5px 0;
} }
.div-botton-left{ .div-botton-left{
width: 10%; width: 10%;
@@ -107,7 +118,7 @@ img{
text-align: center; text-align: center;
display: block; display: block;
color: #000; color: #000;
font-size: 14px; font-size: 16px;
margin: 0 auto; margin: 0 auto;
} }
.div-botton-middle{ .div-botton-middle{
@@ -127,6 +138,6 @@ img{
} }
.ion-icon-attach{ .ion-icon-attach{
color: #666666; color: #666666;
font-size: 18px; font-size: 20px;
} }
+15 -1
View File
@@ -16,6 +16,7 @@ export class FeedPage implements OnInit {
+ ( this.months[this.today.getMonth()]); + ( this.months[this.today.getMonth()]);
/* Setting appropriate greeting according to the time */ /* Setting appropriate greeting according to the time */
grettings = ["Bom dia", "Boa tarde", "Boa noite"]; grettings = ["Bom dia", "Boa tarde", "Boa noite"];
greetting='';
/* hora /* hora
Dia 06 - 12:00 Dia 06 - 12:00
Tarde 12:01 - 18:00 Tarde 12:01 - 18:00
@@ -23,7 +24,19 @@ export class FeedPage implements OnInit {
*/ */
timeDate = this.today.getHours() + ":" + this.today.getMinutes(); timeDate = this.today.getHours() + ":" + this.today.getMinutes();
showGreeting(){ showGreeting(){
if(this.today.getHours() >= 11 && this.today.getMinutes() >=) if(this.today.getHours() >= 6 && this.today.getHours() < 12){
console.log(this.grettings[0]+this.today.getHours());
this.greetting = this.grettings[0];
}
else if(this.today.getHours() >= 12 && this.today.getHours() < 18){
console.log(this.grettings[1]+this.today.getHours());
this.greetting = this.grettings[1];
}
else /* if(this.today.getHours() < 6 && this.today.getHours() >= 18) */{
console.log(this.grettings[2]+this.today.getHours());
this.greetting = this.grettings[2];
}
} }
segment:string; segment:string;
@@ -33,6 +46,7 @@ export class FeedPage implements OnInit {
ngOnInit() { ngOnInit() {
//Inicializar segment //Inicializar segment
this.segment = "combinada"; this.segment = "combinada";
this.showGreeting();
} }
} }
+3 -3
View File
@@ -1,17 +1,17 @@
<ion-content> <ion-content>
<div class="wrapper"> <div class="wrapper">
<div class="div-logo"> <div class="div-logo">
<img src='assets/images/logo.png' alt='logo'> <img src='assets/images/fullLogo.png' alt='logo'>
</div> </div>
<h2 class="center">Iniciar a sessão</h2> <h2 class="center">Iniciar a sessão</h2>
<form> <form>
<ion-list> <ion-list>
<ion-item> <ion-item>
<ion-label position="stacked">Username</ion-label> <ion-label position="stacked">Username ou email</ion-label>
<ion-input type="text" name="username" [(ngModel)]="postData.username"></ion-input> <ion-input type="text" name="username" [(ngModel)]="postData.username"></ion-input>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label position="stacked">Password</ion-label> <ion-label position="stacked">Palavra-passe</ion-label>
<ion-input type="password" name="password" [(ngModel)]="postData.password"></ion-input> <ion-input type="password" name="password" [(ngModel)]="postData.password"></ion-input>
</ion-item> </ion-item>
<ion-item> <ion-item>
+17 -2
View File
@@ -2,9 +2,24 @@
margin: 0 auto; margin: 0 auto;
} }
.div-logo{ .div-logo{
width: 100px; width: 270px;
margin: 0 auto; margin: 0 auto;
padding-bottom: 15px;
} }
.div-logo img{ .div-logo img{
width: 100px; width: 100%;
}
form{
/* border: 1px solid red; */
padding: 10px;
}
.wrapper ion-label{
font-size: 20px;
}
.wrapper ion-input{
font-size: 22px;
}
.wrapper ion-button{
font-size: medium;
margin-top: 25px;
} }
Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

+1 -1
View File
@@ -12,7 +12,7 @@
<meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" /> <link rel="icon" type="image/x-icon" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios --> <!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />