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

changes on style for MD

Browse Source
This commit is contained in:
Tiago Kayaya
2020-11-27 11:59:32 +01:00
parent b103c5b19b
commit c4e27d07b1
12 changed files with 250 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/agenda/agenda.page.html
+14 -1
View File
@@ -1,6 +1,19 @@
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar class="bg-blue">
<div class="div-top-header">
<div class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</div>
</ion-toolbar>
<ion-toolbar class="bg-blue">
<ion-buttons slot="end"> <ion-buttons slot="end">
<!-- customized TOGGLE button --> <!-- customized TOGGLE button -->
<div class="toggleBox"> <div class="toggleBox">
src/app/pages/agenda/agenda.page.scss
+29 -2
View File
@@ -145,7 +145,7 @@ Calendar
*/ */
/* NEW CSS FOR TOGGLE BUTTON */ /* NEW CSS FOR TOGGLE BUTTON */
.toggleBox{ .toggleBox{
margin:20px 20px 0 0; margin:20px 12px 7px 0;
} }
input[type="checkbox"]{ input[type="checkbox"]{
position: relative; position: relative;
@@ -214,7 +214,34 @@ label{
font-size: 25px; font-size: 25px;
margin: 0 5px 0 25px; margin: 0 5px 0 25px;
padding: 0; padding: 0;
color:#000; color:#ffffff;
float: left; float: left;
} }
.div-top-header{
width: 400px;
height: 50px;
margin: 6px auto;
background-color: #0782c9;
overflow: auto;
}
.div-search{
font-size: 45px;
float: left;
margin: 0 0 0 10px
}
.div-logo{
background: transparent;
width: 150px;
margin: 2.5px 0 2.5px 71px;
float: left;
}
.div-logo img{
width: 100%;
}
.div-profile{
font-size: 45px;
float: right;
margin-right: 10px;
}
src/app/pages/events/events.page.html
+26 -22
View File
@@ -1,25 +1,29 @@
<ion-header translucent="true"> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar class="bg-blue">
<ion-item class="ion-text-header-top" lines="none"> <div class="div-top-header">
<div class="div-logo"> <div class="div-search">
<img src='assets/images/logo.png' alt='logo'> <ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div> </div>
<ion-label> <div class="div-logo">
<h6 class="header-xsmall">Presidente da República</h6> <img src='assets/images/logo-no-bg.png' alt='logo'>
<h2 class="header-large">GABINETE DIGITAL</h2> </div>
</ion-label> <div class="div-profile">
</ion-item> <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
<ion-buttons slot="end"> </div>
<div class="toggleBox"> </div>
<div (click)="changeProfile()" class="toggle">
<input type="checkbox">
<label for="" class="onbtn">PR</label>
<label for="" class="ofbtn">MDGPR</label>
</div>
</div>
</ion-buttons>
</ion-toolbar> </ion-toolbar>
<ion-toolbar> <ion-toolbar class="bg-blue">
<ion-buttons slot="end">
<div class="toggleBox">
<div (click)="changeProfile()" class="toggle">
<input type="checkbox">
<label for="" class="onbtn">PR</label>
<label for="" class="ofbtn">MDGPR</label>
</div>
</div>
</ion-buttons>
</ion-toolbar>
<ion-toolbar class="bg-blue">
<ion-label> <ion-label>
<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">
@@ -33,7 +37,7 @@
</ion-label> </ion-label>
</ion-toolbar> </ion-toolbar>
<!-- TABS --> <!-- TABS -->
<ion-toolbar > <ion-toolbar>
<ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()"> <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
<ion-segment-button value="Combinada"> <ion-segment-button value="Combinada">
Combinada Combinada
@@ -48,7 +52,7 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content >
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar> <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<ion-label> <ion-label>
<p class="p-small">{{customDate}}</p> <p class="p-small">{{customDate}}</p>
src/app/pages/events/events.page.scss
+43 -4
View File
@@ -1,27 +1,64 @@
/* HEADER */ /* HEADER */
.bg-blue{
--background:#0782c9;
background:#0782c9;
--background-color:#0782c9;
background-color:#0782c9;
color: #ffffff;
--color: #ffffff;
}
ion-toolbar{ ion-toolbar{
--background: white; --background: white;
} }
.ion-text-header-top{ .ion-text-header-top{
width: 100%; width: 100%;
--background: transparent;
text-align: center; text-align: center;
padding-top: 15px; padding-top: 15px;
color: #ffffff;
/* border: 1px solid red; */ /* border: 1px solid red; */
} }
.div-top-header{
width: 400px;
height: 50px;
margin: 6px auto;
background-color: #0782c9;
overflow: auto;
}
.div-search{
font-size: 45px;
float: left;
margin: 0 0 0 10px
}
.div-logo{ .div-logo{
width: 60px; background: transparent;
/* border: 1px solid red; */ width: 150px;
margin-right: 20px; margin: 2.5px 0 2.5px 71px;
float: left;
} }
.div-logo img{ .div-logo img{
width: 100%; width: 100%;
} }
.div-profile{
font-size: 45px;
float: right;
margin-right: 10px;
}
.ion-text-header-top p{
--background: transparent;
color: #ffffff;
}
.ion-text-right{
--background: transparent;
color: #ffffff;
}
.header-large{ .header-large{
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12.5pt; font-size: 12.5pt;
/* font-weight: 600; */ /* font-weight: 600; */
background: transparent;
color: #ffffff;
} }
.header-xsmall{ .header-xsmall{
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
@@ -30,6 +67,7 @@ ion-toolbar{
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;
background: transparent;
} }
.header-medium{ .header-medium{
font-size: 12pt; font-size: 12pt;
@@ -46,6 +84,7 @@ ion-toolbar{
color:#000; color:#000;
margin-right: 25px !important; margin-right: 25px !important;
text-align: right; text-align: right;
/* color: #ffffff; */
} }
/* CONTENT */ /* CONTENT */
src/app/pages/gabinete-digital/gabinete-digital.page.html
+14 -1
View File
@@ -1,5 +1,18 @@
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar class="bg-blue">
<div class="div-top-header">
<div class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</div>
</ion-toolbar>
<ion-toolbar class="bg-blue">
<ion-title class="header-title">Gabinete Digital</ion-title> <ion-title class="header-title">Gabinete Digital</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
src/app/pages/gabinete-digital/gabinete-digital.page.scss
+29 -1
View File
@@ -92,6 +92,34 @@ ion-label{
font-size: 25px; font-size: 25px;
margin: 0 5px 0 25px; margin: 0 5px 0 25px;
padding: 0; padding: 0;
color:#000; color:#ffffff;
float: left; float: left;
} }
.div-top-header{
width: 400px;
height: 50px;
margin: 6px auto;
background-color: #0782c9;
overflow: auto;
}
.div-search{
font-size: 45px;
float: left;
margin: 0 0 0 10px
}
.div-logo{
background: transparent;
width: 150px;
margin: 2.5px 0 2.5px 71px;
float: left;
}
.div-logo img{
width: 100%;
}
.div-profile{
font-size: 45px;
float: right;
margin-right: 10px;
}
src/app/pages/login/login.page.html
+13 -15
View File
@@ -1,21 +1,19 @@
<ion-content> <ion-content class="bg-blue">
<div class="wrapper"> <div class="wrapper">
<div class="div-logo"> <div class="div-logo">
<img src='assets/images/fullLogo.png' alt='logo'> <img src='assets/images/logo-no-bg.png' alt='logo'>
</div> </div>
<h2 class="center">Inicie a sessão</h2> <h3 class="center">Inicie a sessão</h3>
<form> <form class="form">
<ion-list> <p class="form-label">Nome de utilizador</p>
<ion-item> <ion-item class="form-input">
<ion-label position="floating">Nome de utilizador</ion-label>
<ion-input type="text" [(ngModel)]="username" name="input-username"></ion-input> <ion-input type="text" [(ngModel)]="username" name="input-username"></ion-input>
</ion-item> </ion-item>
<ion-item> <p class="form-label">Palavra-passe</p>
<ion-label position="floating">Palavra-passe</ion-label> <ion-item class="form-input">
<ion-input type="password" [(ngModel)]="password" name="input-password" ></ion-input> <ion-input type="password" [(ngModel)]="password" name="input-password" ></ion-input>
</ion-item> </ion-item>
<ion-button class="btn-ok" fill="clear" expand="block" shape="round" (click)="Login()">Iniciar</ion-button> <ion-button class="btn-ok-login" fill="clear" expand="block" shape="round" (click)="Login()">Iniciar</ion-button>
</ion-list> </form>
</form> </div>
</div>
</ion-content> </ion-content>
src/app/pages/login/login.page.scss
+30 -10
View File
@@ -2,24 +2,44 @@
margin: 0 auto; margin: 0 auto;
} }
.div-logo{ .div-logo{
width: 270px; width: 200px;
margin: 0 auto; margin: 0 auto;
padding-bottom: 15px; padding-bottom: 15px;
} }
.div-logo img{ .div-logo img{
width: 100%; width: 100%;
} }
form{
/* border: 1px solid red; */
padding: 10px;
}
.wrapper ion-label{
font-size: 20px;
}
.wrapper ion-input{ .wrapper ion-input{
font-size: 22px; font-size: 18px;
} }
.wrapper ion-button{ .wrapper ion-button{
font-size: medium; font-size: medium;
margin-top: 25px; margin-top: 18px;
} }
ion-item{
--background: transparent;
}
.form{
width: 300px;
overflow: auto;
margin: 0 auto;
}
.form-label{
margin: 15px 0 5px 0;
font-size: 15px;
}
.form-input{
--background: #fff;
/* --color:#fff; */
border-radius: 10px;
margin: 5px 0 5px 0;
}
.btn-ok-login{
width: 160px !important;
height: 45px !important;
margin: 15px auto;
padding: 10px 15px;
border-radius: 22.5px;
background-color: #42b9fe;
color: #ffffff !important;
}
src/assets/images/icons-profile.svg
+23
View File
@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="45" viewBox="0 0 45 45">
<defs>
<circle id="2dw772hiwa" cx="22.5" cy="22.5" r="22.5"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g transform="translate(-335 -26) translate(0 23) translate(335 3)">
<rect width="45" height="45" fill="#FFF" fill-opacity=".6" rx="22.5"/>
<g>
<mask id="xjc01mgdzb" fill="#fff">
<use xlink:href="#2dw772hiwa"/>
</mask>
<path fill="#42B9FE" fill-opacity=".7" d="M22.5 10.5c5.799 0 10.5 5.037 10.5 11.25 0 3.902-1.854 7.34-4.67 9.358C34.565 33.57 39 39.868 39 47.25c0 9.527-7.387 17.25-16.5 17.25S6 56.777 6 47.25c0-7.381 4.435-13.68 10.67-16.142C13.854 29.09 12 25.652 12 21.75c0-6.213 4.701-11.25 10.5-11.25z" mask="url(#xjc01mgdzb)"/>
</g>
<text fill="#FFF" fill-opacity=".7" font-family="Roboto-Light, Roboto" font-size="20" font-weight="300">
<tspan x="7.3" y="27">MD</tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/assets/images/icons-search.svg
+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45">
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g transform="translate(-20 -26) translate(0 23) translate(20 3)">
<path fill="#FFF" d="M9 9H23V10H9z"/>
<circle cx="14" cy="10" r="2" fill="#FFF"/>
<g fill="#42B9FE">
<circle cx="22.5" cy="22.5" r="22.5"/>
</g>
<g stroke="#FFF" stroke-width="2" transform="translate(14.143 14.143)">
<circle cx="7.714" cy="7.714" r="6.714"/>
<path stroke-linecap="round" d="M12.857 12.857L17.357 17.357"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 822 B

src/assets/images/logo-no-bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

src/theme/variables.scss
+10
View File
@@ -392,3 +392,13 @@
background-color: #e0e9ee; background-color: #e0e9ee;
color: #061b52 !important; color: #061b52 !important;
} }
.bg-blue{
--background:#0782c9;
background:#0782c9;
--background-color:#0782c9;
background-color:#0782c9;
color: #ffffff;
--color: #ffffff;
}