Improve filters for mobile devices (#609)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>
cncf · May 28, 2024 · 8910dee · 8910dee
1 parent 1edea27
commit 8910dee
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 16 deletions.
diff --git a/web/package.json b/web/package.json
@@ -6,7 +6,7 @@
   "type": "module",
   "dependencies": {
     "classnames": "^2.5.1",
-    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.2.5",
+    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.3.0",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "react": "^18.3.1",

diff --git a/web/src/layout/common/Card.tsx b/web/src/layout/common/Card.tsx
@@ -60,6 +60,16 @@ const Card = (props: Props) => {
     });
   };
 
+  const searchByProject = (project: string, foundation: string) => {
+    navigate({
+      pathname: '/search',
+      search: prepareQueryString({
+        pageNumber: 1,
+        filters: { [FilterKind.Project]: [project], [FilterKind.Foundation]: [foundation], ...getExtraFilter() },
+      }),
+    });
+  };
+
   const searchByFilter = (filter: FilterKind, value: string) => {
     navigate({
       pathname: '/search',
@@ -128,12 +138,15 @@ const Card = (props: Props) => {
                 effective_theme={effective}
               />
             </div>
-            <div className="truncateWrapper w-100">
-              <div className="d-flex flex-row justify-content-between align-items-end text-truncate">
-                <span className={`text-truncate fw-bold mb-0 ${styles.title}`}>
+            <div className="d-flex flex-row justify-content-between align-items-end text-truncate">
+              <button
+                className="btn btn-sm btn-link border-0 p-0 mw-100 align-baseline"
+                onClick={() => searchByProject(props.issue.project.name, props.issue.project.foundation)}
+              >
+                <div className={`text-truncate fw-bold mb-0 ${styles.title}`}>
                   {props.issue.project.display_name || props.issue.project.name}
-                </span>
-              </div>
+                </div>
+              </button>
             </div>
           </div>
 
@@ -199,7 +212,7 @@ const Card = (props: Props) => {
                     <div className="truncateWrapper">
                       <button
                         className="btn btn-sm btn-link border-0 p-0 mw-100 align-baseline"
-                        onClick={() => searchByFilter(FilterKind.Project, props.issue.project.name)}
+                        onClick={() => searchByProject(props.issue.project.name, props.issue.project.foundation)}
                       >
                         <div className="d-flex flex-row justify-content-between align-items-end text-truncate">
                           <span
@@ -308,20 +321,21 @@ const Card = (props: Props) => {
                   <GenericBadge
                     content={props.issue.repository.languages[0]}
                     className={`fw-normal text-secondary text-uppercase ms-2 bg-purple ${styles.badge}`}
+                    onClick={() => searchByFilter(FilterKind.Language, props.issue.repository.languages[0])}
                   />
                 </div>
               )}
 
               <div
                 className={`d-none d-sm-flex flex-row flex-wrap overflow-hidden justify-content-end ${styles.topicsWrapper}`}
               >
-                {availableTopics.slice(0, 4).map((lg: string) => {
+                {availableTopics.slice(0, 4).map((topic: string) => {
                   return (
                     <GenericBadge
-                      content={lg}
+                      content={topic}
                       className={`text-secondary lighterText ${styles.badge} ms-2`}
-                      key={lg}
-                      onClick={() => searchByText(lg)}
+                      key={topic}
+                      onClick={() => searchByText(topic)}
                     />
                   );
                 })}

diff --git a/web/src/layout/search/Filters.module.css b/web/src/layout/search/Filters.module.css
@@ -0,0 +1,8 @@
+.dropdownFilter {
+  max-height: 200px;
+}
+
+.searchBar {
+  margin: 0.75rem 0.3rem !important;
+  width: calc(100% - 0.6rem);
+}
diff --git a/web/src/layout/search/Filters.tsx b/web/src/layout/search/Filters.tsx
@@ -5,6 +5,7 @@ import { IoMdCloseCircleOutline } from 'react-icons/io';
 
 import { AppContext } from '../../context/AppContextProvider';
 import { FilterKind } from '../../types';
+import styles from './Filters.module.css';
 
 interface Props {
   visibleTitle: boolean;
@@ -55,10 +56,10 @@ const Filters = (props: Props) => {
       {props.filters.map((section: FilterSection) => {
         const activeFilters = section.key ? props.activeFilters[section.key] : getActiveFiltersForOther();
         const key = (section.key || section.title) as FilterKind;
+        const withSearchBar = [FilterKind.Language, FilterKind.Project].includes(key);
 
-        // Does not render project and language filters or disabled sections on mobile version
+        // Does not render disabled sections on mobile version
         if (
-          [FilterKind.Language, FilterKind.Project].includes(key) ||
           props.disabledSections.includes(key) ||
           section.options.length === 0 ||
           (isEmbed && key === FilterKind.Foundation)
@@ -72,6 +73,10 @@ const Filters = (props: Props) => {
               activeFilters={activeFilters}
               section={section}
               onChange={props.onChange}
+              withSearchBar={withSearchBar}
+              contentClassName={withSearchBar ? `border overflow-auto p-3 ${styles.dropdownFilter}` : ''}
+              searchBarClassName={withSearchBar ? styles.searchBar : ''}
+              sortedBySelected={withSearchBar}
               visibleTitle
             />
           </React.Fragment>

diff --git a/web/src/layout/search/FiltersInLine.module.css b/web/src/layout/search/FiltersInLine.module.css
@@ -82,6 +82,10 @@
   font-size: 0.8rem;
 }
 
+.searchBar {
+  width: 94% !important;
+}
+
 @media only screen and (min-width: 1200px) {
   .dropdownWrapper {
     width: 119px;

diff --git a/web/src/layout/search/FiltersInLine.tsx b/web/src/layout/search/FiltersInLine.tsx
@@ -70,9 +70,11 @@ const Filters = (props: FiltersProps) => {
         contentClassName={`overflow-auto ${styles.options}`}
         section={props.section}
         withSearchBar={props.withSearchBar}
+        searchBarClassName={props.withSearchBar ? styles.searchBar : ''}
         onChange={onChangeFilter}
         visibleTitle={false}
         disabled={props.disabled}
+        sortedBySelected={props.withSearchBar}
       />
     </div>
   );

diff --git a/web/yarn.lock b/web/yarn.lock
@@ -3420,9 +3420,9 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
-"clo-ui@https://github.com/cncf/clo-ui.git#v0.2.5":
-  version "0.2.5"
-  resolved "https://github.com/cncf/clo-ui.git#4fa10666174e9192accbbb5e1a3b23ffa21fadd7"
+"clo-ui@https://github.com/cncf/clo-ui.git#v0.3.0":
+  version "0.3.0"
+  resolved "https://github.com/cncf/clo-ui.git#cb97af364d55d2c2433f3851246ddc36bd1f181d"
   dependencies:
     bootstrap "^5.3.3"
     classnames "^2.5.1"