From a781ec50f33ae407e0d2b37b369d90ddc6783bb9 Mon Sep 17 00:00:00 2001 From: Donovan Vernon Date: Sun, 9 Mar 2025 09:06:57 -0700 Subject: [PATCH 01/15] Search Tips Link Implementation --- _includes/current-projects.html | 30 +++++++++++ _sass/elements/_search-tip-modal.scss | 78 +++++++++++++++++++++++++++ _sass/main.scss | 1 + assets/js/current-projects.js | 40 ++++++++++++++ 4 files changed, 149 insertions(+) create mode 100644 _sass/elements/_search-tip-modal.scss diff --git a/_includes/current-projects.html b/_includes/current-projects.html index 85ace21974..f296212c7b 100644 --- a/_includes/current-projects.html +++ b/_includes/current-projects.html @@ -28,6 +28,10 @@

Apply + +
+ Search Tips +
@@ -51,7 +55,33 @@

+ +
+
+
+
+ Close +
+
+
+ Blank +
+
+
+
+

Blank

+

Blank

+

Blank

+

Blank

+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/_sass/elements/_search-tip-modal.scss b/_sass/elements/_search-tip-modal.scss new file mode 100644 index 0000000000..977fb19800 --- /dev/null +++ b/_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%; + } +} \ No newline at end of file diff --git a/_sass/main.scss b/_sass/main.scss index b4c7469e68..0f036dbeb0 100644 --- a/_sass/main.scss +++ b/_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 diff --git a/assets/js/current-projects.js b/assets/js/current-projects.js index c6d0f3068c..bdbda94598 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); + + // 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 = "AND: Limit results - React AND Node (Search for project cards that contain both React and Node.)"; + document.getElementById('search-tip-or').innerHTML = "OR: One term OR another - Python OR Javascript (Search for project cards that contains Python OR JavaScript.)"; + document.getElementById('search-tip-not').innerHTML = "-: Exclude a term from the search - 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 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'; + } + }); } \ No newline at end of file From dfa0c30f9cc35cb0af2bdebc1c017d081ba807ad Mon Sep 17 00:00:00 2001 From: Donovan Vernon Date: Sun, 9 Mar 2025 10:02:00 -0700 Subject: [PATCH 02/15] Added Search-Tips functionality into the _search-bar.scss file --- _sass/elements/_search-bar.scss | 82 ++++++++++++++++++++++++++- _sass/elements/_search-tip-modal.scss | 78 ------------------------- 2 files changed, 81 insertions(+), 79 deletions(-) delete mode 100644 _sass/elements/_search-tip-modal.scss diff --git a/_sass/elements/_search-bar.scss b/_sass/elements/_search-bar.scss index f10840eed3..63e74e4c79 100644 --- a/_sass/elements/_search-bar.scss +++ b/_sass/elements/_search-bar.scss @@ -53,4 +53,84 @@ form#search-bar { padding: 0; margin: 0; border: none; -} \ 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; +} + + +// 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%; + } +} diff --git a/_sass/elements/_search-tip-modal.scss b/_sass/elements/_search-tip-modal.scss deleted file mode 100644 index 977fb19800..0000000000 --- a/_sass/elements/_search-tip-modal.scss +++ /dev/null @@ -1,78 +0,0 @@ -.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%; - } -} \ No newline at end of file From 809f64cb477dcd6e6d23f21ca58ff0180f1ca9f7 Mon Sep 17 00:00:00 2001 From: Donovan Vernon Date: Sun, 9 Mar 2025 10:15:29 -0700 Subject: [PATCH 03/15] Removed a deleted file from the main _scss file. --- _sass/main.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/_sass/main.scss b/_sass/main.scss index 0f036dbeb0..b4c7469e68 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -37,7 +37,6 @@ @import 'elements/dropdown_filters'; @import 'elements/old_dropdown_filters'; @import 'elements/search-bar'; -@import 'elements/search-tip-modal'; // /** // * Components From 20a4a01bfaf67e0b6fe3fad0770157739e14239a Mon Sep 17 00:00:00 2001 From: Donovan Vernon Date: Fri, 14 Mar 2025 08:21:22 -0700 Subject: [PATCH 04/15] Changed the modal container to appear above the search bar when modal is click and activated --- _includes/current-projects.html | 36 ++++++++++++++++----------------- _sass/elements/_search-bar.scss | 5 +++-- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/_includes/current-projects.html b/_includes/current-projects.html index f296212c7b..fdbb0e9622 100644 --- a/_includes/current-projects.html +++ b/_includes/current-projects.html @@ -56,30 +56,30 @@

-
-
-
-
- Close -
-
-
- Blank -
+
+
+
+
+ Close +
+
+
+ Blank
-
-
-

Blank

-

Blank

-

Blank

-

Blank

-
+
+
+
+

Blank

+

Blank

+

Blank

+

Blank

-
+
+
diff --git a/_sass/elements/_search-bar.scss b/_sass/elements/_search-bar.scss index 63e74e4c79..5ec6921218 100644 --- a/_sass/elements/_search-bar.scss +++ b/_sass/elements/_search-bar.scss @@ -93,11 +93,11 @@ form#search-bar { //modal overlay .overlay { display: none; - z-index: 1; + z-index: 20; position: fixed; left: 0px; top: 0px; - width: calc(100vw + 17px); + width: 100vw; height: 100%; background-color: rgba(70, 70, 70, 0.5); padding: 10px; @@ -115,6 +115,7 @@ form#search-bar { position: absolute; width: 60%; left: 20%; + bottom: 39%; } .overlay-close-icon { float: right; From a69a7f278e2fd496cc025ba00f87b6fa0f1b7906 Mon Sep 17 00:00:00 2001 From: Donovan Vernon Date: Sat, 15 Mar 2025 22:55:31 -0700 Subject: [PATCH 05/15] Modal is now visible without the search-bar overlapping it --- _includes/current-projects.html | 51 ++++++++++++++++----------------- _sass/elements/_search-bar.scss | 37 ++++++++++++++++++++++-- assets/js/current-projects.js | 4 +-- 3 files changed, 62 insertions(+), 30 deletions(-) diff --git a/_includes/current-projects.html b/_includes/current-projects.html index fdbb0e9622..50986bf502 100644 --- a/_includes/current-projects.html +++ b/_includes/current-projects.html @@ -49,39 +49,38 @@

