mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-20 05:16:07 +00:00
Add search page
This commit is contained in:
Peter Maquiran
@@ -1,81 +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 class="content">
|
||||
<ion-form>
|
||||
<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 >
|
||||
<!-- 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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -1,48 +1,210 @@
|
||||
.search-input-container{
|
||||
.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-search{
|
||||
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;
|
||||
.icon{
|
||||
color: #797979;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
align-items: center;
|
||||
}
|
||||
border-radius: 15px;
|
||||
.icon-z{
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
.icon-z{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 45px;
|
||||
}
|
||||
.profile{
|
||||
display: none;
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.button:hover{
|
||||
background-color: #42b9fe;
|
||||
color: white;
|
||||
p{
|
||||
color: white;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.label{
|
||||
color: white;
|
||||
.icon{
|
||||
display: none;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
ion-icon{
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user