Skip to content

Commit 161870c

Browse files
csocratecsocrate
committed
Add native select boxes + add search icon in input custom select boxes
1 parent 7c23f92 commit 161870c

File tree

7 files changed

+92
-36
lines changed

7 files changed

+92
-36
lines changed

‎assets/css/style.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/scss/bootstrap-override/_utilities.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ $utilities: (
1111
property: width,
1212
class: w,
1313
values: (
14+
1: 1%,
1415
25: 25%,
1516
50: 50%,
1617
75: 75%,

‎assets/scss/bootstrap-override/_variables.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ $container-max-widths: (
4545

4646
//== Components ==
4747
//
48-
// Card, close button
48+
// Card, close button, form input
4949

5050
$card-border-radius: 1.5rem;
5151
$enable-shadows: true;
@@ -57,13 +57,17 @@ $card-subtitle-color: $tertiary;
5757

5858
$btn-close-opacity: 1;
5959

60+
$input-focus-border-color: $grey;
61+
$input-focus-box-shadow: transparent;
62+
6063
//== Utilities ==
6164
//
6265
// Position, spacing
6366

6467
$position-values: (
6568
0: 0,
6669
5: 5%,
70+
10: 10%,
6771
35: 35%,
6872
50: 50%,
6973
100: 100%

‎index.html

Lines changed: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ <h1 class="d-flex flex-column align-items-center font-monospace text-uppercase t
8181
</div>
8282
</section> <!-- End Banner section -->
8383
<!-- Recipes wrapper section -->
84-
<section class="recipes-wrapper">
84+
<div class="recipes-wrapper">
8585
<div class="container-xxl py-4">
8686
<!-- Filters -->
8787
<div class="row d-flex align-items-center mb-5">
@@ -90,7 +90,7 @@ <h1 class="d-flex flex-column align-items-center font-monospace text-uppercase t
9090
<div class="row">
9191
<!-- Ingredients dropdown -->
9292
<div class="col-12 col-md-4 col-lg-2">
93-
<div class="position-relative mb-3 ">
93+
<div class="position-relative mb-3">
9494
<button
9595
class="btn btn-lg d-flex justify-content-between w-100 py-3 border-white bg-white"
9696
data-bs-toggle="dropdown"
@@ -102,28 +102,31 @@ <h1 class="d-flex flex-column align-items-center font-monospace text-uppercase t
102102
Ingrédients
103103
<span class="fa-solid fa-chevron-down mt-1" aria-hidden="true"></span>
104104
</button>
105+
<select id="ingredients" name="ingredients" class="form-select position-absolute top-0 start-50 z-n1 w-1 h-100 p-0 opacity-0" title="Sélectionner" aria-label="Tri par ingrédient">
106+
</select>
105107
<ul
106108
id="ingredients_list"
107109
role="listbox"
108110
class="dropdown-menu w-100 h-300px m-auto border-top-0 overflow-hidden bg-white border-white">
109-
<li class="display-inline pb-3 position-relative">
110-
<label
111-
for="search_ingredient"
112-
class="position-absolute z-n1 opacity-0">
113-
Recherche par ingrégrient
114-
</label>
115-
<input
116-
id="search_ingredient"
117-
type="search"
118-
class="form-control w-90 mx-auto bg-white"
119-
aria-label="Text input with dropdown button">
120-
</li>
111+
<li class="display-inline position-relative pb-3">
112+
<label
113+
for="search_ingredient"
114+
class="position-absolute z-n1 opacity-0">
115+
Tri par ingrégrient
116+
</label>
117+
<input
118+
id="search_ingredient"
119+
type="search"
120+
class="form-control w-90 mx-auto rounded-0 opacity-50 bg-white"
121+
aria-label="Filtrer par ingrégrient">
122+
<span class="fa-solid fa-magnifying-glass position-absolute bottom-50 end-10 opacity-25" aria-hidden="true"></span>
123+
</li>
121124
</ul>
122125
</div>
123126
</div> <!-- End Ingredients dropdown -->
124127
<!-- Appliances dropdown -->
125128
<div class="col-12 col-md-4 col-lg-2">
126-
<div class="position-relative mb-3 ">
129+
<div class="position-relative mb-3">
127130
<button
128131
class="btn btn-lg d-flex justify-content-between w-100 py-3 border-white bg-white"
129132
data-bs-toggle="dropdown"
@@ -135,21 +138,24 @@ <h1 class="d-flex flex-column align-items-center font-monospace text-uppercase t
135138
Appareils
136139
<span class="fa-solid fa-chevron-down mt-1" aria-hidden="true"></span>
137140
</button>
141+
<select id="appliances" name="appliances" class="form-select position-absolute top-0 start-50 z-n1 w-1 h-100 p-0 opacity-0" title="Sélectionner" aria-label="Tri par appareil">
142+
</select>
138143
<ul
139144
id="appliances_list"
140145
role="listbox"
141146
class="dropdown-menu w-100 h-300px m-auto border-top-0 overflow-hidden bg-white border-white">
142-
<li class="display-inline pb-3">
147+
<li class="display-inline position-relative pb-3">
143148
<label
144-
for="search_device"
149+
for="search_appliance"
145150
class="position-absolute z-n1 opacity-0">
146-
Recherche par appareil
151+
Tri par appareil
147152
</label>
148153
<input
149-
id="search_device"
154+
id="search_appliance"
150155
type="search"
151-
class="form-control w-90 mx-auto bg-white"
152-
aria-label="Text input with dropdown button">
156+
class="form-control w-90 mx-auto rounded-0 opacity-50 bg-white"
157+
aria-label="Filtrer par appareil">
158+
<span class="fa-solid fa-magnifying-glass position-absolute bottom-50 end-10 opacity-25" aria-hidden="true"></span>
153159
</li>
154160
</ul>
155161
</div>
@@ -168,21 +174,24 @@ <h1 class="d-flex flex-column align-items-center font-monospace text-uppercase t
168174
Ustensiles
169175
<span class="fa-solid fa-chevron-down mt-1" aria-hidden="true"></span>
170176
</button>
177+
<select id="ustensils" name="ustensils" class="form-select position-absolute top-0 start-50 z-n1 w-1 h-100 p-0 opacity-0" title="Sélectionner" aria-label="Tri par ustensile">
178+
</select>
171179
<ul
172180
id="ustensils_list"
173181
role="listbox"
174182
class="dropdown-menu w-100 h-300px m-auto border-top-0 overflow-hidden bg-white border-white">
175-
<li class="display-inline pb-3">
183+
<li class="display-inline position-relative pb-3">
176184
<label
177-
for="search_tool"
185+
for="search_ustensil"
178186
class="position-absolute z-n1 opacity-0">
179-
Recherche par ustensile
187+
Tri par ustensile
180188
</label>
181189
<input
182-
id="search_tool"
190+
id="search_ustensil"
183191
type="search"
184-
class="form-control w-90 mx-auto bg-white"
185-
aria-label="Text input with dropdown button">
192+
class="form-control w-90 mx-auto rounded-0 opacity-50 bg-white"
193+
aria-label="Filtrer par ustensile">
194+
<span class="fa-solid fa-magnifying-glass position-absolute bottom-50 end-10 opacity-25" aria-hidden="true"></span>
186195
</li>
187196
</ul>
188197
</div>
@@ -205,7 +214,7 @@ <h1 class="d-flex flex-column align-items-center font-monospace text-uppercase t
205214
<div class="recipe-cards row row-cols-1 row-cols-md-2 row-cols-lg-3 g-5 pb-7">
206215
</div> <!-- End Cards -->
207216
</div>
208-
</section> <!-- End Recipes wrapper section -->
217+
</div> <!-- End Recipes wrapper section -->
209218
</main>
210219
<!-- Bootstrap -->
211220
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>

‎js/RecipesApp.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ class RecipesApp {
1515
this.$ingredientsList = document.querySelector('#ingredients_list');
1616
this.$appliancesList = document.querySelector('#appliances_list');
1717
this.$ustensilsList = document.querySelector('#ustensils_list');
18+
19+
this.$ingredientsSelect = document.querySelector('select#ingredients');
20+
this.$appliancesSelect = document.querySelector('#appliances');
21+
this.$ustensilsSelect = document.querySelector('#ustensils');
1822
}
1923

2024
async init() {
@@ -62,8 +66,11 @@ class RecipesApp {
6266

6367
const ingredient = type.ingredient;
6468

65-
// Displays ustensils dropdown
69+
// Displays ingredients dropdown
6670
this.recipesPage.displayItemForDropdown(ingredient, this.$ingredientsList);
71+
72+
// Displays ingredients option
73+
this.recipesPage.displayOptionForDropdown(ingredient, this.$ingredientsSelect);
6774
});
6875
}
6976

@@ -80,8 +87,11 @@ class RecipesApp {
8087
}, [])
8188
.forEach(appliance => {
8289

83-
// Displays ustensils dropdown
90+
// Displays appliances dropdown
8491
this.recipesPage.displayItemForDropdown(appliance, this.$appliancesList);
92+
93+
// Displays appliances option
94+
this.recipesPage.displayOptionForDropdown(appliance, this.$appliancesSelect);
8595
});
8696
}
8797

@@ -98,8 +108,11 @@ class RecipesApp {
98108
}, [])
99109
.forEach(ustensil => {
100110

101-
// Displays ustensils dropdown
111+
// Displays ustensil dropdown
102112
this.recipesPage.displayItemForDropdown(ustensil, this.$ustensilsList);
113+
114+
// Displays ustensil option
115+
this.recipesPage.displayOptionForDropdown(ustensil, this.$ustensilsSelect);
103116
});
104117
}
105118

