Skip to content

Commit dee7a1b

Browse files
MMeschMMesch
committed
Fundable: tag filters + card grid, remove sidebar
Replace section-based sidebar navigation with tag filter chips (All / Jupyter Ecosystem / Package Management / Scientific Computing / Apache Arrow) and a 3-column responsive card grid. Each card shows category label, title, truncated description, price and funding progress. Filter state is local React state; no routing changes needed. Remove MenuSidebar, fundable_layout flex split, and sidebar CSS. Also remove yarn.lock so Docusaurus uses npm.
1 parent fabf886 commit dee7a1b

4 files changed

Lines changed: 199 additions & 10931 deletions

File tree

‎src/components/fundable/FundableProjectCard.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import styles from "./styles.module.css";
2+
import { useHistory } from "@docusaurus/router";
3+
import ProgressBar from "./ProgressBar";
4+
5+
export default function FundableProjectCard({ project }) {
6+
const history = useHistory();
7+
8+
function open() {
9+
history.push({
10+
pathname: `/fundable/${project.pageName}`,
11+
state: { fromFundable: true, scrollY: window.scrollY },
12+
});
13+
}
14+
15+
const desc = project.shortDescription.length > 160
16+
? project.shortDescription.substring(0, 160) + "…"
17+
: project.shortDescription;
18+
19+
return (
20+
<div className={styles.fund_card} onClick={open}>
21+
<div className={styles.fund_card_category}>{project.category}</div>
22+
<div className={styles.fund_card_title}>{project.title}</div>
23+
<p className={styles.fund_card_desc}>{desc}</p>
24+
<div className={styles.fund_card_footer}>
25+
<div className={styles.fund_card_price}>{project.price}</div>
26+
<ProgressBar value={project.currentFundingPercentage} color="var(--ifm-color-secondary-s1)" />
27+
<div className={styles.fund_card_pct}>
28+
{project.currentFundingPercentage}% funded
29+
{project.currentNbOfFunders > 0 && ` · ${project.currentNbOfFunders} funder${project.currentNbOfFunders > 1 ? "s" : ""}`}
30+
</div>
31+
</div>
32+
</div>
33+
);
34+
}

‎src/components/fundable/index.tsx‎

Lines changed: 40 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,62 @@
1+
import { useState } from "react";
12
import styles from "./styles.module.css";
23
import { fundableProjectsDetails } from "./projectsDetails";
3-
import ProjectCategory from "./ProjectCategory";
4-
import MenuSidebar from "./MenuSideBar";
4+
import FundableProjectCard from "./FundableProjectCard";
55
import LinkToContact from "../home/LinkToContact";
66

