Change tab index on review request page (student project)

Review Request #10848 — Created Jan. 22, 2020 and updated

Information

Review Board
master

Reviewers

The review request page has a weird keyboard behavior. When you
want to tab-navigate, the ordering is strange. Hitting tab
repeatedly will get you to the right-hand column
(review-request-details), and then to the left-hand
(request-request-main) column, which seems backwards, and
it takes a while to even get there.

I switched the HTML code blocks of these two elements so that
hitting tab will get you to left column -> right column. Also
I modified a few CSS lines to avoid element arrangement
problems (the two columns are not at the same height if I
didn't change the CSS).

A demo video is at here.

Click on the top fields, hitting tabs until it gets to the left column and then right column.

Summary ID Author
Change tab index on review request page
99e141ca53076b291ba4b39f0d13c665557d978c Xiaohui Liu
Order CSS properties alphabetically
5e9f0f9fbab1530fc9e34afa2eca35a79ec022d9 Xiaohui Liu
Make changes compatilble with mobile screens
78498dea63881e05fc20ebd577a000f125a64451 Jay

Description From Last Updated

Can you show screenshots of this in both mobile and desktop modes? It's important that mobile doesn't break. You can …

chipx86chipx86
LittleGrey
xiaole2
  1. 
      
  2. According to the style from other blocks, my suggestion could be swithing the order of width and position in alphabetial order.

    It doesn't mention in css/less style guide, so I am not sure it will be a correct coding style.

    1. Good point! I'll confirm this with the mentors.

  3. 
      
LittleGrey
chipx86
  1. 
      
  2. Show all issues

    Can you show screenshots of this in both mobile and desktop modes? It's important that mobile doesn't break.

    You can use the browser's responsive viewing mode to test this.

    1. Sorry for the delay. Just uploaded the screenshots. Had been blocked by the CSS tricks quite a while :(

  3. 
      
LittleGrey
Review request changed
Change Summary:

Make the layout mobile-friendly.

Commits:
Summary ID Author
Change tab index on review request page
2522a850091751c0e7af894ed5a1ed9ee5dcdd5f Xiaohui Liu
Order CSS properties alphabetically
25d2810be5a31abfaad82efd9ea987219a85674f Xiaohui Liu
Change tab index on review request page
99e141ca53076b291ba4b39f0d13c665557d978c Xiaohui Liu
Order CSS properties alphabetically
5e9f0f9fbab1530fc9e34afa2eca35a79ec022d9 Xiaohui Liu
Make changes compatilble with mobile screens
78498dea63881e05fc20ebd577a000f125a64451 Jay
Added Files:

Checks run (2 succeeded)

flake8 passed.
JSHint passed.