Summary

Increase hit target for expand/collapse button

Review Request #3365 — Created Sept. 28, 2012 and submitted Sept. 29, 2012, 1:08 p.m.

Information

Owner

aam1r

Repository

Review Board

Branch

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

Increase hit target for expand/collapse button

Increase the size of the expand and collapse button images to make it
a bigger hit target. This reduces the chances of someone accidentally 
clicking the user's name while trying to expand/collapse a review.

Fixes Issue #2358

Testing Done

Tested it locally on Chrome Version 22.0.1229 (Mac)

Screenshots

Before

After (rev1)

After (Collapsed - rev2)

After (Expanded - rev2)

Collapsed (vertically centered)

Expanded (vertically centered)

Files

Issues

Description	From	Last Updated
Can you tweak the CSS to center these vertically within the bar? There's too much padding on top and not …	david	Sept. 29, 2012, 10:29 a.m.

Maybe we should make the image itself bigger, by about 2 pixels on each side.

aam1r

Sept. 28, 2012, 1:42 p.m.

I will give that a try. By each side, do you think we should also increase the height (by a total of 4 pixels)?

chipx86

Sept. 28, 2012, 2:49 p.m.
```
Yep.
```

Change Summary:

Increase sizes of images by 2 pixels on each side to increase hit target. Adjusted CSS accordingly to reflect the new width and height.

Description:

		Increase hit target for expand/collapse button

~		Increase the right-padding attribute of the expand/collapse button
~		(beside reviewer's name when viewing any review) to increase the hit
~		target. This reduces the chances of someone accidentally clicking the
	~	Increase the size of the expand and collapse button images to make it
	~	a bigger hit target. This reduces the chances of someone accidentally
	~	clicking the user's name while trying to expand/collapse a review.
-		user's name while trying to expand/collapse a review.

		Fixes Issue #2358

Diff:

Revision 2 (+5 -4)

Show changes

	reviewboard/static/rb/css/reviews.less
	reviewboard/static/rb/images/collapse.png

```
Can you add a new screenshot?
```

Change Summary:: Added screenshots of changes from revision 2
Screenshot Captions:: after.png:
After
After (rev1)
Screenshots:: After (Collapsed - rev2)
After (Expanded - rev2)

after.png:	After After (rev1)

Do you mind not cropping the screenshots quite as much? I'd like to see more area.

Please also add the images you changed as file attachments to the review request.

Change Summary:: Added bigger screenshots and added resized images
Added Files:
Screenshots:: After (Collapsed - rev2)
After (Expanded - rev2)
After (Collapsed - rev2)
After (Expanded - rev2)

Fix it!

After (Collapsed - rev2)

An issue was opened. Show all issues

Can you tweak the CSS to center these vertically within the bar? There's too much padding on top and not enough on the bottom.

Change Summary:

Tweaked CSS padding settings to vertically center expand/collapse buttons as well as the content beside the buttons.

Diff:

Revision 3 (+11 -5)

Show changes

	reviewboard/static/rb/css/reviews.less
	reviewboard/static/rb/images/collapse.png

Screenshots:

Collapsed (vertically centered)

Expanded (vertically centered)

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to master (423886f). Thanks!