Make the review request page mobile-friendly.
Review Request #7288 — Created May 6, 2015 and submitted
The review request page is one of the most important pages on Review Board, and we want it to be fully usable on mobile devices. This change gets us a huge step of the way there by making the page mobile-friendly. It now fits on a typical mobile phone's screen. All operations, such as closing review requests, replying to comments, etc. are doable as well. Most of the changes are pretty straight-forward. Horizontal content has become more vertical (avatars are above review, timestamps no longer aligned to the upper-right, the issue summary table contents are multi-row cells, and so on). Diffed comment thumbnails are still horizontal (this will be addressed in a later change). The review request action bar had to be consolidated a bit. Now, all the actions are hidden under a "..." button. When clicked, this unfolds to show all available actions as a new, wrapped action bar. Implementation-wise, it's just a special action menu. These changes affect the diff viewer and file review UIs as well. However, those pages are not optimized yet for mobile, and will be updated in future changes.
Tested that the main desktop-oriented layout continued to look correct on
Chrome and Firefox.Tested the mobile UI on the iPhone and in responsive mode at different
resolutions in Chrome.Tested review request actions, replying to comments, expanding/collapsing
boxes, and toggling issue states.
-
-
-
I think I'd like this better if we presented it more like other drop-down menus:
Close >
Update >
Download Diff
Review
Ship It!That way things don't reflow oddly, and it's a bit strange to have drop-downs like close in the middle of a block (as judging from the account and support menus at the top).
-
- Change Summary:
-
- Localized some text.
- Removed some unwanted class names on elements.
- Commit:
-
66bbd33218a770da5b3cf58a3660c8d6cd675c1d84cc8706bdd03c0b98dcd6e1c11f15602d9763ef
- Diff:
-
Revision 2 (+409 -123)
-
Tool: Pyflakes Ignored Files: reviewboard/templates/reviews/review_detail.html reviewboard/templates/reviews/boxes/review.html reviewboard/templates/reviews/ui/base.html reviewboard/templates/reviews/boxes/change.html reviewboard/templates/reviews/review_header.html reviewboard/static/rb/css/ui/banners.less reviewboard/static/rb/js/views/commentIssueBarView.js reviewboard/templates/diffviewer/view_diff.html reviewboard/static/rb/js/views/reviewReplyDraftBannerView.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/views/headerView.js reviewboard/static/rb/css/common.less reviewboard/templates/reviews/reviewable_base.html reviewboard/static/rb/css/defs.less reviewboard/templates/reviews/comment_issue.html Tool: PEP8 Style Checker Ignored Files: reviewboard/templates/reviews/review_detail.html reviewboard/templates/reviews/boxes/review.html reviewboard/templates/reviews/ui/base.html reviewboard/templates/reviews/boxes/change.html reviewboard/templates/reviews/review_header.html reviewboard/static/rb/css/ui/banners.less reviewboard/static/rb/js/views/commentIssueBarView.js reviewboard/templates/diffviewer/view_diff.html reviewboard/static/rb/js/views/reviewReplyDraftBannerView.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/views/headerView.js reviewboard/static/rb/css/common.less reviewboard/templates/reviews/reviewable_base.html reviewboard/static/rb/css/defs.less reviewboard/templates/reviews/comment_issue.html
Tool: Pyflakes Ignored Files: reviewboard/templates/reviews/review_detail.html reviewboard/templates/reviews/boxes/review.html reviewboard/templates/reviews/ui/base.html reviewboard/templates/reviews/boxes/change.html reviewboard/templates/reviews/review_header.html reviewboard/static/rb/css/ui/banners.less reviewboard/static/rb/js/views/commentIssueBarView.js reviewboard/templates/diffviewer/view_diff.html reviewboard/static/rb/js/views/reviewReplyDraftBannerView.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/views/headerView.js reviewboard/static/rb/css/common.less reviewboard/templates/reviews/reviewable_base.html reviewboard/static/rb/css/defs.less reviewboard/templates/reviews/comment_issue.html Tool: PEP8 Style Checker Ignored Files: reviewboard/templates/reviews/review_detail.html reviewboard/templates/reviews/boxes/review.html reviewboard/templates/reviews/ui/base.html reviewboard/templates/reviews/boxes/change.html reviewboard/templates/reviews/review_header.html reviewboard/static/rb/css/ui/banners.less reviewboard/static/rb/js/views/commentIssueBarView.js reviewboard/templates/diffviewer/view_diff.html reviewboard/static/rb/js/views/reviewReplyDraftBannerView.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/views/headerView.js reviewboard/static/rb/css/common.less reviewboard/templates/reviews/reviewable_base.html reviewboard/static/rb/css/defs.less reviewboard/templates/reviews/comment_issue.html