Skip to content

Commit 1a14d31

Browse files
dvernon5Donovan Vernon
dvernon5
and
Donovan Vernon
authored
Inserted Search Tip Modal Into the Project Page Below the Filter Dropdown (#7985)
* Search Tips Link Implementation * Added Search-Tips functionality into the _search-bar.scss file * Removed a deleted file from the main _scss file. * Changed the modal container to appear above the search bar when modal is click and activated * Modal is now visible without the search-bar overlapping it * Fixed error in _sass/elements/_search-bar.scss * Corrected the typo Seach to Search on the top of the Modal * In the current-project.html file I change the overlay classname to search-tip-overlay * Added the modal overlay and its box property style into the projects-page.scss file. * Restore the search-bar.scss back into its original setting. Now the file only contain to search-bar functionalities. * Added an include page for the current-projects file that consists of the project modal * Modal is now using a table structure * Added new style for the modal card and table formating * added remaining content for the modal table * Change the function name openSearchTipModal to attachEventListenerOpenModal and closeSearchTipModal to attachEventListernerCloseModal --------- Co-authored-by: Donovan Vernon <d.vernon5@gmail.com>
1 parent 7353686 commit 1a14d31

4 files changed

Lines changed: 221 additions & 2 deletions

File tree

‎_includes/current-projects.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
{% include search-tip-modal.html %}
12
<a class="anchor" id="projects"></a>
23
<section class="content-section projects filter-content-container">
34
<nav class="filter-toolbar" aria-label="Filter Navbar">
@@ -28,6 +29,10 @@ <h3 class="filters-title">
2829
Apply
2930
</button>
3031
</div>
32+
<!-- Add Search Tip Link for Desktop -->
33+
<div class="search-tip-link">
34+
<a href="#" id="search-tip-link">Search Tips</a>
35+
</div>
3136
</div>
3237
</nav>
3338

‎_includes/search-tip-modal.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!-- Modal Structure -->
2+
<div class="search-tip-overlay" id="search-tip-modal">
3+
<div class="search-tip-modal-container">
4+
<div class="top-buffer"></div>
5+
<div class="search-tip-modal-card">
6+
<img class="overlay-close-icon" src="/assets/images/wins-page/x.svg" alt="Close">
7+
<div class="search-tip-card center-screen">
8+
<div class="search-tip-card-top">
9+
<div class="search-card-title project-card-inner">
10+
<span id="overlay-name" class="search-tip-card-name">Blank</span>
11+
</div>
12+
</div>
13+
<div class="search-tip-card-bottom">
14+
<div class="project-inner overlay-card-text">
15+
<table id="search-tip-table" class="search-tip-table">
16+
<thead>
17+
<tr>
18+
<th>Boolean Operators</th>
19+
<th>Meaning</th>
20+
<th>Example</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<tr>
25+
<td id="table-operator-1">Blank</td>
26+
<td id="table-meaning-1">Blank</td>
27+
<td id="table-example-1">Blank</td>
28+
</tr>
29+
<tr>
30+
<td id="table-operator-2">Blank</td>
31+
<td id="table-meaning-2">Blank</td>
32+
<td id="table-example-2">Blank</td>
33+
</tr>
34+
<tr>
35+
<td id="table-operator-3">Blank</td>
36+
<td id="table-meaning-3">Blank</td>
37+
<td id="table-example-3">Blank</td>
38+
</tr>
39+
</tbody>
40+
</table>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
<div class="bottom-buffer"></div>
46+
</div>
47+
</div>

‎_sass/components/_projects-page.scss‎

Lines changed: 123 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,4 +111,126 @@
111111

112112
.project-card-field-inline {
113113
display: inline;
114-
}
114+
}
115+
116+
// Further instructions for search-bar functionality using a modal.
117+
.search-tip-link {
118+
text-decoration: underline;
119+
cursor: pointer;
120+
display: block;
121+
margin: 10px 0;
122+
padding: 10px 0;
123+
border-top: solid 1px #cccccc;
124+
}
125+
126+
// Modal Card
127+
.search-tip-modal-card {
128+
background: $color-white;
129+
border: 0 solid rgba($color-black, 0.06);
130+
border-radius: 16px;
131+
box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
132+
margin-bottom: 24px;
133+
overflow: hidden;
134+
135+
@media #{$bp-tablet-up} {
136+
margin-bottom: 0;
137+
}
138+
}
139+
.search-tip-card{
140+
padding: 45px;
141+
display: flex;
142+
position: relative;
143+
flex-direction: column;
144+
overflow: visible;
145+
}
146+
147+
.search-tip-card-top{
148+
display: flex;
149+
}
150+
151+
.search-tip-card-title{
152+
display: flex;
153+
justify-content: space-between;
154+
}
155+
156+
.search-tip-card-name{
157+
font-size: 19px;
158+
line-height: 22px;
159+
}
160+
161+
// Modal Overlay
162+
.search-tip-overlay {
163+
display: none;
164+
z-index: 120;
165+
position: fixed;
166+
left: 0px;
167+
top: 0px;
168+
width: 100vw;
169+
height: 100%;
170+
background-color: rgba(70, 70, 70, 0.5);
171+
padding: 10px;
172+
overflow-y: auto;
173+
overflow-x: hidden;
174+
}
175+
176+
.top-buffer{
177+
height: 20vh;
178+
}
179+
.bottom-buffer {
180+
height: 5vh;
181+
}
182+
.search-tip-modal-container{
183+
position: absolute;
184+
width: 60%;
185+
left: 20%;
186+
z-index: 121;
187+
}
188+
189+
.overlay-close-icon {
190+
float: right;
191+
padding: 20px 20px 0 0;
192+
cursor: pointer;
193+
}
194+
.center-screen {
195+
opacity: 1;
196+
}
197+
.overlay-card-text{
198+
padding-top: 40px;
199+
}
200+
201+
@media screen and (max-width: 768px) {
202+
.search-tip-modal-container {
203+
width: 90%;
204+
left: 5%;
205+
}
206+
}
207+
208+
// Search Tip Table Styling
209+
.search-tip-table {
210+
width: 100%;
211+
border-collapse: collapse;
212+
margin-top: 20px;
213+
214+
th, td {
215+
padding: 12px;
216+
text-align: left;
217+
border-bottom: 1px solid #ddd;
218+
}
219+
220+
th {
221+
background-color: #f4f4f4;
222+
font-weight: bold;
223+
}
224+
225+
td {
226+
vertical-align: top;
227+
}
228+
229+
tr:last-child td {
230+
border-bottom: none;
231+
}
232+
233+
@media screen and (max-width: 768px) {
234+
font-size: 14px;
235+
}
236+
}

