cncf · cynthia-sg · Jul 19, 2024 · Jul 19, 2024
diff --git a/ui/common/src/types/types.ts b/ui/common/src/types/types.ts
@@ -36,6 +36,7 @@ export interface Item extends BaseItem {
   github_discussions_url?: string;
   graduated_at?: string;
   incubating_at?: string;
+  archived_at?: string;
   joined_at?: string;
   mailing_list_url?: string;
   package_manager_url?: string;

diff --git a/ui/webapp/src/App.tsx b/ui/webapp/src/App.tsx
@@ -13,6 +13,7 @@ import {
   GAMES_PATH,
   GUIDE_PATH,
   LOGOS_PREVIEW_PATH,
+  PROJECTS_PATH,
   SCREENSHOTS_PATH,
   STATS_PATH,
 } from './data';
@@ -23,6 +24,7 @@ import Games from './layout/games';
 import Guide from './layout/guide';
 import Logos from './layout/logos';
 import NotFound from './layout/notFound';
+import Projects from './layout/projects';
 import Screenshots from './layout/screenshots';
 import Stats from './layout/stats';
 import { BaseData } from './types';
@@ -176,6 +178,7 @@ const App = () => {
           <Route path={STATS_PATH} component={Stats} />
           <Route path={GAMES_PATH} component={Games} />
           <Route path={FINANCES_PATH} component={Finances} />
+          <Route path={PROJECTS_PATH} component={Projects} />
           <Route path={LOGOS_PREVIEW_PATH} component={Logos} />
           <Route path="*" component={NotFound} />
           <Route path={SCREENSHOTS_PATH} component={() => <Screenshots initialData={data()!} />} />

diff --git a/ui/webapp/src/data.ts b/ui/webapp/src/data.ts
@@ -22,6 +22,7 @@ export const EMBED_SETUP_PATH = `${BASE_PATH}/embed-setup`;
 export const STATS_PATH = `${BASE_PATH}/stats`;
 export const GUIDE_PATH = `${BASE_PATH}/guide`;
 export const FINANCES_PATH = `${BASE_PATH}/finances`;
+export const PROJECTS_PATH = `${BASE_PATH}/projects`;
 export const GAMES_PATH = `${BASE_PATH}/games`;
 export const LOGOS_PREVIEW_PATH = `${BASE_PATH}/logos-preview`;
 export const SCREENSHOTS_PATH = '/screenshot';

diff --git a/ui/webapp/src/layout/common/ActiveFiltersList.tsx b/ui/webapp/src/layout/common/ActiveFiltersList.tsx
@@ -61,6 +61,9 @@ const FiltersPerCategoryList = (props: FiltersProps) => {
                     <Match when={props.category === FilterCategory.Maturity && c === `non-${getFoundationNameLabel()}`}>
                       <span class="text-uppercase">Not {getFoundationNameLabel()} project</span>
                     </Match>
+                    <Match when={props.category === FilterCategory.ProjectMaturity}>
+                      <>{startCase(c)}</>
+                    </Match>
                   </Switch>
                 </span>
               </div>

diff --git a/ui/webapp/src/layout/common/FiltersInLine.module.css b/ui/webapp/src/layout/common/FiltersInLine.module.css
@@ -17,10 +17,10 @@
 .btn {
   background-color: var(--body-bg);
   line-height: 1.5 !important;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: right 0.3rem center;
-  background-size: 12px 8px;
-  background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e');
+  background-position: right 0.75rem center;
+  background-size: 16px 12px;
   padding: 0.25rem 0.5rem;
   padding-right: 2.25rem;
   color: #212529 !important;
@@ -47,20 +47,6 @@
   min-width: 15px;
 }
 
-[data-theme='dark'] .btn {
-  background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23ccc%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M2 5l6 6 6-6%27/%3e%3c/svg%3e');
-  border-color: var(--solid-border) !important;
-  color: var(--color-font) !important;
-}
-
-[data-theme='dark'] .dropdown {
-  background-color: var(--bg-color);
-}
-
-[data-theme='dark'] .dropdown label {
-  color: var(--color-light-font) !important;
-}
-
 .options {
   max-height: 300px;
 }
@@ -89,8 +75,4 @@
     background-color: var(--body-bg);
     border-color: var(--clo-secondary) !important;
   }
-
-  [data-theme='dark'] .btn:hover {
-    border-color: var(--solid-border) !important;
-  }
 }
diff --git a/ui/webapp/src/layout/projects/MobileFilters.module.css b/ui/webapp/src/layout/projects/MobileFilters.module.css
@@ -0,0 +1,20 @@
+.filterBtn {
+  height: 28px;
+  font-size: 0.8rem;
+}
+
+.dot {
+  height: 0.8rem;
+  width: 0.8rem;
+  left: 1.8rem;
+  top: -0.4rem;
+}
+
+.checksList {
+  max-height: 300px;
+}
+
+.title {
+  font-size: 0.8rem;
+  color: var(--color4);
+}
diff --git a/ui/webapp/src/layout/projects/MobileFilters.tsx b/ui/webapp/src/layout/projects/MobileFilters.tsx
@@ -0,0 +1,95 @@
+import { SVGIcon, SVGIconKind } from 'common';
+import isEmpty from 'lodash/isEmpty';
+import { Accessor, createSignal, For, JSXElement, Show } from 'solid-js';
+
+import { ActiveFilters, FilterCategory, FilterSection } from '../../types';
+import Section from '../common/Section';
+import { Sidebar } from '../common/Sidebar';
+import styles from './MobileFilters.module.css';
+
+interface Props {
+  filters: FilterSection[];
+  updateActiveFilters: (value: FilterCategory, options: string[]) => void;
+  resetFilters: () => void;
+  initialActiveFilters: Accessor<ActiveFilters>;
+  children: JSXElement;
+}
+
+const MobileFilters = (props: Props) => {
+  const [openSidebar, setOpenSidebar] = createSignal<boolean>(false);
+
+  return (
+    <div>
+      <div class="position-relative">
+        <button
+          title="Filters"
+          class={`position-relative btn btn-sm btn-secondary text-white btn-sm rounded-0 py-0 me-0 me-md-4 ${styles.filterBtn} btnIconMobile me-3`}
+          onClick={() => setOpenSidebar(true)}
+        >
+          <div class="d-flex flex-row align-items-center">
+            <SVGIcon kind={SVGIconKind.Filters} />
+            <div class="d-none d-lg-block fw-semibold ps-2">Filters</div>
+          </div>
+        </button>
+        <Show when={!isEmpty(props.initialActiveFilters())}>
+          <div
+            class={`d-block d-lg-none position-absolute p-1 border border-3 border-white bg-dark rounded-circle ${styles.dot}`}
+          />
+        </Show>
+      </div>
+      <Sidebar
+        label="Filters"
+        header={
+          <div class="d-flex flex-row align-items-beseline">
+            <div>Filters</div>
+            <Show when={!isEmpty(props.initialActiveFilters())}>
+              <button
+                type="button"
+                title="Reset filters"
+                onClick={() => {
+                  props.resetFilters();
+                  setOpenSidebar(false);
+                }}
+                class="btn btn-sm btn-link text-muted py-0"
+                aria-label="Reset filters"
+              >
+                (reset all)
+              </button>
+            </Show>
+          </div>
+        }
+        visibleButton={false}
+        open={openSidebar()}
+        onOpenStatusChange={() => setOpenSidebar(false)}
+      >
+        <div class="position-relative p-3">
+          <div class="mb-4">
+            <div class="d-flex flex-row align-items-center pb-2">
+              <small class={`fw-semibold me-2 ${styles.title}`}>Order</small>
+            </div>
+            {props.children}
+          </div>
+
+          <div class="row g-4 g-lg-5 mb-4 mb-lg-5">
+            <For each={props.filters}>
+              {(section: FilterSection) => {
+                return (
+                  <Section
+                    section={section}
+                    activeFilters={props.initialActiveFilters()[section.value]}
+                    updateActiveFilters={props.updateActiveFilters}
+                    colClass="col-12"
+                    sectionClass={`border p-2 overflow-y-auto ${styles.checksList}`}
+                    device="mobile"
+                  />
+                );
+              }}
+            </For>
+          </div>
+        </div>
+      </Sidebar>
+    </div>
+  );
+};
+
+export default MobileFilters;
diff --git a/ui/webapp/src/layout/projects/Projects.module.css b/ui/webapp/src/layout/projects/Projects.module.css
@@ -0,0 +1,95 @@
+.tableLayout {
+  table-layout: fixed;
+}
+
+.thead {
+  font-size: 0.8rem;
+}
+
+.thead th {
+  color: var(--bs-gray-600);
+}
+
+.tableContent td {
+  font-size: 0.8rem;
+  line-height: 2;
+}
+
+.projectNameCell {
+  width: 18%;
+}
+
+.logoWrapper {
+  height: 20px;
+  width: 18px;
+  min-width: 18px;
+}
+
+.logo {
+  font-size: 1rem;
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+}
+
+.title {
+  font-size: 0.9rem;
+}
+
+.select {
+  border-color: #ced4da !important;
+  font-size: 0.75rem;
+  min-width: 175px;
+}
+
+@media (max-width: 1199.98px) {
+  .select {
+    width: 150px;
+  }
+
+  .thead {
+    font-size: 0.6rem;
+  }
+
+  .tableContent td {
+    font-size: 0.65rem;
+    line-height: 2;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .projectNameCell {
+    width: 23%;
+  }
+
+  .projectBtn {
+    font-size: 0.8rem;
+  }
+
+  .maturity {
+    font-size: 90%;
+  }
+}
+
+@media only screen and (max-width: 575.98px) {
+  .thead {
+    font-size: 0.5rem;
+  }
+
+  .tableContent td {
+    font-size: 0.6rem;
+    line-height: 1.75;
+  }
+
+  .projectNameCell {
+    width: 30%;
+  }
+
+  .projectBtn {
+    font-size: 0.7rem;
+  }
+
+  .maturity {
+    font-size: 80%;
+  }
+}