7+
const ALL_PROJECTS = Object.values(fundableProjectsDetails).flat();
8+
const CATEGORIES = ["All", ...new Set(ALL_PROJECTS.map((p) => p.category))];
9+
710
export function getCategoryFromProjectPageName(pageName: string) {
8-
for (const [categoryName, projectsByCategory] of Object.entries(fundableProjectsDetails)) {
9-
const project = projectsByCategory.find((project) => project.pageName === pageName);
10-
if (project) {
11-
return projectsByCategory;
12-
}
11+
for (const projects of Object.values(fundableProjectsDetails)) {
12+
const found = projects.find((p) => p.pageName === pageName);
13+
if (found) return projects;
1314
}
1415
return null;
1516
}
1617

1718
export function MainAreaFundableProjects() {
19+
const [active, setActive] = useState("All");
20+
21+
const visible = active === "All"
22+
? ALL_PROJECTS
23+
: ALL_PROJECTS.filter((p) => p.category === active);
24+
1825
return (
1926
<div>
20-
<h1 style={{ padding: "0" }}>Check out our projects available for funding!</h1>
27+
<h1>Projects available for funding</h1>
28+
29+
<div className={styles.filter_tags}>
30+
{CATEGORIES.map((cat) => (
31+
<button
32+
key={cat}
33+
className={styles.filter_tag + (active === cat ? " " + styles.filter_tag_active : "")}
34+
onClick={() => setActive(cat)}
35+
>
36+
{cat}
37+
</button>
38+
))}
39+
</div>
40+
41+
<div className={styles.cards_grid}>
42+
{visible.map((project) => (
43+
<FundableProjectCard key={project.pageName} project={project} />
44+
))}
45+
</div>
2146

22-
<section id="jupyter-ecosystem">
23-
<ProjectCategory
24-
projectCategoryName={"Jupyter ecosystem"}
25-
projectCategory={fundableProjectsDetails.jupyterEcosystem}
26-
/>
27-
</section>
28-
<section id="package-management">
29-
<ProjectCategory
30-
projectCategoryName={"Package management"}
31-
projectCategory={fundableProjectsDetails.packageManagement}
32-
/>
33-
</section>
34-
<section id="scientific-computing">
35-
<ProjectCategory
36-
projectCategoryName={"Scientific computing"}
37-
projectCategory={fundableProjectsDetails.scientificComputing}
38-
/>
39-
</section>
40-
<section id="apache-arrow">
41-
<ProjectCategory
42-
projectCategoryName={"Apache Arrow and Parquet"}
43-
projectCategory={fundableProjectsDetails.apacheArrow}
44-
/>
45-
</section>
46-
<section id="propose-and-fund-a-project">
47-
<h2 className={styles.project_category_header} style={{ margin: "0px" }}>Can't find a project?</h2>
48-
<p style={{ marginTop: "var(--ifm-spacing-lg)" }}>If you have a project in mind that you think would be relevant to our expertise, please contact us to discuss it.</p>
49-
<LinkToContact label={"CONTACT US!"} />
50-
</section>
47+
<div className={styles.propose_section}>
48+
<h2>Can't find a project?</h2>
49+
<p>If you have a project in mind that you think would be relevant to our expertise, please contact us to discuss it.</p>
50+
<LinkToContact label="CONTACT US!" />
51+
</div>
5152
</div>
52-
)
53+
);
5354
}
5455

5556
export default function FundableProjects() {
5657
return (
57-
5858
<div className="page-content upper-container-with-margin-top">
59-
<div className={styles.fundable_layout}>
60-
<aside className={styles.fundable_sidebar}>
61-
<MenuSidebar />
62-
</aside>
63-
<div className={styles.fundable_main}>
64-
<MainAreaFundableProjects />
65-
</div>
66-
</div>
59+
<MainAreaFundableProjects />
6760
</div>
68-
6961
);
7062
}

‎src/components/fundable/styles.module.css‎

