refactor: reorganize filter elements and update styles for filter but…

…ton and search bar
ubiquity · Dec 26, 2024 · a2f32aa · a2f32aa
1 parent 84a0ef3
commit a2f32aa
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 42 deletions.
diff --git a/src/home/sorting/sorting-manager.ts b/src/home/sorting/sorting-manager.ts
@@ -6,9 +6,8 @@ import { Sorting } from "./generate-sorting-buttons";
 export class SortingManager {
   private _lastChecked: HTMLInputElement | null = null;
   private _toolBarFilters: HTMLElement;
-  private _filterTextBox: HTMLInputElement;
+  private _filtersDiv: HTMLElement;
   private _sortingButtons: HTMLElement;
-  private _filterAvailableIssuesButton: HTMLElement;
   private _instanceId: string;
   private _filterAvailableIssues: boolean = true;
   private _sortingState: { [key: string]: "unsorted" | "ascending" | "descending" } = {}; // Track state for each sorting option
@@ -22,10 +21,12 @@ export class SortingManager {
 
     // Initialize sorting buttons first
     this._sortingButtons = this._generateSortingButtons(sortingOptions);
-    // Initialize filter available issues button
-    this._filterAvailableIssuesButton = this._generateFilterAvailableIssuesButton();
-    // Then initialize filter text box
-    this._filterTextBox = this._generateFilterTextBox();
+    // Initialize filters div
+    this._filtersDiv = this._generateFiltersDiv();
+    // Add filter search box to filters div
+    this._filtersDiv.appendChild(this._generateFilterTextBox());
+    // Add filter available issues button to filters div
+    this._filtersDiv.appendChild(this._generateFilterAvailableIssuesButton());
 
     // Initialize sorting states to 'unsorted' for all options
     sortingOptions.forEach((option) => {
@@ -34,9 +35,14 @@ export class SortingManager {
   }
 
   public render() {
-    this._toolBarFilters.appendChild(this._filterTextBox);
+    this._toolBarFilters.appendChild(this._filtersDiv);
     this._toolBarFilters.appendChild(this._sortingButtons);
-    this._toolBarFilters.appendChild(this._filterAvailableIssuesButton);
+  }
+
+  private _generateFiltersDiv() {
+    const div = document.createElement("div");
+    div.className = "filters";
+    return div;
   }
 
   private _generateFilterTextBox() {
@@ -124,7 +130,8 @@ export class SortingManager {
   }
 
   private _resetSearchBar() {
-    this._filterTextBox.value = "";
+    const filterTextBox = this._filtersDiv.querySelector('input[type="text"]') as HTMLInputElement;
+    filterTextBox.value = "";
     const newURL = new URL(window.location.href);
     newURL.searchParams.delete("search");
     window.history.replaceState({}, "", newURL.toString());
@@ -165,21 +172,14 @@ export class SortingManager {
   }
 
   private _generateFilterAvailableIssuesButton() {
-    const div = document.createElement("div");
-    div.className = "labels";
-
     const input = document.createElement("input");
     input.type = "button";
-    input.value = "filter availability";
+    input.value = "All Issues";
     input.id = `filter-availability-${this._instanceId}`;
 
-    const label = document.createElement("label");
-    label.htmlFor = `filter-availability-${this._instanceId}`;
-    label.textContent = "Show All Issues";
-
     input.addEventListener("click", () => {
       this._filterAvailableIssues = !this._filterAvailableIssues;
-      label.textContent = this._filterAvailableIssues ? "Show All Issues" : "Show Available Issues";
+      input.value = this._filterAvailableIssues ? "All Issues" : "Unassigned Issues";
 
       try {
         // Clear search when applying the filter
@@ -196,10 +196,7 @@ export class SortingManager {
       }
     });
 
-    div.appendChild(input);
-    div.appendChild(label);
-
-    return div;
+    return input;
   }
 
   private _detectSortingState() {

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -1,4 +1,4 @@
-@media (orientation: portrait) or (max-width: 1005px) {
+@media (orientation: portrait) or (max-width: 1050px) {
   #filters {
     display: none;
   }
@@ -247,8 +247,7 @@
     text-align: center;
     white-space: nowrap;
     background-color: #7f7f7f20;
-    min-width: 55px;
-    width: auto;
+    width: 64px;
     letter-spacing: 0.5px;
     flex-grow: 4;
     justify-content: center;
@@ -259,7 +258,7 @@
     overflow: hidden;
     display: inline-block;
   }
-  input[type="radio"], input[type="button"] {
+  input[type="radio"] {
     background-color: unset;
     cursor: default;
     appearance: unset;
@@ -682,24 +681,43 @@
     /* width: 100%; */
     /* justify-content: normal; */
   }
-  .filters-container input[type="text"] {
+  .filters {
+    display: flex;
+    min-width: 50%;
+  }
+  .filters input[type="text"] {
     padding: 4px;
     border: none;
     border-radius: 4px;
     background-color: #7f7f7f20;
     height: 16px;
     text-align: center;
+    width: 75%;
   }
-  #filter-top {
-    width: calc(100vw / 3);
-  }
-  .filters-container input[type="text"]::placeholder {
+  .filters input[type="text"]::placeholder {
     font-size: 12px;
     letter-spacing: 0.5px;
   }
-  .filters-container input[type="text"].hidden {
+  .filters input[type="text"].hidden {
     display: none;
   }
+  .filters input[type="button"] {
+    padding: 4px;
+    border: none;
+    border-radius: 4px;
+    margin: 0 4px 0 4px;
+    font-size: 12px;
+    text-align: center;
+    background-color: #7f7f7f20;
+    letter-spacing: 0.5px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: pointer;
+    width: 25%;
+  }
+  .filters input[type="button"]:hover {
+    background-color: #7f7f7f40;
+  }
   button#github-login-button {
     margin-left: auto;
   }

diff --git a/static/style/style.css b/static/style/style.css
@@ -1,4 +1,4 @@
-@media (orientation: portrait) or (max-width: 1005px) {
+@media (orientation: portrait) or (max-width: 1050px) {
   #filters {
     display: none;
   }
@@ -247,8 +247,7 @@
     text-align: center;
     white-space: nowrap;
     background-color: #80808020;
-    min-width: 55px;
-    width: auto;
+    width: 64px;
     letter-spacing: 0.5px;
     flex-grow: 4;
     justify-content: center;
@@ -259,7 +258,7 @@
     overflow: hidden;
     display: inline-block;
   }
-  input[type="radio"], input[type="button"] {
+  input[type="radio"] {
     background-color: unset;
     cursor: default;
     appearance: unset;
@@ -682,24 +681,43 @@
     /* width: 100%; */
     /* justify-content: normal; */
   }
-  .filters-container input[type="text"] {
+  .filters {
+    display: flex;
+    min-width: 50%;
+  }
+  .filters input[type="text"] {
     padding: 4px;
     border: none;
     border-radius: 4px;
     background-color: #80808020;
     height: 16px;
     text-align: center;
+    width: 75%;
   }
-  #filter-top {
-    width: calc(100vw / 3);
-  }
-  .filters-container input[type="text"]::placeholder {
+  .filters input[type="text"]::placeholder {
     font-size: 12px;
     letter-spacing: 0.5px;
   }
-  .filters-container input[type="text"].hidden {
+  .filters input[type="text"].hidden {
     display: none;
   }
+  .filters input[type="button"] {
+    padding: 4px;
+    border: none;
+    border-radius: 4px;
+    margin: 0 4px 0 4px;
+    font-size: 12px;
+    text-align: center;
+    background-color: #80808020;
+    letter-spacing: 0.5px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: pointer;
+    width: 25%;
+  }
+  .filters input[type="button"]:hover {
+    background-color: #80808040;
+  }
   button#github-login-button {
     margin-left: auto;
   }