+
\ No newline at end of file
diff --git a/_sass/components/_projects-page.scss b/_sass/components/_projects-page.scss
index 1af7b2013d..5c172d3445 100644
--- a/_sass/components/_projects-page.scss
+++ b/_sass/components/_projects-page.scss
@@ -111,4 +111,126 @@
.project-card-field-inline {
display: inline;
- }
\ No newline at end of file
+ }
+
+// Further instructions for search-bar functionality using a modal.
+.search-tip-link {
+ text-decoration: underline;
+ cursor: pointer;
+ display: block;
+ margin: 10px 0;
+ padding: 10px 0;
+ border-top: solid 1px #cccccc;
+}
+
+// Modal Card
+.search-tip-modal-card {
+ background: $color-white;
+ border: 0 solid rgba($color-black, 0.06);
+ border-radius: 16px;
+ box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
+ margin-bottom: 24px;
+ overflow: hidden;
+
+ @media #{$bp-tablet-up} {
+ margin-bottom: 0;
+ }
+}
+.search-tip-card{
+ padding: 45px;
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ overflow: visible;
+}
+
+.search-tip-card-top{
+ display: flex;
+}
+
+.search-tip-card-title{
+ display: flex;
+ justify-content: space-between;
+}
+
+.search-tip-card-name{
+ font-size: 19px;
+ line-height: 22px;
+}
+
+ // Modal Overlay
+ .search-tip-overlay {
+ display: none;
+ z-index: 120;
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ width: 100vw;
+ height: 100%;
+ background-color: rgba(70, 70, 70, 0.5);
+ padding: 10px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.top-buffer{
+ height: 20vh;
+}
+.bottom-buffer {
+ height: 5vh;
+}
+.search-tip-modal-container{
+ position: absolute;
+ width: 60%;
+ left: 20%;
+ z-index: 121;
+}
+
+.overlay-close-icon {
+ float: right;
+ padding: 20px 20px 0 0;
+ cursor: pointer;
+}
+.center-screen {
+ opacity: 1;
+}
+.overlay-card-text{
+ padding-top: 40px;
+}
+
+@media screen and (max-width: 768px) {
+ .search-tip-modal-container {
+ width: 90%;
+ left: 5%;
+ }
+}
+
+// Search Tip Table Styling
+.search-tip-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+
+ th, td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+
+ th {
+ background-color: #f4f4f4;
+ font-weight: bold;
+ }
+
+ td {
+ vertical-align: top;
+ }
+
+ tr:last-child td {
+ border-bottom: none;
+ }
+
+ @media screen and (max-width: 768px) {
+ font-size: 14px;
+ }
+}
\ No newline at end of file
diff --git a/assets/js/current-projects.js b/assets/js/current-projects.js
index c6d0f3068c..aaccebf6ec 100644
--- a/assets/js/current-projects.js
+++ b/assets/js/current-projects.js
@@ -94,6 +94,12 @@ document.addEventListener("DOMContentLoaded",function(){
})
document.querySelector(".cancel-mobile-filters").addEventListener("click", cancelMobileFiltersEventHandler)
document.addEventListener('keydown', tabFocusedKeyDownHandler);
+
+ // Add onclick event handlers to open search tips modal if it is clicked.
+ attachEventListenerOpenModal();
+
+ // Add onclick event handlers to close search tips modal if it is open.
+ attachEventListenerCloseModal();
//events related to search bar
document.querySelector("#search").addEventListener("focus",searchOnFocusEventHandler);
@@ -400,7 +406,7 @@ function updateUI(){
// Add onclick event handlers to filter tag buttons and a clear all button if filter-tag-button exists in the dom
attachEventListenerToFilterTags()
-
+
}
/**
@@ -859,4 +865,43 @@ function toggleNoResultMsgIfNoMatch(filtersParams,querySelector) {
} else {
document.querySelector(".no-results-message").innerHTML = ""
}
+}
+
+function attachEventListenerOpenModal() {
+ document.getElementById('search-tip-link').addEventListener('click', function (event) {
+ event.preventDefault();
+ updateSearchTipsModal();
+ });
+}
+
+function updateSearchTipsModal() {
+ // Update the modal content with data
+ document.getElementById('overlay-name').innerHTML = "Search Tips";
+ document.getElementById('table-operator-1').innerHTML = "AND";
+ document.getElementById('table-meaning-1').innerHTML = "Limit results";
+ document.getElementById('table-example-1').innerHTML = "React and Node (Search for project cards that contain both React and Node.)";
+ document.getElementById('table-operator-2').innerHTML = "OR";
+ document.getElementById('table-meaning-2').innerHTML = "One term OR another";
+ document.getElementById('table-example-2').innerHTML = "Python or Javascript (Search for project cards that contains Python or JavaScript.)";
+ document.getElementById('table-operator-3').innerHTML = "-";
+ document.getElementById('table-meaning-3').innerHTML = "Exclude a term from the search";
+ document.getElementById('table-example-3').innerHTML = "React -Django (Limits project card results to only those with React and not the term Django.)";
+
+ // Show the modal
+ document.getElementById('search-tip-modal').style.display = 'flex';
+}
+
+function attachEventListenerCloseModal() {
+ // Close the modal
+ document.querySelector('.overlay-close-icon').addEventListener('click', function() {
+ document.getElementById('search-tip-modal').style.display = 'none';
+ });
+
+ // Close modal when clicking outside of it
+ window.addEventListener('click', function(event) {
+ const modal = this.document.getElementById('search-tip-modal');
+ if (event.target === modal) {
+ modal.style.display = 'none';
+ }
+ });
}
\ No newline at end of file
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Blank
+
+
+
+
+