‎assets/js/current-projects.js‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,12 @@ document.addEventListener("DOMContentLoaded",function(){
9494
})
9595
document.querySelector(".cancel-mobile-filters").addEventListener("click", cancelMobileFiltersEventHandler)
9696
document.addEventListener('keydown', tabFocusedKeyDownHandler);
97+
98+
// Add onclick event handlers to open search tips modal if it is clicked.
99+
attachEventListenerOpenModal();
100+
101+
// Add onclick event handlers to close search tips modal if it is open.
102+
attachEventListenerCloseModal();
97103

98104
//events related to search bar
99105
document.querySelector("#search").addEventListener("focus",searchOnFocusEventHandler);
@@ -400,7 +406,7 @@ function updateUI(){
400406

401407
// Add onclick event handlers to filter tag buttons and a clear all button if filter-tag-button exists in the dom
402408
attachEventListenerToFilterTags()
403-
409+
404410
}
405411

406412
/**
@@ -859,4 +865,43 @@ function toggleNoResultMsgIfNoMatch(filtersParams,querySelector) {
859865
} else {
860866
document.querySelector(".no-results-message").innerHTML = ""
861867
}
868+
}
869+
870+
function attachEventListenerOpenModal() {
871+
document.getElementById('search-tip-link').addEventListener('click', function (event) {
872+
event.preventDefault();
873+
updateSearchTipsModal();
874+
});
875+
}
876+
877+
function updateSearchTipsModal() {
878+
// Update the modal content with data
879+
document.getElementById('overlay-name').innerHTML = "Search Tips";
880+
document.getElementById('table-operator-1').innerHTML = "<strong>AND</strong>";
881+
document.getElementById('table-meaning-1').innerHTML = "Limit results";
882+
document.getElementById('table-example-1').innerHTML = "<em>React and Node (Search for project cards that contain both React and Node.)</em>";
883+
document.getElementById('table-operator-2').innerHTML = "<strong>OR</strong>";
884+
document.getElementById('table-meaning-2').innerHTML = "One term OR another";
885+
document.getElementById('table-example-2').innerHTML = "<em>Python or Javascript (Search for project cards that contains Python or JavaScript.)</em>";
886+
document.getElementById('table-operator-3').innerHTML = "<strong>-</strong>";
887+
document.getElementById('table-meaning-3').innerHTML = "Exclude a term from the search";
888+
document.getElementById('table-example-3').innerHTML = "<em>React -Django (Limits project card results to only those with React and not the term Django.)</em>";
889+
890+
// Show the modal
891+
document.getElementById('search-tip-modal').style.display = 'flex';
892+
}
893+
894+
function attachEventListenerCloseModal() {
895+
// Close the modal
896+
document.querySelector('.overlay-close-icon').addEventListener('click', function() {
897+
document.getElementById('search-tip-modal').style.display = 'none';
898+
});
899+
900+
// Close modal when clicking outside of it
901+
window.addEventListener('click', function(event) {
902+
const modal = this.document.getElementById('search-tip-modal');
903+
if (event.target === modal) {
904+
modal.style.display = 'none';
905+
}
906+
});
862907
}

0 commit comments

Comments
 (0)