Skip to content

Commit 2c672b2

Browse files
CopilotTechQuery
Copilot
and
TechQuery
committed
Address PR feedback: Use Ratio component, change leaderboard to rank, reorganize layout
Co-authored-by: TechQuery <[email protected]>
1 parent b1ff235 commit 2c672b2

File tree

5 files changed

+113
-102
lines changed

5 files changed

+113
-102
lines changed

‎pages/bounty.tsx‎

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

55
import { PageHead } from '../components/Layout/PageHead';
66
import { I18nContext } from '../models/Translation';
@@ -10,74 +10,30 @@ interface BountyViewProps {
1010
title: string;
1111
url: string;
1212
icon: string;
13+
colspan?: number;
1314
}
1415

15-
const BountyView: FC<BountyViewProps> = ({ title, url, icon }) => (
16-
<Col md={6} lg={4}>
17-
<Card className={styles.bountyCard}>
18-
<Card.Body>
19-
<h5 className={styles.cardTitle}>
20-
{icon} {title}
21-
</h5>
22-
<div className={styles.iframeContainer}>
23-
<iframe
24-
src={url}
25-
className={styles.bountyIframe}
26-
title={title}
27-
allow="clipboard-read; clipboard-write"
28-
/>
29-
</div>
30-
</Card.Body>
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>
3130
</Card>
3231
</Col>
3332
);
3433

