Skip to content

Commit fe7ae6e

Browse files
MaarimarMaarimar
committed
duplicated the search bar and gave it different classes to ba able to display it at different screen sizes
1 parent 7c6f411 commit fe7ae6e

3 files changed

Lines changed: 94 additions & 56 deletions

File tree

‎_includes/current-projects.html‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,10 @@ <h3 class="filters-title">
3434
<a href="#" id="search-tip-link">Search Tips</a>
3535
</div>
3636

37-
<!-- Search bar moved here to appear directly below the Search Tips link -->
38-
<form id="search-bar">
39-
<input type="text" name="Search" id="search" placeholder="Search By Keywords">
37+
<!-- Search bar moved here to appear directly below the Search Tips link on mobile -->
38+
39+
<form class="search-bar-mobile">
40+
<input type="text" name="Search" id="search-mobile" class="search-input" placeholder="Search By Keywords">
4041
<button class="search-x" aria-label="Cancel Search" tabindex="2">
4142
<svg id="search-close" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4243
<path d="M18 6L6 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -49,10 +50,25 @@ <h3 class="filters-title">
4950
</svg>
5051
</button>
5152
</form>
53+
5254
</div>
5355
</nav>
54-
56+
<!-- Projects and Filters container -->
5557
<div class="projects-and-filters">
58+
<form class="search-bar-desktop">
59+
<input type="text" name="Search" id="search-desktop" placeholder="Search By Keywords">
60+
<button class="search-x" aria-label="Cancel Search" tabindex="2">
61+
<svg id="search-close" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
62+
<path d="M18 6L6 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
63+
<path d="M6 6L18 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
64+
</svg>
65+
</button>
66+
<button class="search-glass" aria-label="Search by Keywords" tabindex="1">
67+
<svg id="search-magnify-glass" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
68+
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3248 12.8987L19.7048 18.2787C19.8939 18.468 20 18.7246 20 18.9921C19.9999 19.2596 19.8935 19.5161 19.7043 19.7052C19.515 19.8943 19.2584 20.0005 18.9909 20.0004C18.7234 20.0003 18.4669 19.894 18.2778 19.7047L12.8978 14.3247C11.2895 15.5704 9.26705 16.1566 7.24189 15.9641C5.21674 15.7716 3.341 14.8148 1.99625 13.2884C0.6515 11.7619 -0.0612416 9.78056 0.00301976 7.74729C0.0672812 5.71402 0.903718 3.7816 2.34217 2.34315C3.78063 0.904695 5.71305 0.0682577 7.74631 0.00399633C9.77958 -0.0602651 11.761 0.652477 13.2874 1.99723C14.8138 3.34198 15.7706 5.21772 15.9631 7.24287C16.1556 9.26802 15.5694 11.2905 14.3238 12.8987H14.3248ZM7.99977 13.9997C9.59107 13.9997 11.1172 13.3676 12.2424 12.2424C13.3676 11.1172 13.9998 9.59104 13.9998 7.99974C13.9998 6.40845 13.3676 4.88232 12.2424 3.7571C11.1172 2.63189 9.59107 1.99974 7.99977 1.99974C6.40847 1.99974 4.88235 2.63189 3.75713 3.7571C2.63191 4.88232 1.99977 6.40845 1.99977 7.99974C1.99977 9.59104 2.63191 11.1172 3.75713 12.2424C4.88235 13.3676 6.40847 13.9997 7.99977 13.9997Z" fill="#333333"/>
69+
</svg>
70+
</button>
71+
</form>
5672
<div class="page-contain projects-inner" >
5773
<ul class="project-list unstyled-list"></ul>
5874
</div>

‎_sass/elements/_search-bar.scss‎

Lines changed: 57 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,68 @@
1-
#search-bar {
2-
height: 44px;
3-
padding: 10px 16px;
4-
border-radius: 5px;
5-
border: 1px solid rgba(0, 0, 0, 0.24);
6-
display: flex;
7-
flex-direction: row;
8-
background: $color-white;
9-
gap: 4px;
10-
margin-bottom: 10px;
1+
2+
3+
/* Search bar container (was #search-bar) */
4+
.search-bar-desktop,
5+
.search-bar-mobile {
6+
height: 44px;
7+
padding: 10px 16px;
8+
border-radius: 5px;
9+
border: 1px solid rgba(0, 0, 0, 0.24);
10+
display: flex;
11+
flex-direction: row;
12+
background: $color-white;
13+
gap: 4px;
14+
margin-bottom: 10px;
1115
}
1216

13-
form#search-bar {
14-
position: sticky;
15-
padding: 10px;
17+
/* Override _forms.scss (was #search) */
18+
#search-desktop,
19+
#search-mobile {
20+
padding-right: 0px;
21+
padding-left: 0px;
22+
appearance: none;
23+
background: $color-white;
24+
border: none;
25+
border-radius: 0px;
26+
box-shadow: none;
27+
color: $color-black;
28+
font-size: 1rem;
29+
height: 22px;
30+
margin-bottom: 10px;
31+
width: 100%;
1632
}
1733