‎js/pages/RecipesPage.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212

1313
/**
14-
* Displays item for dropdown
14+
* Displays item for dropdown custom select
1515
* With data
1616
* @param {string} data
1717
* @param {HTMLElement} list
@@ -20,7 +20,18 @@
2020
const itemDropdown = new ItemDropdown();
2121
itemDropdown.createItemForDropdown(data, list);
2222
}
23-
23+
24+
/**
25+
* Displays option for dropdown select
26+
* With data
27+
* @param {string} data
28+
* @param {HTMLElement} select
29+
*/
30+
async displayOptionForDropdown(data, select) {
31+
const itemDropdown = new ItemDropdown();
32+
itemDropdown.createOptionForDropdown(data, select);
33+
}
34+
2435
/**
2536
* Displays active tag
2637
* @param {HTMLElement} item

‎js/templates/ItemDropdown.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class ItemDropdown {
1717
}
1818

1919
/**
20-
* Create item for dropdown
20+
* Create item for custom select
2121
* With data
2222
* @param {string} data
2323
* @param {HTMLElement} list
@@ -36,4 +36,22 @@ class ItemDropdown {
3636

3737
list.appendChild(li);
3838
}
39+
40+
/**
41+
* Create option for select
42+
* With data
43+
* @param {string} data
44+
* @param {HTMLElement} select
45+
*/
46+
createOptionForDropdown(data, select) {
47+
48+
const option = document.createElement('option');
49+
50+
if (data !== undefined) {
51+
52+
option.innerHTML = data;
53+
}
54+
55+
select.appendChild(option);
56+
}
3957
}

0 commit comments

Comments
 (0)