theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

frontend: Rechercher et trier les fonctions

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/pages/functions.js
View File

@ -14,9 +14,16 @@ const Functions = () => (
<div className="container text-center"> <div className="container text-center">
<div className="row justify-content-center"> <div className="row justify-content-center">
<div className="col-24">
<h1 className="Functions__title">Fonctions</h1> <h1 className="Functions__title">Fonctions</h1>
</div> </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>
<div className="row justify-content-center"> <div className="row justify-content-center">

13
frontend/public/css/general.css
View File

@ -60,3 +60,16 @@ a, .important {
color: var(--important); color: var(--important);
text-decoration: none; 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;
}

11
frontend/public/css/pages/functions.css
View File

@ -1,3 +1,14 @@
.Functions__title { .Functions__title {
padding: 20px 0 20px 0; 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%;
} }