Simplify review thread markup and CSS.
Review Request #8391 — Created Sept. 8, 2016 and submitted
This change dramatically improves the markup and CSS for review threads.
Specifically, instead of using<dl>for everything (which isn't semantically
correct), we wrap things in<ol>elements, and then individual comments are
broken up into<div>s with sensible classes. These are then styled with
consistent and simple spacing so that everything looks nice while also being
aligned. Replies to a comment are all indented a bit from that comment,
emphasizing the relationship in the way that most threaded displays work. One
particularly nice part of this change is that the text for comments is now
horizontally aligned with the avatar (the borders of the text area are
accounted for using negative margins).
Tested reviews with all sorts of different comments, and replies to those
reviews. Checked to make sure everything was aligned and spaced correctly.
Opened the editor for draft replies to verify that there were no jumps in the
position of the text.
-
Good cleanup. Just a few small comments.
-
reviewboard/static/rb/css/pages/reviews.less (Diff revision 1) &.draftshould go before any child selectors. -
reviewboard/static/rb/css/pages/reviews.less (Diff revision 1) Can we add a constant for this color?
-
-
reviewboard/templates/reviews/review_reply_section.html (Diff revision 1) No need for the space before
data-context-id.
Change Summary:
Make requested changes.
Commit: |
|
||||
|---|---|---|---|---|---|
Diff: |
Revision 2 (+308 -329) |
-
Tool: Pyflakes Processed Files: reviewboard/reviews/models/review.py reviewboard/reviews/templatetags/reviewtags.py Ignored Files: reviewboard/templates/reviews/review_reply_section.html reviewboard/templates/reviews/review_reply.html reviewboard/templates/reviews/boxes/review_body.html reviewboard/templates/reviews/boxes/review.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/views/reviewReplyEditorView.js reviewboard/static/rb/css/defs.less Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/models/review.py reviewboard/reviews/templatetags/reviewtags.py Ignored Files: reviewboard/templates/reviews/review_reply_section.html reviewboard/templates/reviews/review_reply.html reviewboard/templates/reviews/boxes/review_body.html reviewboard/templates/reviews/boxes/review.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/views/reviewReplyEditorView.js reviewboard/static/rb/css/defs.less
Tool: Pyflakes Processed Files: reviewboard/reviews/models/review.py reviewboard/reviews/templatetags/reviewtags.py Ignored Files: reviewboard/templates/reviews/review_reply_section.html reviewboard/templates/reviews/review_reply.html reviewboard/templates/reviews/boxes/review_body.html reviewboard/templates/reviews/boxes/review.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/views/reviewReplyEditorView.js Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/models/review.py reviewboard/reviews/templatetags/reviewtags.py Ignored Files: reviewboard/templates/reviews/review_reply_section.html reviewboard/templates/reviews/review_reply.html reviewboard/templates/reviews/boxes/review_body.html reviewboard/templates/reviews/boxes/review.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/views/reviewReplyEditorView.js