Inserted Search Tip Modal Into the Project Page Below the Filter Dropdown

_includes/current-projects.html

@@ -1,3 +1,4 @@
+{% include search-tip-modal.html %}
 <a class="anchor" id="projects"></a>
 <section class="content-section projects filter-content-container">
   <nav class="filter-toolbar" aria-label="Filter Navbar">
@@ -28,6 +29,10 @@ <h3 class="filters-title">
           Apply
         </button>
       </div>
+      <!-- Add Search Tip Link for Desktop -->
+      <div class="search-tip-link">
+        <a href="#" id="search-tip-link">Search Tips</a>
+      </div>
     </div>
   </nav>
 

_includes/search-tip-modal.html

@@ -0,0 +1,47 @@
+<!-- Modal Structure -->
+<div class="search-tip-overlay" id="search-tip-modal">
+  <div class="search-tip-modal-container">
+    <div class="top-buffer"></div>
+    <div class="search-tip-modal-card">
+      <img class="overlay-close-icon" src="/assets/images/wins-page/x.svg" alt="Close">
+      <div class="search-tip-card center-screen">
+        <div class="search-tip-card-top">
+          <div class="search-card-title project-card-inner">
+            <span id="overlay-name" class="search-tip-card-name">Blank</span>
+          </div>
+        </div>
+        <div class="search-tip-card-bottom">
+          <div class="project-inner overlay-card-text">
+            <table id="search-tip-table" class="search-tip-table">
+              <thead>
+                <tr>
+                  <th>Boolean Operators</th>
+                  <th>Meaning</th>
+                  <th>Example</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td id="table-operator-1">Blank</td>
+                  <td id="table-meaning-1">Blank</td>
+                  <td id="table-example-1">Blank</td>
+                </tr>
+                <tr>
+                  <td id="table-operator-2">Blank</td>
+                  <td id="table-meaning-2">Blank</td>
+                  <td id="table-example-2">Blank</td>
+                </tr>
+                <tr>
+                  <td id="table-operator-3">Blank</td>
+                  <td id="table-meaning-3">Blank</td>
+                  <td id="table-example-3">Blank</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-buffer"></div>
+  </div>
+</div>

_sass/components/_projects-page.scss

@@ -111,4 +111,126 @@
 
   .project-card-field-inline {
     display: inline;
-  }
+  }
+
+// 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;
+  }
+}

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 = "<strong>AND</strong>";
+    document.getElementById('table-meaning-1').innerHTML = "Limit results";
+    document.getElementById('table-example-1').innerHTML = "<em>React and Node (Search for project cards that contain both React and Node.)</em>";
+    document.getElementById('table-operator-2').innerHTML = "<strong>OR</strong>";
+    document.getElementById('table-meaning-2').innerHTML = "One term OR another";
+    document.getElementById('table-example-2').innerHTML = "<em>Python or Javascript (Search for project cards that contains Python or JavaScript.)</em>";
+    document.getElementById('table-operator-3').innerHTML = "<strong>-</strong>";
+    document.getElementById('table-meaning-3').innerHTML = "Exclude a term from the search";
+    document.getElementById('table-example-3').innerHTML = "<em>React -Django (Limits project card results to only those with React and not the term Django.)</em>";
+
+    // 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';
+        }
+    });
 }