Summary

Fix the user page and filter-related UI issues on mobile.

Review Request #7545 — Created July 25, 2015 and submitted Aug. 17, 2015, 11:32 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-2.5.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

The user page's tabs weren't flush with the datagrid, due to the filter
wrapping below it on mobile. This created a pretty nasty look, and it
wasn't the only place the filters were messing up the display on mobile
(depending on the mobile device).

A couple things were done to address this:

1. The tabs for the user page no longer include the username in the
   tab title (since that can be inferred from the page), saving
   precious room, especially with long usernames.

2. The filters are now kept in a menu, activated when clicking a filter
   icon. This icon docks to the right of the datagrid title area. When
   clicking, a menu pops up with a little fade-in animation, offering
   the possible filters on the page. (We may want to move to this
   later for desktop as well.)

While fixing this, I ended up creating a base template for datagrids
that handled tabs and filters in a consistent manner.

Testing Done

Tested in iPhone 4/6 screen sizes, and on desktop. The filters all worked,
and the user page was viewable at all screen sizes.

Files

Issues

Description	From	Last Updated
Alphabetize.	brennie	Aug. 5, 2015, 8:58 p.m.
alphabetize	brennie	Aug. 5, 2015, 8:57 p.m.

Tool: Pyflakes
Processed Files:
    reviewboard/datagrids/grids.py
    reviewboard/datagrids/views.py

Ignored Files:
    reviewboard/static/rb/css/ui/datagrids.less
    reviewboard/templates/datagrids/hideable_listview.html
    reviewboard/static/rb/css/defs.less
    reviewboard/templates/datagrids/review_request_listview.html
    reviewboard/templates/datagrids/listview.html



Tool: PEP8 Style Checker
Processed Files:
    reviewboard/datagrids/grids.py
    reviewboard/datagrids/views.py

Ignored Files:
    reviewboard/static/rb/css/ui/datagrids.less
    reviewboard/templates/datagrids/hideable_listview.html
    reviewboard/static/rb/css/defs.less
    reviewboard/templates/datagrids/review_request_listview.html
    reviewboard/templates/datagrids/listview.html

I hate that filter icon. Since the only thing in here is "show archived", could we use the archive icon from the review request page?

chipx86 July 26, 2015, 7:22 a.m.

I don't love it either.

There's also Show/Hide Closed, and I don't think having an icon for these states is going to do a good enough job.

I'd like to keep the menu (really, I'd like to eventually add additional filtering options). Thinking a gear would work in place of the filter icon.

david July 27, 2015, 7:23 p.m.
```
Sure. Or a hammer!
```
chipx86 Aug. 5, 2015, 8:56 p.m.
```
You mean a wrench?
```

david Aug. 5, 2015, 9:53 p.m.

Are you planning on doing this in this change or later?

chipx86 Aug. 6, 2015, 8:30 a.m.

I could go either way. Shouldn't be hard to change it.

david Aug. 6, 2015, 9:25 p.m.

OK, I'll wait for it in this change, then.

reviewboard/static/rb/css/ui/datagrids.less (Diff revision 1)

The issue has been dropped. Show all issues

Alphabetize.

chipx86 Aug. 5, 2015, 8:58 p.m.

Alphabetizing is a good general rule, but it also makes a lot of sense to keep related properties togther. So, things like width/height, or position/top/left/right/bottom are often grouped.

reviewboard/static/rb/css/ui/datagrids.less (Diff revision 1)
The issue has been resolved. Show all issues
```
alphabetize
```

Change Summary:


Alphabetized a CSS property.

Diff:

Revision 2 (+132 -63)

Show changes

	reviewboard/datagrids/grids.py
	reviewboard/datagrids/views.py
	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/ui/datagrids.less
	reviewboard/templates/datagrids/hideable_listview.html
	reviewboard/templates/datagrids/listview.html
	reviewboard/templates/datagrids/review_request_listview.html

Tool: Pyflakes
Processed Files:
    reviewboard/datagrids/grids.py
    reviewboard/datagrids/views.py

Ignored Files:
    reviewboard/static/rb/css/ui/datagrids.less
    reviewboard/templates/datagrids/hideable_listview.html
    reviewboard/static/rb/css/defs.less
    reviewboard/templates/datagrids/review_request_listview.html
    reviewboard/templates/datagrids/listview.html



Tool: PEP8 Style Checker
Processed Files:
    reviewboard/datagrids/grids.py
    reviewboard/datagrids/views.py

Ignored Files:
    reviewboard/static/rb/css/ui/datagrids.less
    reviewboard/templates/datagrids/hideable_listview.html
    reviewboard/static/rb/css/defs.less
    reviewboard/templates/datagrids/review_request_listview.html
    reviewboard/templates/datagrids/listview.html

```
Ping
```
1. chipx86 Aug. 14, 2015, 11:03 p.m.
  Testing again..

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-2.5.x (8b86f24)