Lines changed: 125 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,128 @@
1+
/* ── Filter + grid layout ──────────────────────────────── */
2+
3+
.filter_tags {
4+
display: flex;
5+
flex-wrap: wrap;
6+
gap: var(--ifm-spacing-sm);
7+
margin-bottom: var(--ifm-spacing-xl);
8+
}
9+
10+
.filter_tag {
11+
padding: 6px var(--ifm-spacing-md);
12+
border-radius: 20px;
13+
border: 1.5px solid var(--ifm-color-secondary-s3);
14+
background: transparent;
15+
color: var(--ifm-color-secondary-s3);
16+
font-family: var(--ifm-font-family-roboto);
17+
font-size: 13px;
18+
font-weight: 600;
19+
cursor: pointer;
20+
transition: background 0.15s, color 0.15s, border-color 0.15s;
21+
}
22+
23+
.filter_tag:hover {
24+
background: var(--ifm-color-secondary-s1);
25+
color: var(--ifm-color-secondary-s2);
26+
border-color: var(--ifm-color-secondary-s1);
27+
}
28+
29+
.filter_tag_active {
30+
background: var(--ifm-color-secondary-s2);
31+
color: white;
32+
border-color: var(--ifm-color-secondary-s2);
33+
}
34+
35+
.cards_grid {
36+
display: grid;
37+
grid-template-columns: repeat(3, 1fr);
38+
gap: var(--ifm-spacing-xl);
39+
margin-bottom: var(--ifm-spacing-3xl);
40+
}
41+
42+
@media (max-width: 996px) {
43+
.cards_grid {
44+
grid-template-columns: repeat(2, 1fr);
45+
}
46+
}
47+
48+
@media (max-width: 600px) {
49+
.cards_grid {
50+
grid-template-columns: 1fr;
51+
}
52+
}
53+
54+
.fund_card {
55+
background: white;
56+
border-radius: 10px;
57+
padding: var(--ifm-spacing-lg);
58+
box-shadow: var(--ifm-shadow-card);
59+
cursor: pointer;
60+
display: flex;
61+
flex-direction: column;
62+
gap: var(--ifm-spacing-sm);
63+
transition: box-shadow 0.2s;
64+
border: 1px solid transparent;
65+
}
66+
67+
.fund_card:hover {
68+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
69+
border-color: var(--ifm-color-neutral-n3);
70+
}
71+
72+
.fund_card_category {
73+
font-size: 11px;
74+
font-weight: 700;
75+
text-transform: uppercase;
76+
letter-spacing: 0.6px;
77+
color: var(--ifm-color-secondary-s3);
78+
}
79+
80+
.fund_card_title {
81+
font-family: var(--ifm-font-family-roboto);
82+
font-size: 16px;
83+
font-weight: 600;
84+
color: var(--ifm-color-primary-p2);
85+
line-height: 1.4;
86+
}
87+
88+
.fund_card_desc {
89+
font-size: 13px !important;
90+
color: var(--ifm-color-neutral-n1);
91+
line-height: 1.5;
92+
flex: 1;
93+
padding: 0 !important;
94+
margin: 0 !important;
95+
}
96+
97+
.fund_card_footer {
98+
margin-top: auto;
99+
padding-top: var(--ifm-spacing-sm);
100+
border-top: 1px solid var(--ifm-color-neutral-n3);
101+
display: flex;
102+
flex-direction: column;
103+
gap: 4px;
104+
}
105+
106+
.fund_card_price {
107+
font-family: var(--ifm-font-family-roboto);
108+
font-size: 17px;
109+
font-weight: 700;
110+
color: var(--ifm-color-primary-p2);
111+
}
112+
113+
.fund_card_pct {
114+
font-size: 12px;
115+
color: var(--ifm-color-neutral-n1);
116+
}
117+
118+
.propose_section {
119+
border-top: 1px solid var(--ifm-color-neutral-n3);
120+
padding-top: var(--ifm-spacing-2xl);
121+
margin-top: var(--ifm-spacing-xl);
122+
}
123+
124+
/* ── Legacy card (kept for SmallProjectCard / ProjectCategory) ── */
125+
1126
.small_project_card:hover {
2127
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
3128
}
@@ -106,60 +231,6 @@
106231
margin: var(--ifm-spacing-md) 0;
107232
}
108233

109-
.fundable_layout {
110-
display: flex;
111-
gap: var(--ifm-spacing-3xl);
112-
align-items: flex-start;
113-
}
114-
115-
.fundable_sidebar {
116-
width: 200px;
117-
flex-shrink: 0;
118-
}
119-
120-
.fundable_main {
121-
flex: 1;
122-
min-width: 0;
123-
}
124-
125-
.menu_sidebar {
126-
padding: var(--ifm-spacing-sm) 0;
127-
}
128-
129-
.menu_sidebar_item {
130-
font-family: var(--ifm-font-family-roboto);
131-
font-size: 15px;
132-
font-style: normal;
133-
font-weight: 500;
134-
line-height: 40px;
135-
letter-spacing: 0.15px;
136-
}
137-
138-
.menu_sidebar_container {
139-
position: sticky;
140-
top: 80px;
141-
}
142-
143-
@media (max-width: 996px) {
144-
.fundable_sidebar {
145-
display: none;
146-
}
147-
}
148-
149-
.menu_sidebar_indicator {
150-
display: inline-block;
151-
width: 6px;
152-
height: 20px;
153-
border-radius: 4px;
154-
background-color: transparent;
155-
margin-right: 10px;
156-
transition: background-color 0.3s ease;
157-
vertical-align: middle;
158-
}
159-
160-
.active_section .menu_sidebar_indicator {
161-
background-color: #D9D9D9;
162-
}
163234

164235
.send_button {
165236
width: 258px;

0 commit comments

Comments
 (0)