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

Merge remote-tracking branch 'origin/feature/search' into feature/home

Browse Source
This commit is contained in:
tiago.kayaya
2021-01-07 10:54:19 +01:00
parent 6b70982166 3ba9c6aac5
commit aa1e7b19dd
7 changed files with 421 additions and 28 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
+143 -11
View File
@@ -1,15 +1,147 @@
<ion-header>
<ion-toolbar>
<ion-title>Pesquisa</ion-title>
</ion-toolbar>
<!-- HEADER-->
<ion-header class="ion-no-border header-main d-flex ion-justify-content-between">
<ion-form>
<div class="d-flex search-input-container">
<div class="icon">
<ion-icon class="icon-z" slot="end" name="search"></ion-icon>
</div>
<div class="input-text d-flex ion-align-items-center">
<ion-input class="search-input" type="search" placeholder="Pesquisar"></ion-input>
</div>
<div class="icon">
<ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
</div>
</div>
</ion-form>
<div class="icon-z icon-most-searched-word-open">
<ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
</div>
<div class="profile">
<ion-icon class="icon" src="assets/images/icons-profile.svg"></ion-icon>
</div>
</ion-header>
<ion-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>
<ion-content class="content">
<!-- search result type-->
<div class="options">
<div class="container ion-justify-content-between ion-align-items-center">
<div class="d-flex ion-justify-content-center ion-text-center">
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
</div>
<div class="icon-z icon-most-searched-word-open">
<ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
</div>
</div>
</div>
</ion-form>
<div class="d-flex">
<!-- most searched word-->
<div class="most-searched-words">
<p>Palavas mais pesquisdas</p>
</div>
<!-- search result-->
<div class="search-result">
<div class="header">
<div class="d-flex ion-justify-content-between ion-align-items-center">
<div class="d-flex sort-by ion-justify-content-center">
<p><span class="order">Order por:</span><span class="order-labal">Mais Recente</span></p>
</div>
<div>
<ion-icon src="assets/images/icons-arrow-arrow-down-25.svg"></ion-icon>
</div>
</div>
</div>
<ul>
<li class="d-flex">
<div class="icon">
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
</div>
<div class="content ion-align-items-center">
<p class="result-name">title</p>
<div class="d-flex ion-justify-content-between ">
<span>MINEC, MINFIN</span>
<span>13/04/2020</span>
</div>
</div>
</li>
<li class="d-flex">
<div class="icon">
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
</div>
<div class="content">
<p class="result-name">title</p>
<div class="d-flex ion-justify-content-between">
<span>MINEC, MINFIN</span>
<span>13/04/2020</span>
</div>
</div>
</li>
<li class="d-flex">
<div class="icon">
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
</div>
<div class="content">
<p class="result-name">title</p>
<div class="d-flex ion-justify-content-between">
<span>MINEC, MINFIN</span>
<span>13/04/2020</span>
</div>
</div>
</li>
<li class="d-flex">
<div class="icon">
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
</div>
<div class="content">
<p class="result-name">title</p>
<div class="d-flex ion-justify-content-between">
<span>MINEC, MINFIN</span>
<span>13/04/2020</span>
</div>
</div>
</li>
<li class="d-flex">
<div class="icon">
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
</div>
<div class="content">
<p class="result-name">title</p>
<div class="d-flex ion-justify-content-between">
<span>MINEC, MINFIN</span>
<span>13/04/2020</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</ion-content>
src/app/pages/search/search.page.scss
+207 -15
View File
@@ -1,18 +1,210 @@
.div-search{
width: 94%;
margin: 3%;
border: 0.5px solid #333;
padding: 0 5px 0 5px;
overflow: auto;
.header-main{
padding: 5px 18px;
padding-bottom: 2px;
padding-top: 25px;
.search-input-container{
max-width: 309px;
background-color: white;
border-radius: 27.5px;
border: solid 1px #ebebeb;
.icon{
color: #797979;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
font-size: 25px;
align-items: center;
}
.icon-z{
width: 15px;
}
}
.icon-z{
display: flex;
justify-content: center;
align-items: center;
font-size: 45px;
}
.profile{
display: none;
font-size: 45px;
}
}
// search result type
.options{
margin-top: 10px;
.container{
display: flex;
.d-flex{
display: flex;
flex-wrap: wrap;
width: 100%;
flex-wrap: wrap;
.button{
width: 116px;
border: solid 1px #e9e9e9;
margin: 0px 5px;
margin-bottom: 10px;
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;
}
}
}
.icon{
display: none;
width: 45px;
height: 45px;
justify-content: center;
align-items: center;
ion-icon{
width: 25px;
}
}
}
}
.search-input{
width: 90%;
float: left;
.d-flex{
display: flex;
// search result
.search-result{
width: 100%;
border-bottom: unset;
padding: 0px 20px;
.header{
border-top: 1px solid #ebebeb;
.sort-by{
width: 100%;
.order{
font-family: Roboto;
font-size: 13px;
font-weight: 300;
color:#797979
}
.order-labal{
font-family: Roboto;
font-size: 15px;
color: #0d89d1;
margin-left: 20px;
}
}
ion-icon{
font-size: 25px;
}
}
ul{
padding: 0px;
margin: 0px;
li{
padding-top: 8px;
padding-bottom: 8px;
border-top: 1px solid #ebebeb;
display: flex;
align-items: center;
.icon{
font-size: 35px;
align-items: center;
display: flex;
}
.content{
width: 100%;
margin-left: 10px;
p{
margin: 0px;
width: 100%;
font-family: Roboto;
font-size: 15px;
color: #0d89d1;
line-height: 1.67;
}
span{
height: 15px;
font-family: Roboto;
font-size: 13px;
font-weight: 300;
color: #797979;
}
}
}
}
}
// most searched word
.most-searched-words{
width: 400px;
display: none;
p{
height: 24px;
font-family: Roboto;
font-size: 20px;
text-align: center;
color: black;
}
}
}
@media only screen and (min-width: 1024px) {
.header-main {
background-color: #0782c9;
.profile{
display: inline-block;
}
.icon-most-searched-word-open{
display: none !important;
}
}
.options{
.container{
border-bottom: 1px solid #ebebeb;
.icon{
display: flex;
}
}
padding: 0px 20px;
}
.most-searched-words{
display: inline-block !important;
}
.search-result{
border-left: 1px solid #d8d8d8;
.header{
border-top: unset !important;
}
}
}
.icon-search{
width: 8%;
padding: 8px 3px 5px 2px;
font-size: 25px;
float: right;
}
src/assets/images/icons-arrow-arrow-down-25.svg
+13
View File
@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="#42B9FE" stroke-width="2">
<g>
<g>
<g>
<path d="M15.5 7.5L9.5 13 15.5 18.5" transform="translate(-969 -156) translate(421 151) translate(328) translate(220 5) matrix(0 -1 -1 0 25.5 25.5)"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 544 B

src/assets/images/icons-most-searched-words-open.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 transform="translate(-337 -26) translate(337 26)">
<circle cx="22.5" cy="22.5" r="22.5" fill="#E0E9EE"/>
<g>
<g stroke="#061B52" stroke-width="2" transform="translate(11 11) translate(6)">
<circle cx="7.714" cy="7.714" r="6.714"/>
<path stroke-linecap="round" d="M12.857 12.857L17.357 17.357"/>
</g>
<g fill="#061B52" transform="translate(11 11) translate(.857 15.857)">
<rect width="2" height="8" x="3" rx="1"/>
<rect width="8" height="2" y="3" rx="1"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 886 B

src/assets/images/icons-search-close.svg
+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g transform="translate(-287 -36) translate(18 24) translate(269 12)">
<path fill="#FFF" d="M5 5H12.777999999999999V6H5z"/>
<circle cx="7.778" cy="5.556" r="1.111" fill="#FFF"/>
<g>
<circle cx="12.5" cy="12.5" r="12.5" fill="#E0E9EE"/>
<g stroke="#061B52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M6.782 0.163L6.782 12.94" transform="rotate(45 2.6 16.764) rotate(-90 6.782 6.552)"/>
<path d="M6.782 0.163L6.782 12.94" transform="rotate(45 2.6 16.764)"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 940 B

src/assets/images/icons-search-document.svg
+18
View File
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g>
<g transform="translate(-20 -278) translate(20 224) translate(0 46) translate(0 8)">
<path fill="#FFF" stroke="#0782C9" d="M21.351 2.5c.415 0 .79.168 1.061.44.271.27.44.646.44 1.06h0v20.297l-1.318 1.354-1.8 1.849H7.839c-.414 0-.79-.168-1.06-.44-.272-.27-.44-.646-.44-1.06h0V4c0-.414.168-.79.44-1.06.27-.272.646-.44 1.06-.44h0z"/>
<rect width="9.73" height="1" x="9.73" y="8" fill="#0782C9" rx=".5"/>
<rect width="9.73" height="1" x="9.73" y="11" fill="#0782C9" rx=".5"/>
<rect width="9.73" height="1" x="9.73" y="14" fill="#0782C9" rx=".5"/>
<rect width="9.73" height="1" x="9.73" y="17" fill="#0782C9" rx=".5"/>
<rect width="5.351" height="1" x="9.73" y="20" fill="#0782C9" rx=".5"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB