From ea156ea35e118b5b4e0d440be3d4af431e2bc66d Mon Sep 17 00:00:00 2001 From: zugdev Date: Wed, 23 Oct 2024 13:52:17 -0300 Subject: [PATCH 1/5] feat: handle text queries in URL --- src/home/sorting/sorting-manager.ts | 37 +++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/src/home/sorting/sorting-manager.ts b/src/home/sorting/sorting-manager.ts index 1bee9c64..84403a69 100644 --- a/src/home/sorting/sorting-manager.ts +++ b/src/home/sorting/sorting-manager.ts @@ -30,6 +30,7 @@ export class SortingManager { textBox.id = `filter-${this._instanceId}`; textBox.placeholder = "Text Filter"; + // Handle CTRL+F document.addEventListener("keydown", (event) => { if ((event.metaKey || event.ctrlKey) && event.key === "f") { event.preventDefault(); @@ -37,24 +38,56 @@ export class SortingManager { } }); + // Get the search query from the URL (if it exists) and pre-fill the input + const urlParams = new URLSearchParams(window.location.search); + const searchQuery = urlParams.get("search") || ""; + textBox.value = searchQuery; + const issuesContainer = document.getElementById("issues-container") as HTMLDivElement; - textBox.addEventListener("input", () => { + + const filterIssues = () => { try { const filterText = textBox.value.toLowerCase(); const issues = Array.from(issuesContainer.children) as HTMLDivElement[]; issues.forEach((issue) => { const issueId = issue.children[0].getAttribute("data-issue-id"); + issue.classList.add("active"); if (!issueId) return; const gitHubIssue = taskManager.getGitHubIssueById(parseInt(issueId)); if (!gitHubIssue) return; const searchableProperties = ["title", "body", "number", "html_url"] as const; - const searchableStrings = searchableProperties.map((prop) => gitHubIssue[prop]?.toString().toLowerCase()); + const searchableStrings = searchableProperties.map((prop) => + gitHubIssue[prop]?.toString().toLowerCase() + ); const isVisible = searchableStrings.some((str) => str?.includes(filterText)); issue.style.display = isVisible ? "block" : "none"; }); } catch (error) { return renderErrorInModal(error as Error); } + }; + + // Observer to detect when children are added to the issues container + const observer = new MutationObserver(() => { + if (issuesContainer.children.length > 0) { + observer.disconnect(); // Stop observing once children are present + if (searchQuery) filterIssues(); // Filter on load if search query exists + } + }); + + // Start observing the issues container for child elements + observer.observe(issuesContainer, { childList: true }); + + // Add event listener for input changes to filter and update URL + textBox.addEventListener("input", () => { + const filterText = textBox.value; + // Update the URL with the search parameter + const newURL = new URL(window.location.href); + newURL.searchParams.set("search", filterText); + window.history.replaceState({}, "", newURL.toString()); + + // Filter the issues based on the input + filterIssues(); }); return textBox; From 093a8b745c63a2b643eacb68b0fcea87cc953485 Mon Sep 17 00:00:00 2001 From: zugdev Date: Wed, 23 Oct 2024 13:52:27 -0300 Subject: [PATCH 2/5] chore: lint --- src/home/sorting/sorting-manager.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/home/sorting/sorting-manager.ts b/src/home/sorting/sorting-manager.ts index 84403a69..e74470f4 100644 --- a/src/home/sorting/sorting-manager.ts +++ b/src/home/sorting/sorting-manager.ts @@ -56,9 +56,7 @@ export class SortingManager { const gitHubIssue = taskManager.getGitHubIssueById(parseInt(issueId)); if (!gitHubIssue) return; const searchableProperties = ["title", "body", "number", "html_url"] as const; - const searchableStrings = searchableProperties.map((prop) => - gitHubIssue[prop]?.toString().toLowerCase() - ); + const searchableStrings = searchableProperties.map((prop) => gitHubIssue[prop]?.toString().toLowerCase()); const isVisible = searchableStrings.some((str) => str?.includes(filterText)); issue.style.display = isVisible ? "block" : "none"; }); From c2281839fa05a2bc4ec12d7ee3256996028b04f1 Mon Sep 17 00:00:00 2001 From: zugdev Date: Wed, 23 Oct 2024 17:06:14 -0300 Subject: [PATCH 3/5] feat: make header responsive --- static/index.html | 5 +++-- static/style/inverted-style.css | 21 ++++++++++++--------- static/style/style.css | 21 ++++++++++++--------- 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/static/index.html b/static/index.html index a23d33ef..e2c0b0cb 100644 --- a/static/index.html +++ b/static/index.html @@ -56,8 +56,9 @@ >Ubiquity DAO | DevPool
+ >
+
+
* { display: inline-flex; @@ -373,9 +377,6 @@ font-weight: 400; text-rendering: geometricPrecision; } - .full { - display: unset !important; - } @media screen and (max-width: 804px) { .mid { padding: 0 4px; @@ -632,15 +633,16 @@ line-height: 1.25; } .filters-container { - overflow-x: auto; + flex: 1; } .filters-container input[type="text"] { - margin: 0 2px; + margin: 0 10px; padding: 4px; border: none; border-radius: 4px; background-color: #7f7f7f20; width: 100%; + max-width: 500px; height: 16px; text-align: center; min-width: 80px; @@ -745,6 +747,7 @@ font-size: 16px; } #view-toggle { + flex: 0 0 auto; appearance: none; } label[for="view-toggle"] { diff --git a/static/style/style.css b/static/style/style.css index 95402031..177a0476 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -8,7 +8,11 @@ #bottom-right { display: none; } + #toolbar{ + justify-content: space-between; + } } + @media (orientation: landscape) { #bottom-bar, #filters-bottom { @@ -238,7 +242,7 @@ } .labels { display: flex; - margin-left: auto; + margin-left: 5px; justify-content: flex-end; } .partner { @@ -327,13 +331,13 @@ display: flex; border-bottom: 1px solid #80808020; -webkit-backdrop-filter: blur(8px); - justify-content: left; align-items: center; } #authentication { - position: absolute; - right: 8px; + flex: 0 0 auto; cursor: pointer; + margin-right: 10px; + margin-left: 10px; } .toolbar > * { display: inline-flex; @@ -373,9 +377,6 @@ font-weight: 400; text-rendering: geometricPrecision; } - .full { - display: unset !important; - } @media screen and (max-width: 804px) { .mid { padding: 0 4px; @@ -632,15 +633,16 @@ line-height: 1.25; } .filters-container { - overflow-x: auto; + flex: 1; } .filters-container input[type="text"] { - margin: 0 2px; + margin: 0 10px; padding: 4px; border: none; border-radius: 4px; background-color: #80808020; width: 100%; + max-width: 500px; height: 16px; text-align: center; min-width: 80px; @@ -745,6 +747,7 @@ font-size: 16px; } #view-toggle { + flex: 0 0 auto; appearance: none; } label[for="view-toggle"] { From b1da90f1f08d3284fa7a08f72ea5b8859c6005f6 Mon Sep 17 00:00:00 2001 From: zugdev Date: Wed, 23 Oct 2024 17:49:07 -0300 Subject: [PATCH 4/5] feat: much more responsive bottom-bar --- static/style/inverted-style.css | 27 +++++++++++++++++++++++++-- static/style/style.css | 27 +++++++++++++++++++++++++-- 2 files changed, 50 insertions(+), 4 deletions(-) diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 1ade7e95..dc86a150 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -1,4 +1,4 @@ -@media (orientation: portrait) { +@media (orientation: portrait) or (max-width: 800px) { #filters { display: none; } @@ -11,9 +11,32 @@ #toolbar{ justify-content: space-between; } + #bottom-bar{ + height: 60px; + padding: 10px 20px; + align-items: center; + justify-content: center; + } + #filters-bottom{ + margin: 10px 20px; + display: flex; + flex-direction: column; + gap: 10px; + max-width: 600px; + } + .labels{ + margin: 0; + align-items: center; + width: 100%; + } + #filter-bottom{ + max-width: 100%; + margin: 0; + padding: 5px 0; + } } -@media (orientation: landscape) { +@media (orientation: landscape) and (width > 800px) { #bottom-bar, #filters-bottom { display: none; diff --git a/static/style/style.css b/static/style/style.css index 177a0476..50c1ee9b 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -1,4 +1,4 @@ -@media (orientation: portrait) { +@media (orientation: portrait) or (max-width: 800px) { #filters { display: none; } @@ -11,9 +11,32 @@ #toolbar{ justify-content: space-between; } + #bottom-bar{ + height: 60px; + padding: 10px 20px; + align-items: center; + justify-content: center; + } + #filters-bottom{ + margin: 10px 20px; + display: flex; + flex-direction: column; + gap: 10px; + max-width: 600px; + } + .labels{ + margin: 0; + align-items: center; + width: 100%; + } + #filter-bottom{ + max-width: 100%; + margin: 0; + padding: 5px 0; + } } -@media (orientation: landscape) { +@media (orientation: landscape) and (width > 800px) { #bottom-bar, #filters-bottom { display: none; From 36330008d2df407010cb3b59cf2c95bb3b028401 Mon Sep 17 00:00:00 2001 From: zugdev Date: Wed, 23 Oct 2024 18:12:12 -0300 Subject: [PATCH 5/5] feat: fix labels --- static/style/inverted-style.css | 5 +++++ static/style/style.css | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index dc86a150..fb078752 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -210,6 +210,11 @@ padding: 12px 0; align-items: center; } + .issue-element-inner .labels { + display: flex; + margin-left: auto; + justify-content: flex-end; + } p.organization-name { opacity: 0.5; display: inline-block; diff --git a/static/style/style.css b/static/style/style.css index 50c1ee9b..ffb03bce 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -210,6 +210,11 @@ padding: 12px 0; align-items: center; } + .issue-element-inner .labels { + display: flex; + margin-left: auto; + justify-content: flex-end; + } p.organization-name { opacity: 0.5; display: inline-block;