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

Add search result options

Browse Source
This commit is contained in:
Peter Maquiran
2021-01-05 11:37:07 +01:00
parent 2695162e65
commit 40543826b7
3 changed files with 118 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/home.page.html
+2 -2
View File
@@ -24,10 +24,10 @@
<ion-icon class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
<ion-label>Acções</ion-label>
</ion-tab-button>
<!-- <ion-tab-button tab="search">
<ion-tab-button tab="search">
<ion-icon name="search"></ion-icon>
<ion-label>Pesquisa</ion-label>
</ion-tab-button> -->
</ion-tab-button>
<!-- <ion-tab-button tab="chat">
<ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
<ion-label>Chat</ion-label>
src/app/pages/search/search.page.html
+71 -5
View File
@@ -4,12 +4,78 @@
</ion-toolbar>
</ion-header>
<ion-content>
<ion-content class="content">
<ion-form>
<div class="div-search">
<ion-input class="search-input" type="search" placeholder="FMI"></ion-input>
<ion-icon class="icon-search" slot="end" name="search"></ion-icon>
</div>
<ion-grid class="search-input-container">
<ion-row class="ion-justify-content-around">
<ion-col class="icon-search-container">
<div class="icon-search-container">
<ion-icon class="icon-search" slot="end" name="search"></ion-icon>
</div>
</ion-col>
<ion-col>
<div>
<ion-input class="search-input" type="search" placeholder="FMI"></ion-input>
</div>
</ion-col>
<ion-col class="icon-search-container">
<div>
<ion-icon class="icon-search" slot="end" name="search"></ion-icon>
</div>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid class="search-result">
<ion-row class="ion-justify-content-between ion-text-center">
<ion-col >
<div class="button">
<p>Protocolos</p>
<ion-label class="label">10</ion-label>
</div>
</ion-col>
<ion-col>
<div class="button">
<p>Faturas</p>
<ion-label class="label">10</ion-label>
</div>
</ion-col>
<ion-col >
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-between ion-text-center">
<ion-col >
<div class="button">
<p>Protocolos</p>
<ion-label class="label">10</ion-label>
</div>
</ion-col>
<ion-col>
<div class="button">
<p>Faturas</p>
<ion-label class="label">10</ion-label>
</div>
</ion-col>
<ion-col >
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-form>
</ion-content>
src/app/pages/search/search.page.scss
+45 -15
View File
@@ -1,18 +1,48 @@
.div-search{
width: 94%;
margin: 3%;
border: 0.5px solid #333;
padding: 0 5px 0 5px;
overflow: auto;
}
.search-input{
width: 90%;
float: left;
.search-input-container{
border: solid 1px #ebebeb;
}
.icon-search{
width: 8%;
padding: 8px 3px 5px 2px;
font-size: 25px;
float: right;
font-size: 16px;
}
.icon-search-container, .icon-search{
width: 45px;
height: 45px;
}
.search-result{
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #ebebeb;
.button{
border: solid 1px #e9e9e9;
padding: 5px 20px;
p{
padding: 0px;
margin: 0px;
font-family: Roboto;
color: #0d89d1;
font-size: 15px;
}
.label{
font-family: Roboto;
font-size: 13px;
font-weight: 300;
color: #797979;
}
border-radius: 15px;
}
.button:hover{
background-color: #42b9fe;
color: white;
p{
color: white;
}
.label{
color: white;
}
}
}