+ +
+
+
+
+ Close +
+
+
+ Blank +
+
+
+
+

Blank

+

Blank

+

Blank

+

Blank

+
+
+
+
+
+
+

    - -
    -
    -
    -
    - Close -
    -
    -
    - Blank -
    -
    -
    -
    -

    Blank

    -

    Blank

    -

    Blank

    -

    Blank

    -
    -
    -
    -
    -
    -
    -
    - \ No newline at end of file diff --git a/_sass/elements/_search-bar.scss b/_sass/elements/_search-bar.scss index 5ec6921218..011327311c 100644 --- a/_sass/elements/_search-bar.scss +++ b/_sass/elements/_search-bar.scss @@ -90,6 +90,40 @@ form#search-bar { } +.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; @@ -97,7 +131,7 @@ form#search-bar { position: fixed; left: 0px; top: 0px; - width: 100vw; + width: calc(100vw + 17px); height: 100%; background-color: rgba(70, 70, 70, 0.5); padding: 10px; @@ -115,7 +149,6 @@ form#search-bar { position: absolute; width: 60%; left: 20%; - bottom: 39%; } .overlay-close-icon { float: right; diff --git a/assets/js/current-projects.js b/assets/js/current-projects.js index bdbda94598..c7b15430bc 100644 --- a/assets/js/current-projects.js +++ b/assets/js/current-projects.js @@ -878,8 +878,8 @@ 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 = "AND: Limit results - React AND Node (Search for project cards that contain both React and Node.)"; - document.getElementById('search-tip-or').innerHTML = "OR: One term OR another - Python OR Javascript (Search for project cards that contains Python OR JavaScript.)"; + document.getElementById('search-tip-and').innerHTML = "AND: Limit results - React and Node (Search for project cards that contain both React and Node.)"; + document.getElementById('search-tip-or').innerHTML = "OR: One term or another - Python or Javascript (Search for project cards that contains Python or JavaScript.)"; document.getElementById('search-tip-not').innerHTML = "-: Exclude a term from the search - React -Django (Limits project card results to only those with React and not the term Django.)"; // Show the modal From 0d7410fd341dbc091e0adca158ecf28b232325f4 Mon Sep 17 00:00:00 2001 From: Donovan Vernon Date: Sat, 15 Mar 2025 23:05:28 -0700 Subject: [PATCH 06/15] Fixed error in _sass/elements/_search-bar.scss --- _sass/elements/_search-bar.scss | 38 ++------------------------------- 1 file changed, 2 insertions(+), 36 deletions(-) diff --git a/_sass/elements/_search-bar.scss b/_sass/elements/_search-bar.scss index 011327311c..1fe8320f79 100644 --- a/_sass/elements/_search-bar.scss +++ b/_sass/elements/_search-bar.scss @@ -90,40 +90,6 @@ form#search-bar { } -.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; @@ -131,7 +97,7 @@ form#search-bar { position: fixed; left: 0px; top: 0px; - width: calc(100vw + 17px); + width: 100vw; height: 100%; background-color: rgba(70, 70, 70, 0.5); padding: 10px; @@ -167,4 +133,4 @@ form#search-bar { width: 90%; left: 5%; } -} +} \ No newline at end of file From 753c4c06faf5df782dec7728fb9704254b3a97c6 Mon Sep 17 00:00:00 2001 From: Donovan Vernon Date: Sun, 16 Mar 2025 14:31:14 -0700 Subject: [PATCH 07/15] Corrected the typo Seach to Search on the top of the Modal --- assets/js/current-projects.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/current-projects.js b/assets/js/current-projects.js index c7b15430bc..a4eb5d274b 100644 --- a/assets/js/current-projects.js +++ b/assets/js/current-projects.js @@ -876,7 +876,7 @@ function openSearchTipsModal() { function updateSearchTipsModal() { // Update the modal content with data - document.getElementById('overlay-name').innerHTML = "Seach Tips"; + document.getElementById('overlay-name').innerHTML = "Search Tips"; document.getElementById('search-tip-overview').innerHTML = "Overview of search tips for effective filtering."; document.getElementById('search-tip-and').innerHTML = "AND: Limit results - React and Node (Search for project cards that contain both React and Node.)"; document.getElementById('search-tip-or').innerHTML = "OR: One term or another - Python or Javascript (Search for project cards that contains Python or JavaScript.)"; From 79fa9e746dcbc6ae1f089414748da40bf075fbf2 Mon Sep 17 00:00:00 2001 From: Donovan Vernon Date: Mon, 17 Mar 2025 20:04:02 -0700 Subject: [PATCH 08/15] In the current-project.html file I change the overlay classname to search-tip-overlay --- _includes/current-projects.html | 26 +------------------------- 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/_includes/current-projects.html b/_includes/current-projects.html index 50986bf502..66673061a6 100644 --- a/_includes/current-projects.html +++ b/_includes/current-projects.html @@ -1,3 +1,4 @@ +{% include search-tip-modal.html %}