frontend: Rechercher et trier les fonctions

This commit is contained in:
Divlo 2020-03-19 17:19:59 +01:00
parent 4d1f31afe3
commit d66c4037db
3 changed files with 34 additions and 3 deletions

View File

@ -14,9 +14,16 @@ const Functions = () => (
<div className="container text-center">
<div className="row justify-content-center">
<div className="col-24">
<h1 className="Functions__title">Fonctions</h1>
</div>
<h1 className="Functions__title">Fonctions</h1>
</div>
<div className="Functions__search-container row justify-content-center">
<select className="form-control">
{/* TODO: API Call to fetch categories */}
<option>Toutes catégories</option>
<option className="Functions__select-option" style={{ backgroundColor: "#406880" }}> Utilitaires</option>
</select>
<input type="search" className="form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input>
</div>
<div className="row justify-content-center">

View File

@ -59,4 +59,17 @@ a:hover {
a, .important {
color: var(--important);
text-decoration: none;
}
.form-control {
display: block;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .5em;
}

View File

@ -1,3 +1,14 @@
.Functions__title {
padding: 20px 0 20px 0;
margin-bottom: 0;
}
.Functions__search-container {
margin-bottom: 50px;
}
.Functions__select-option {
color: rgb(221, 220, 220);
}
.Functions__search-input {
width: 35%;
}