Improve card mode

Signed-off-by: Cintia Sanchez Garcia <[email protected]>
cncf · Aug 15, 2023 · b61e983 · b61e983
1 parent 3836b3f
commit b61e983
Show file tree

Hide file tree

Showing 12 changed files with 368 additions and 162 deletions.
diff --git a/web/package.json b/web/package.json
@@ -19,7 +19,8 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.2"
+    "react-router-dom": "^6.14.2",
+    "react-waypoint": "^10.3.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.195",

diff --git a/web/src/App.css b/web/src/App.css
@@ -55,6 +55,7 @@ select:focus {
 a,
 .btn-link {
   text-decoration: none;
+  color: inherit;
 }
 
 @media (hover: hover) {

diff --git a/web/src/hooks/useBreakpointDetect.ts b/web/src/hooks/useBreakpointDetect.ts
@@ -1,7 +1,7 @@
+import { throttle } from 'lodash';
 import { useEffect, useState } from 'react';
 
 import { Breakpoint } from '../types';
-import throttle from '../utils/throttle';
 
 const getDeviceConfig = (width: number): Breakpoint | undefined => {
   if (width < 576) {

diff --git a/web/src/layout/explore/Content.tsx b/web/src/layout/explore/Content.tsx
@@ -7,6 +7,7 @@ import CardCategory from './cardCategory';
 import GridCategory from './gridCategory';
 
 interface Props {
+  isSelected: boolean;
   containerWidth: number;
   fullDataReady: boolean;
   data: CategoriesData;
@@ -29,10 +30,10 @@ const Content = memo(function Content(props: Props) {
       </div>
       <div className={props.selectedViewMode === ViewMode.Card ? 'd-block' : 'd-none'}>
         <CardCategory
+          isVisible={props.isSelected && props.selectedViewMode === ViewMode.Card}
           fullDataReady={props.fullDataReady}
           data={props.data}
           categories_overridden={props.categories_overridden}
-          visible={props.selectedViewMode === ViewMode.Card}
         />
       </div>
     </>

diff --git a/web/src/layout/explore/cardCategory/CardCategory.module.css b/web/src/layout/explore/cardCategory/CardCategory.module.css
@@ -3,6 +3,9 @@
   max-width: 270px;
   min-width: 270px;
   font-size: 0.8rem;
+  top: 1rem;
+  bottom: 1rem;
+  height: calc(100vh - 2rem);
 }
 
 .truncateWrapper {
@@ -31,11 +34,18 @@
 }
 
 .subcategoryBtn:hover {
-  color: var(--bs-primary);
+  color: inherit;
   text-decoration: underline;
   background-color: rgba(0, 0, 0, 0.035);
 }
 
+.title {
+  font-size: 0.8rem;
+  min-width: 0;
+  scroll-margin: 1rem;
+  background-color: var(--bs-gray-300);
+}
+
 .card {
   height: 237px;
   font-size: 90%;
@@ -48,6 +58,29 @@
 
 .card :global(.accepted-date) {
   display: flex !important;
+  .title {
+    font-size: 0.8rem;
+    min-width: 0;
+  }
+
+  .card {
+    height: 237px;
+    font-size: 90%;
+    cursor: pointer;
+  }
+
+  .card :global(.badge) {
+    font-size: 65%;
+  }
+
+  .card :global(.accepted-date) {
+    display: flex !important;
+  }
+
+  .card:hover {
+    border-color: var(--bs-primary) !important;
+    box-shadow: 0px 0px 5px 0px var(--bs-focus-ring-color);
+  }
 }
 
 .card:hover {

diff --git a/web/src/layout/explore/cardCategory/CardTitle.tsx b/web/src/layout/explore/cardCategory/CardTitle.tsx
@@ -1,6 +1,6 @@
+import { throttle } from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 
-import throttle from '../../../utils/throttle';
 import styles from './CardTitle.module.css';
 
 interface Props {

diff --git a/web/src/layout/explore/cardCategory/Content.module.css b/web/src/layout/explore/cardCategory/Content.module.css
@@ -0,0 +1,47 @@
+.title {
+  font-size: 0.8rem;
+  min-width: 0;
+  background-color: var(--bs-gray-300);
+}
+
+.card {
+  height: 237px;
+  font-size: 90%;
+  cursor: pointer;
+}
+
+.card :global(.badge) {
+  font-size: 65%;
+}
+
+.card :global(.accepted-date) {
+  display: flex !important;
+  .title {
+    font-size: 0.8rem;
+    min-width: 0;
+  }
+
+  .card {
+    height: 237px;
+    font-size: 90%;
+    cursor: pointer;
+  }
+
+  .card :global(.badge) {
+    font-size: 65%;
+  }
+
+  .card :global(.accepted-date) {
+    display: flex !important;
+  }
+
+  .card:hover {
+    border-color: var(--bs-primary) !important;
+    box-shadow: 0px 0px 5px 0px var(--bs-focus-ring-color);
+  }
+}
+
+.card:hover {
+  border-color: var(--bs-primary) !important;
+  box-shadow: 0px 0px 5px 0px var(--bs-focus-ring-color);
+}
diff --git a/web/src/layout/explore/cardCategory/Content.tsx b/web/src/layout/explore/cardCategory/Content.tsx
@@ -0,0 +1,83 @@
+import { orderBy } from 'lodash';
+import { useNavigate, useOutletContext } from 'react-router-dom';
+import { Waypoint } from 'react-waypoint';
+
+import { BaseItem, Item, OutletContext } from '../../../types';
+import { CategoriesData } from '../../../utils/prepareData';
+import { convertStringSpaces, Menu } from '.';
+import Card from './Card';
+import styles from './Content.module.css';
+
+interface Props {
+  menu: Menu;
+  data: CategoriesData;
+  isVisible: boolean;
+}
+const Content = (props: Props) => {
+  const navigate = useNavigate();
+  const { updateActiveItemId } = useOutletContext() as OutletContext;
+
+  const sortItems = (firstCategory: string, firstSubcategory: string): BaseItem[] => {
+    return orderBy(
+      props.data[firstCategory][firstSubcategory].items,
+      [(item: BaseItem) => item.name.toString()],
+      'asc'
+    );
+  };
+
+  const handleEnter = (id: string) => {
+    if (`#${id}` !== location.hash) {
+      navigate(
+        { ...location, hash: id },
+        {
+          replace: true,
+        }
+      );
+    }
+  };
+
+  return (
+    <>
+      {Object.keys(props.menu).map((cat: string) => {
+        return (
+          <div key={`list_cat_${cat}`}>
+            {props.menu[cat].map((subcat: string) => {
+              const id = convertStringSpaces(`${cat}/${subcat}`);
+              return (
+                <Waypoint
+                  key={`list_subcat_${subcat}`}
+                  topOffset="3%"
+                  bottomOffset="97%"
+                  onEnter={() => handleEnter(id)}
+                  fireOnRapidScroll={false}
+                >
+                  <div>
+                    <div id={id} className={`fw-semibold p-2 mb-3 text-truncate w-100 ${styles.title}`}>
+                      {cat} / {subcat}
+                    </div>
+                    <div className="row g-4 mb-4">
+                      {sortItems(cat, subcat).map((item: Item) => {
+                        return (
+                          <div key={`card_${item.id}`} className="col-12 col-lg-6 col-xxl-4 col-xxxl-3">
+                            <div
+                              className={`card rounded-0 p-3 ${styles.card}`}
+                              onClick={() => updateActiveItemId(item.id)}
+                            >
+                              <Card item={item} className="h-100" />
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </Waypoint>
+              );
+            })}
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default Content;