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
-
beginner friendly easy enhancement good first issue nextjs ui
難度 2/5 1-3 小時 新手友好度 82/100
維護者通常 1 天內回覆
-
bug: InsightsList incorrectly favors User 1 when metrics are tied可能已有人在做 @sarmad-jalil 於 3 天前認領。 未關閉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 於 3 天前認領。 未關閉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 於 5 天前認領。 未關閉beginner friendly easy enhancement good first issue ui
O2sa/DevImpact#265 · 2 則留言 · 已指派 1 人 ·
維護者通常 1 天內回覆
相似的 Issue
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
難度 1/5 1 小時以內 新手友好度 82/100
lingdojo/kana-dojo#33286 · 1 則留言 · 5 個 reaction ·
維護者通常 1 天內回覆
-
friction
難度 1/5 1 小時以內 新手友好度 77/100
kentcdodds/kody#4499 ·
-
bug
難度 2/5 1-3 小時 新手友好度 76/100
hemilabs/ui-monorepo#2605 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 72/100
維護者通常 6 天內回覆
-
build.yml: macOS arm64 DMG fails, cargo missing on the macos-26 runner image可能已有人在做 關聯的 PR 仍在進行中或已合併。 未關閉
難度 2/5 1-3 小時 新手友好度 78/100
getopenscreen/openscreen#1423 ·
維護者通常 1 天內回覆