Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

The "what people see" picture on the Close or reopen a signup help page is too small to read on a phone

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#652 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
playwright, typescript
Lĩnh vực
documentation, testing

Hướng nghiên cứu

Đọc skill help-pages và docs/writing-help.md, sau đó kiểm tra tests/e2e/help/close-or-reopen-a-signup.spec.ts cùng Screenshot dimensions của bài viết. Chụp what-people-see.png ở 390px bằng pnpm help:screenshots, cập nhật kích thước hiển thị và kiểm tra văn bản thay thế. Chạy bài kiểm tra kích thước bài viết và help walkthroughs; hoàn tất khi hình ảnh hiển thị ở kích thước đầy đủ trên điện thoại 390px và các bước kiểm tra được chỉ định đều đạt.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

enhancement pipeline:proposed pipeline:ux

Needs your OK: this re-takes one picture on the help page "Close or reopen a signup" at phone width. Swap pipeline:proposed for pipeline:ready to have it built.

What happens

  • The picture is taken on a computer. public/help/close-or-reopen-a-signup/what-people-see.png shows the public page of a closed signup. The walkthrough captures it on a computer, so the file is 1408×680 and the article shows it at 704×340.
  • A phone shrinks it too far. On a 390px phone the page scales it to 356px wide, about half its width in CSS pixels. "This signup is no longer collecting responses." and each slot's Closed come out about 7px tall.
  • The other two pictures read fine. They show at about full size on a phone.
  • Phones are where people read it. In the UX walkthrough on #610, people mostly opened this page on a phone.

Fix, in outline

  • Open the visitor's page at phone size for this picture. In tests/e2e/help/close-or-reopen-a-signup.spec.ts, open it with browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 }) and take what-people-see there.
  • Re-take the pictures with pnpm help:screenshots.
  • Update the article's size. Set its <Screenshot width height> to half the new file's size.
  • Check the alt text still says what the picture shows.

Watch for

  • src/help/articles.test.tsx checks every picture's real size against the article.
  • The walkthrough's other checks on that page must still pass at the new size: Closed on each slot that isn't full, and no Sign up.
  • Overlap with #651, which moves shot() out of the same spec. Whichever lands second has a small merge.
  • The help-pages skill and docs/writing-help.md say how pictures are taken and sized.
  • CHANGELOG: add a line under Unreleased › Changed.

Choices this makes

  • Phone width. On a computer the picture then shows at its real size, about 360px wide, narrower than the text column. It still shows the whole page people see.
  • Only this picture. The other two read fine on a phone.

Done when

  • what-people-see.png is captured at 390px wide, and on a 390px phone it shows at its real size, not scaled down.
  • articles.test.tsx and the help walkthroughs pass.
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass.

From the UX walkthrough comment on #610 (https://github.com/richshaw/OpenSignup/pull/610#issuecomment-6402399737). Checked against the article and its walkthrough on main at 1d4ff3a. https://claude.ai/code/session_01LrYa57fvbqWjZj89iH975K

Ngôn ngữ chính
TypeScript
Star
19
Fork
4
Merge trung bình
22 giờ 10 phút
Pull request đã merge (30 ngày)
168

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của richshaw/OpenSignup

Tất cả issue của richshaw/OpenSignup

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.