Merge pull request #137 from zugdev/improve-text-fiter

feat: improve general UI, responsiveness and handle searches in URL
ubiquity · Oct 24, 2024 · cb5e4ad · cb5e4ad
2 parents 27ca00c + 3633000
commit cb5e4ad
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 25 deletions.
diff --git a/src/home/sorting/sorting-manager.ts b/src/home/sorting/sorting-manager.ts
@@ -30,20 +30,28 @@ 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();
         textBox.focus();
       }
     });
 
+    // 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;
@@ -55,6 +63,29 @@ export class SortingManager {
       } 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;

diff --git a/static/index.html b/static/index.html
@@ -56,8 +56,9 @@
             ></path></svg
           ><span
             ><span class="full">Ubiquity DAO | </span><span class="mid">DevPool<input type="checkbox" id="view-toggle" /></span></span></div></label
-      ><div id="filters" class="filters-container"></div><div id="authentication"></div
-    ></div>
+      ><div id="filters" class="filters-container"></div>
+      <div id="authentication"></div>
+    </div>
     <div id="bottom-bar" class="toolbar"
       ><div id="mobile-modal-scrub"><button id="scrub-left">&lsaquo;</button><button id="scrub-right">&rsaquo;</button></div
       ><div id="filters-bottom" class="filters-container"></div

diff --git 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;
   }
@@ -8,8 +8,35 @@
   #bottom-right {
     display: none;
   }
+  #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;
@@ -183,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;
@@ -238,7 +270,7 @@
   }
   .labels {
     display: flex;
-    margin-left: auto;
+    margin-left: 5px;
     justify-content: flex-end;
   }
   .partner {
@@ -327,13 +359,13 @@
     display: flex;
     border-bottom: 1px solid #7f7f7f20;
     -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 +405,6 @@
     font-weight: 400;
     text-rendering: geometricPrecision;
   }
-  .full {
-    display: unset !important;
-  }
   @media screen and (max-width: 804px) {
     .mid {
       padding: 0 4px;
@@ -632,15 +661,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 +775,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
@@ -1,4 +1,4 @@
-@media (orientation: portrait) {
+@media (orientation: portrait) or (max-width: 800px) {
   #filters {
     display: none;
   }
@@ -8,8 +8,35 @@
   #bottom-right {
     display: none;
   }
+  #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;
@@ -183,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;
@@ -238,7 +270,7 @@
   }
   .labels {
     display: flex;
-    margin-left: auto;
+    margin-left: 5px;
     justify-content: flex-end;
   }
   .partner {
@@ -327,13 +359,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 +405,6 @@
     font-weight: 400;
     text-rendering: geometricPrecision;
   }
-  .full {
-    display: unset !important;
-  }
   @media screen and (max-width: 804px) {
     .mid {
       padding: 0 4px;
@@ -632,15 +661,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 +775,7 @@
     font-size: 16px;
   }
   #view-toggle {
+    flex: 0 0 auto;
     appearance: none;
   }
   label[for="view-toggle"] {