Skip to content

Commit 2491719

Browse files
TechQueryTechQuery
committed
[optimize] simplify JSX & LESS of Open Source Bounty page
1 parent 2c672b2 commit 2491719

4 files changed

Lines changed: 69 additions & 104 deletions

File tree

‎components/Navigator/MainNavigator.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
4141
{ href: '/project', title: t('open_source_projects') },
4242
{ href: '/issue', title: 'GitHub issues' },
4343
{ href: '/license-filter', title: t('license_filter') },
44+
{ href: '/finance', title: t('finance_page_title') },
4445
],
4546
},
4647
{
@@ -58,18 +59,17 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
5859
href: 'https://test.hackathon.fcc-cd.dev/open-source',
5960
title: textJoin(t('hackathon'), t('open_source_projects')),
6061
},
61-
{ href: '/bounty', title: t('bounty') },
62-
{ href: '/license-filter', title: t('license_filter') },
6362
],
6463
},
64+
{ href: '/bounty', title: t('bounty') },
6565
{
6666
title: t('NGO'),
6767
subs: [
68-
{ href: '/NGO', title: t('China_NGO_DB') },
6968
{
7069
href: 'https://open-source-bazaar.feishu.cn/wiki/VGrMwiweVivWrHkTcvpcJTjjnoY',
7170
title: t('Open_Source_NGO_plan'),
7271
},
72+
{ href: '/NGO', title: t('China_NGO_DB') },
7373
],
7474
},
7575
{

‎pages/bounty.tsx‎

Lines changed: 65 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,25 @@
11
import { observer } from 'mobx-react';
22
import { FC, useContext } from 'react';
3-
import { Card, Col, Container, Ratio, Row } from 'react-bootstrap';
3+
import { Card, Col, Container, Row } from 'react-bootstrap';
44

55
import { PageHead } from '../components/Layout/PageHead';
66
import { I18nContext } from '../models/Translation';
77
import styles from '../styles/Bounty.module.less';
88

9-
interface BountyViewProps {
10-
title: string;
11-
url: string;
12-
icon: string;
13-
colspan?: number;
14-
}
9+
type BountyViewProps = Record<'icon' | 'title' | 'url', string>;
1510

16-
const BountyView: FC<BountyViewProps> = ({ title, url, icon, colspan = 6 }) => (
17-
<Col md={colspan}>
18-
<Card className={styles.bountyCard} body>
19-
<Card.Title as="h2" className={`fs-5 ${styles.cardTitle}`}>
20-
{icon} {title}
21-
</Card.Title>
22-
<Ratio aspectRatio="4x3" className={styles.iframeContainer}>
23-
<iframe
24-
src={url}
25-
className={styles.bountyIframe}
26-
title={title}
27-
allow="clipboard-read; clipboard-write"
28-
/>
29-
</Ratio>
30-
</Card>
31-
</Col>
11+
const BountyView: FC<BountyViewProps> = ({ title, url, icon }) => (
12+
<Card className={`${styles.bountyCard} rounded-4`} body>
13+
<Card.Title as="h2" className="fs-5">
14+
{icon} <span className={styles.cardTitle}>{title}</span>
15+
</Card.Title>
16+
<div
17+
className={`${styles.iframeContainer} overflow-hidden w-100 rounded-4 position-relative`}
18+
style={{ height: 'calc(100vh - 10rem)' }}
19+
>
20+
<iframe className="border-0 h-100 w-100 rounded-4" title={title} loading="lazy" src={url} />
21+
</div>
22+
</Card>
3223
);
3324

3425
const BountyPage: FC = observer(() => {
@@ -38,82 +29,71 @@ const BountyPage: FC = observer(() => {
3829
<>
3930
<PageHead title={t('bounty_page_title')} />
4031

41-
{/* Hero Section */}
4232
<section className={styles.hero}>
4333
<Container>
4434
<h1 className={`text-center ${styles.title}`}>{t('bounty_page_title')}</h1>
4535
<p className={`text-center ${styles.description}`}>{t('bounty_page_description')}</p>
4636
</Container>
4737
</section>
4838

49-
<Container className="my-5">
50-
{/* Dashboard - full width */}
51-
<Row className="g-4 mb-4">
52-
<BountyView
53-
title={t('bounty_dashboard')}
54-
url="https://open-source-bazaar.feishu.cn/share/base/dashboard/shrcnt4EaAxn3zx9faRarERgEqf"
55-
icon="📊"
56-
colspan={12}
57-
/>
58-
</Row>
39+
<Container className="my-5 d-flex flex-column gap-4">
40+
<BountyView
41+
title={t('bounty_dashboard')}
42+
url="https://open-source-bazaar.feishu.cn/share/base/dashboard/shrcnt4EaAxn3zx9faRarERgEqf"
43+
icon="📊"
44+
/>
5945

60-
{/* Task Rank and Submission Form - same row */}
61-
<Row className="g-4 mb-4">
62-
<BountyView
63-
title={t('bounty_task_rank')}
64-
url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnUVgb8E73UthaB2Tk4glnSb"
65-
icon="📋"
66-
/>
67-
<BountyView
68-
title={t('bounty_task_submission')}
69-
url="https://open-source-bazaar.feishu.cn/share/base/form/shrcn2Ss97TSu3XgPi7mbZbrXLe"
70-
icon="📝"
71-
/>
46+
<Row className="g-4">
47+
<Col xs={12} lg={8}>
48+
<BountyView
49+
icon="📋"
50+
title={t('bounty_task_rank')}
51+
url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnUVgb8E73UthaB2Tk4glnSb"
52+
/>
53+
</Col>
54+
<Col xs={12} lg={4}>
55+
<BountyView
56+
icon="📝"
57+
title={t('bounty_task_submission')}
58+
url="https://open-source-bazaar.feishu.cn/share/base/form/shrcn2Ss97TSu3XgPi7mbZbrXLe"
59+
/>
60+
</Col>
7261
</Row>
7362

74-
{/* Achievement Rank and Submission Form - same row */}
75-
<Row className="g-4 mb-4">
76-
<BountyView
77-
title={t('bounty_achievement_rank')}
78-
url="https://open-source-bazaar.feishu.cn/share/base/view/shrcne4IY9mYAfoo9a69oxyAdTb"
79-
icon="🏆"
80-
/>
81-
<BountyView
82-
title={t('bounty_achievement_submission')}
83-
url="https://open-source-bazaar.feishu.cn/share/base/form/shrcn7yHGIOnPNjdZck3eBaiMVc"
84-
icon="✅"
85-
/>
63+
<Row className="g-4">
64+
<Col xs={12} lg={8}>
65+
<BountyView
66+
icon="🏆"
67+
title={t('bounty_achievement_rank')}
68+
url="https://open-source-bazaar.feishu.cn/share/base/view/shrcne4IY9mYAfoo9a69oxyAdTb"
69+
/>
70+
</Col>
71+
<Col xs={12} lg={4}>
72+
<BountyView
73+
icon="✅"
74+
title={t('bounty_achievement_submission')}
75+
url="https://open-source-bazaar.feishu.cn/share/base/form/shrcn7yHGIOnPNjdZck3eBaiMVc"
76+
/>
77+
</Col>
8678
</Row>
8779

88-
{/* Token Rank - full width */}
89-
<Row className="g-4 mb-4">
90-
<BountyView
91-
title={t('bounty_token_rank')}
92-
url="https://open-source-bazaar.feishu.cn/share/base/view/shrcn6QBgImHEjFH5qDf5tjmrzb"
93-
icon="🪙"
94-
colspan={12}
95-
/>
96-
</Row>
80+
<BountyView
81+
icon="🪙"
82+
title={t('bounty_token_rank')}
83+
url="https://open-source-bazaar.feishu.cn/share/base/view/shrcn6QBgImHEjFH5qDf5tjmrzb"
84+
/>
9785

98-
{/* Hero Rank - full width */}
99-
<Row className="g-4 mb-4">
100-
<BountyView
101-
title={t('bounty_hero_rank')}
102-
url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnyrOkRfqSAjWEjCQ9T4OOwc"
103-
icon="🦸"
104-
colspan={12}
105-
/>
106-
</Row>
86+
<BountyView
87+
icon="🦸"
88+
title={t('bounty_hero_rank')}
89+
url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnyrOkRfqSAjWEjCQ9T4OOwc"
90+
/>
10791

108-
{/* Debt Rank - full width */}
109-
<Row className="g-4 mb-4">
110-
<BountyView
111-
title={t('bounty_debt_rank')}
112-
url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnImOzkBXW3okKp3nLskPMgd"
113-
icon="💳"
114-
colspan={12}
115-
/>
116-
</Row>
92+
<BountyView
93+
icon="💳"
94+
title={t('bounty_debt_rank')}
95+
url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnImOzkBXW3okKp3nLskPMgd"
96+
/>
11797
</Container>
11898
</>
11999
);

‎pages/finance/index.module.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
display: grid;
2727
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
2828
gap: 1rem;
29+
list-style: none;
2930
}
3031

3132
.statCard {

‎styles/Bounty.module.less‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@
7474
border-bottom: 3px solid;
7575
border-image: linear-gradient(90deg, #f093fb, #f5576c, #ffd140) 1;
7676
background: linear-gradient(90deg, #f093fb, #f5576c, #ffd140);
77-
-webkit-background-clip: text;
7877
padding-bottom: 0.5rem;
7978
font-weight: 700;
8079
font-size: 1.3rem;
@@ -87,20 +86,5 @@
8786
}
8887

8988
.iframeContainer {
90-
position: relative;
91-
border-radius: 12px;
9289
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
93-
width: 100%;
94-
overflow: hidden;
95-
96-
@media (max-width: 768px) {
97-
aspect-ratio: 1 / 1; // More square on mobile
98-
}
99-
}
100-
101-
.bountyIframe {
102-
border: none;
103-
border-radius: 12px;
104-
width: 100%;
105-
height: 100%;
10690
}

0 commit comments

Comments
 (0)