Search Tips Link Implementation

Author: Donovan Vernon

_includes/current-projects.html

@@ -28,6 +28,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>
 
@@ -51,7 +55,33 @@ <h3 class="filters-title">
     </div>
     <div class="no-results-message"></div>  
   </div>
+  <!-- Modal Structure -->
+  <div class="overlay" id="search-tip-modal">
+    <div class="search-tip-modal-container">
+      <div class="top-buffer"></div>
+      <div class="project-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">
+              <p id="search-tip-overview">Blank</p>
+              <p id="search-tip-and">Blank</p>
+              <p id="search-tip-or">Blank</p>
+              <p id="search-tip-not">Blank</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom-buffer"></div>
+    </div>
+  </div>
 </section>
 
+
 <script src="/assets/js/current-projects.js"></script>
 <script src="../assets/js/elements/noResultsMessageFilter.js"></script>

_sass/elements/_search-tip-modal.scss

@@ -0,0 +1,78 @@
+.search-tip-link {
+    text-decoration: underline;
+    cursor: pointer;
+    display: block;
+    margin: 10px 0;
+    padding: 10px 0;
+    border-top: solid 1px #cccccc;
+}
+
+
+// page
+.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
+.overlay {
+    display: none;
+    z-index: 1;
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    width: calc(100vw + 17px);
+    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%;
+}
+.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%;
+    }
+}

_sass/main.scss

@@ -37,6 +37,7 @@
 @import 'elements/dropdown_filters';
 @import 'elements/old_dropdown_filters';
 @import 'elements/search-bar';
+@import 'elements/search-tip-modal';
 
 // /**
 //  * Components

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);
+
+        // Event listener for search tip modal
+        openSearchTipsModal();
+
+        // Close Search Tips Modal.
+        closeSearchTipsModal();
 
         //events related to search bar
         document.querySelector("#search").addEventListener("focus",searchOnFocusEventHandler);
@@ -859,4 +865,38 @@ function toggleNoResultMsgIfNoMatch(filtersParams,querySelector) {
     } else {
         document.querySelector(".no-results-message").innerHTML = ""
     }
+}
+
+function openSearchTipsModal() {
+    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 = "Seach Tips";
+    document.getElementById('search-tip-overview').innerHTML = "Overview of search tips for effective filtering.";
+    document.getElementById('search-tip-and').innerHTML = "<strong>AND</strong>: Limit results - <em>React AND Node</em> (Search for project cards that contain both React and Node.)";
+    document.getElementById('search-tip-or').innerHTML = "<strong>OR</strong>: One term OR another - <em>Python OR Javascript</em> (Search for project cards that contains Python OR JavaScript.)";
+    document.getElementById('search-tip-not').innerHTML = "<strong>-</strong>: Exclude a term from the search - <em>React -Django</em> (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 closeSearchTipsModal() {
+    // 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';
+        }
+    });
 }