18-
//Styles to override the styles from _forms.scss
19-
#search{
20-
padding-right: 0px;
21-
padding-left: 0px;
22-
appearance: none;
23-
background: $color-white;
24-
border: none;
25-
border-radius: 0px;
26-
box-shadow: none;
27-
color: $color-black;
28-
font-size: 1rem;
29-
height: 22px;
30-
margin-bottom: 10px;
31-
width: 100%;
34+
/* Buttons */
35+
.search-x,
36+
.search-glass {
37+
width: 24px;
38+
height: 24px;
39+
padding: 0;
40+
margin: 0;
41+
border: none;
3242
}
3343

3444
.search-x {
35-
width: 24px;
36-
height: 24px;
37-
padding: 0;
38-
margin: 0;
39-
display: none;
40-
border:none;
45+
display: none;
4146
}
4247

43-
.search-glass {
44-
width: 24px;
45-
height: 24px;
46-
padding: 0;
47-
margin: 0;
48-
border: none;
49-
}
5048

49+
50+
/* Mobile and below: show mobile search bar only (unchanged behaviour) */
5151
@media #{$bp-below-tablet} {
52-
form#search-bar {
53-
padding: 10px;
54-
}
55-
}
52+
.search-bar-desktop { display: none; }
53+
.search-bar-mobile { display: flex; position: static; }
54+
}
55+
56+
/* Desktop and up: show desktop search bar; sticky below header */
57+
@media #{$bp-desktop-up} {
58+
.search-bar-mobile { display: none; }
59+
.search-bar-desktop {
60+
display: flex;
61+
position: sticky;
62+
top: 61px;
63+
z-index: 90;
64+
}
65+
.search-bar-mobile {
66+
display: none;
67+
}
68+
}

‎assets/js/current-projects.js‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,11 +101,17 @@ document.addEventListener("DOMContentLoaded",function(){
101101
// Add onclick event handlers to close search tips modal if it is open.
102102
attachEventListenerCloseModal();
103103

104-
//events related to search bar
105-
document.querySelector("#search").addEventListener("focus",searchOnFocusEventHandler);
106-
document.querySelector("#search").addEventListener("keydown", searchEnterKeyHandler);
107-
document.querySelector(".search-glass").addEventListener("click",searchEventHandler);
108-
document.querySelector(".search-x").addEventListener("click",searchCloseEventHandler);
104+
// events related to search bar (adjusted selectors only)
105+
const inputEl = document.querySelector('#search-desktop') || document.querySelector('#search-mobile') || document.querySelector('#search');
106+
const glassEl = document.querySelector('.search-bar-desktop .search-glass') || document.querySelector('.search-bar-mobile .search-glass') || document.querySelector('.search-glass');
107+
const closeEl = document.querySelector('.search-bar-desktop .search-x') || document.querySelector('.search-bar-mobile .search-x') || document.querySelector('.search-x');
108+
109+
if (inputEl) {
110+
inputEl.addEventListener('focus', searchOnFocusEventHandler);
111+
inputEl.addEventListener('keydown', searchEnterKeyHandler);
112+
}
113+
if (glassEl) { glassEl.addEventListener('click', searchEventHandler); }
114+
if (closeEl) { closeEl.addEventListener('click', searchCloseEventHandler); }
109115

110116
// Update UI on page load based on url parameters
111117
updateUI()
@@ -338,7 +344,8 @@ function cancelMobileFiltersEventHandler(e) {
338344
//search bar event handler
339345
function searchEventHandler(e){
340346
e.preventDefault();
341-
let searchTerm=document.querySelector("#search").value;
347+
const input = document.querySelector('#search-desktop') || document.querySelector('#search-mobile') || document.querySelector('#search');
348+
let searchTerm = input ? input.value : '';
342349
let tokenObj={};
343350
tokenObj['Search']=searchTerm;
344351

@@ -362,12 +369,14 @@ function searchEnterKeyHandler(e){
362369
}
363370

364371
function searchOnFocusEventHandler(){
365-
document.querySelector(".search-x").style.display='block';
372+
const xBtn = document.querySelector('.search-bar-desktop .search-x') || document.querySelector('.search-bar-mobile .search-x') || document.querySelector('.search-x');
373+
if (xBtn) xBtn.style.display='block';
366374
}
367375

368376
function searchCloseEventHandler(e){
369377
e.preventDefault();
370-
document.querySelector("#search").value="";
378+
const input = document.querySelector('#search-desktop') || document.querySelector('#search-mobile') || document.querySelector('#search');
379+
if (input) input.value="";
371380
}
372381

373382
/**

0 commit comments

Comments
 (0)