enhancement: Add body scroll lock and top-right close button to README Badge Modal
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 82/100
- Issue 类型
- 功能
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- nextjs, react, typescript
调研方向
从 src/features/developer/components/user-profile-client.tsx 开始，追踪 badgeDialogOpen 如何控制 README Badge 模态框。添加背景滚动锁定，在对话框关闭或卸载时恢复之前的 overflow 状态，并在右上角添加一个关闭按钮，使用指定的翻译后 aria label。完成标准是：模态框打开时背景不再滚动，且任一关闭按钮都能将其关闭。
由索引模型根据 Issue 内容生成。
描述
In src/features/developer/components/user-profile-client.tsx, clicking 'Get README Badge' opens a modal dialog (badgeDialogOpen). When open, mouse wheel scrolling on the backdrop scrolls the underlying page. In addition, the modal only has a bottom 'Close' button without a standard top-right X close icon.
Motivation
Proper modal UX requires locking background scroll and offering an intuitive top-right dismissal button for accessibility and desktop/mobile usability.
Tasks
- When
badgeDialogOpenis true, setdocument.body.style.overflow = "hidden"(and restore on close/unmount). - Add an
Xicon button in the top-right corner of the dialog header witharia-label={t("profile.close")}. - Ensure clicking the
Xbutton closes the dialog.
Files to Check
src/features/developer/components/user-profile-client.tsx
[!TIP]
🚀 Want to contribute?
Commentassign meto be automatically assigned to this issue via our GitHub Actions bot. Happy coding! ✨
- 主要语言
- TypeScript
- 星标
- 31
- 派生
- 25
- 平均合并
- 10 小时 4 分钟
- 30 天内合并 PR
- 29
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
O2sa/DevImpact 的其他 Issue
-
bug: InsightsList incorrectly favors User 1 when metrics are tied可能已有人在做 @sarmad-jalil 于 1 天前认领。 未关闭beginner friendly bug easy good first issue typescript
难度 2/5 1-3 小时 新手友好度 90/100
O2sa/DevImpact#268 · 2 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
-
feature: Add custom branded not-found.tsx page for 404 routes可能已有人在做 @sarmad-jalil 于 1 天前认领。 未关闭beginner friendly easy feature good first issue nextjs ui
O2sa/DevImpact#271 · 2 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
-
enhancement: Add 1-click Clear button (X) inside SearchField可能已有人在做 @aryansinha1908 于 3 天前认领。 未关闭beginner friendly easy enhancement good first issue ui
O2sa/DevImpact#265 · 2 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
相似的 Issue
-
backend refactor
难度 2/5 1-3 小时 新手友好度 73/100
NIAEFEUP/tts#927 · 1 条评论 · 1 个 reaction ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 82/100
callstackincubator/react-native-harness#296 ·
维护者通常 1 天内回复
-
status:in-linear
难度 2/5 1-3 小时 新手友好度 67/100
维护者通常 1 天内回复
-
verified
难度 2/5 1-3 小时 新手友好度 67/100
维护者通常 5 天内回复
-
Add inputmode attribute support (forwarded to the inner input)可能重新可做 关联的 PR 已关闭且未合并。 未关闭enhancement
难度 2/5 1-3 小时 新手友好度 68/100
Neovici/cosmoz-input#467 ·
维护者通常 1 天内回复