3534
const BountyPage: FC = observer(() => {
3635
const { t } = useContext(I18nContext);
3736

38-
const bountyViews: BountyViewProps[] = [
39-
{
40-
title: t('bounty_dashboard'),
41-
url: 'https://open-source-bazaar.feishu.cn/share/base/dashboard/shrcnt4EaAxn3zx9faRarERgEqf',
42-
icon: '📊',
43-
},
44-
{
45-
title: t('bounty_token_leaderboard'),
46-
url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcn6QBgImHEjFH5qDf5tjmrzb',
47-
icon: '🪙',
48-
},
49-
{
50-
title: t('bounty_task_leaderboard'),
51-
url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcnUVgb8E73UthaB2Tk4glnSb',
52-
icon: '📋',
53-
},
54-
{
55-
title: t('bounty_task_submission'),
56-
url: 'https://open-source-bazaar.feishu.cn/share/base/form/shrcn2Ss97TSu3XgPi7mbZbrXLe',
57-
icon: '📝',
58-
},
59-
{
60-
title: t('bounty_achievement_leaderboard'),
61-
url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcne4IY9mYAfoo9a69oxyAdTb',
62-
icon: '🏆',
63-
},
64-
{
65-
title: t('bounty_achievement_submission'),
66-
url: 'https://open-source-bazaar.feishu.cn/share/base/form/shrcn7yHGIOnPNjdZck3eBaiMVc',
67-
icon: '✅',
68-
},
69-
{
70-
title: t('bounty_hero_leaderboard'),
71-
url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcnyrOkRfqSAjWEjCQ9T4OOwc',
72-
icon: '🦸',
73-
},
74-
{
75-
title: t('bounty_debt_leaderboard'),
76-
url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcnImOzkBXW3okKp3nLskPMgd',
77-
icon: '💳',
78-
},
79-
];
80-
8137
return (
8238
<>
8339
<PageHead title={t('bounty_page_title')} />
@@ -91,10 +47,72 @@ const BountyPage: FC = observer(() => {
9147
</section>
9248

9349
<Container className="my-5">
94-
<Row className="g-4">
95-
{bountyViews.map(view => (
96-
<BountyView key={view.url} {...view} />
97-
))}
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>
59+
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+
/>
72+
</Row>
73+
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+
/>
86+
</Row>
87+
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>
97+
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>
107+
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+
/>
98116
</Row>
99117
</Container>
100118
</>

‎styles/Bounty.module.less‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,21 @@
3535
font-weight: 700;
3636
font-size: 3rem;
3737
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
38+
39+
@media (max-width: 768px) {
40+
font-size: 2rem;
41+
}
3842
}
3943

4044
.description {
4145
opacity: 0.9;
4246
margin: 0 auto;
4347
max-width: 800px;
4448
font-size: 1.2rem;
49+
50+
@media (max-width: 768px) {
51+
font-size: 1rem;
52+
}
4553
}
4654

4755
.bountyCard {
@@ -72,42 +80,27 @@
7280
font-size: 1.3rem;
7381
-webkit-text-fill-color: transparent;
7482
background-clip: text;
83+
84+
@media (max-width: 768px) {
85+
font-size: 1.1rem;
86+
}
7587
}
7688

7789
.iframeContainer {
7890
position: relative;
7991
border-radius: 12px;
8092
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
81-
padding-bottom: 75%; // 4:3 aspect ratio
8293
width: 100%;
8394
overflow: hidden;
95+
96+
@media (max-width: 768px) {
97+
aspect-ratio: 1 / 1; // More square on mobile
98+
}
8499
}
85100

86101
.bountyIframe {
87-
position: absolute;
88-
top: 0;
89-
left: 0;
90102
border: none;
91103
border-radius: 12px;
92104
width: 100%;
93105
height: 100%;
94106
}
95-
96-
// Responsive adjustments
97-
@media (max-width: 768px) {
98-
.title {
99-
font-size: 2rem;
100-
}
101-
102-
.description {
103-
font-size: 1rem;
104-
}
105-
106-
.cardTitle {
107-
font-size: 1.1rem;
108-
}
109-
110-
.iframeContainer {
111-
padding-bottom: 100%; // More square on mobile
112-
}
113-
}

‎translation/en-US.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@ export default {
3939
bounty_page_title: 'Open Source Bounty',
4040
bounty_page_description: 'Participate in open source projects and earn bounty rewards',
4141
bounty_dashboard: 'Dashboard',
42-
bounty_token_leaderboard: 'Token Leaderboard',
43-
bounty_task_leaderboard: 'Task Leaderboard',
42+
bounty_token_rank: 'Token Rank',
43+
bounty_task_rank: 'Task Rank',
4444
bounty_task_submission: 'Task Submission Form',
45-
bounty_achievement_leaderboard: 'Achievement Leaderboard',
45+
bounty_achievement_rank: 'Achievement Rank',
4646
bounty_achievement_submission: 'Achievement Submission Form',
47-
bounty_hero_leaderboard: 'Hero Leaderboard',
48-
bounty_debt_leaderboard: 'Debt Leaderboard',
47+
bounty_hero_rank: 'Hero Rank',
48+
bounty_debt_rank: 'Debt Rank',
4949

5050
//License-tool Page
5151
license_filter: 'Open Source License Selector',

‎translation/zh-CN.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ export default {
3838
bounty_page_title: '开源悬赏',
3939
bounty_page_description: '参与开源项目，获得悬赏奖励',
4040
bounty_dashboard: '仪表盘',
41-
bounty_token_leaderboard: '代币榜',
42-
bounty_task_leaderboard: '任务榜',
41+
bounty_token_rank: '代币榜',
42+
bounty_task_rank: '任务榜',
4343
bounty_task_submission: '任务发布表单',
44-
bounty_achievement_leaderboard: '成果榜',
44+
bounty_achievement_rank: '成果榜',
4545
bounty_achievement_submission: '成果提交表单',
46-
bounty_hero_leaderboard: '英雄榜',
47-
bounty_debt_leaderboard: '欠条榜',
46+
bounty_hero_rank: '英雄榜',
47+
bounty_debt_rank: '欠条榜',
4848

4949
//License-tool Page
5050
license_filter: '开源协议选择器',

‎translation/zh-TW.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ export default {
3838
bounty_page_title: '開源懸賞',
3939
bounty_page_description: '參與開源項目，獲得懸賞獎勵',
4040
bounty_dashboard: '儀表板',
41-
bounty_token_leaderboard: '代幣榜',
42-
bounty_task_leaderboard: '任務榜',
41+
bounty_token_rank: '代幣榜',
42+
bounty_task_rank: '任務榜',
4343
bounty_task_submission: '任務發布表單',
44-
bounty_achievement_leaderboard: '成果榜',
44+
bounty_achievement_rank: '成果榜',
4545
bounty_achievement_submission: '成果提交表單',
46-
bounty_hero_leaderboard: '英雄榜',
47-
bounty_debt_leaderboard: '欠條榜',
46+
bounty_hero_rank: '英雄榜',
47+
bounty_debt_rank: '欠條榜',
4848

4949
//License-tool Page
5050
license_filter: '開源許可證選擇器',

0 commit comments

Comments
 (0)