Summary

Float banners

Review Request #2133 — Created Feb. 18, 2011 and submitted

Information

Owner

markstrmr

Repository

Review Board

Branch

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

This update adds a class 'float-element' that can be used to float elements at the top or bottom of the screen if they are scrolled off-screen.

If you don't want an element to float everywhere on the screen you can add the 'float-element-container' class to an element wrapping the 'float-element' and it will only float while it is within the container.

Testing Done

Tested visually in Opera and Chrome (OS X).

Screenshots

Onscreen, not floating

Floating within container

Change Summary:

Added some screenshots.

Looks like a good start. The next thing to work on is confining a review banner within a review box. They should never go outside of it. The idea being that as you're reviewing something, and scrolling around within the box, you'll see the banner, but not if you, say, jump up to the top of the review request.

Change Summary:

Updating the JavaScript to keep floating elements within a float-element-container element.

Diff:

Revision 2 (+56 -1)

Show changes

	reviewboard/htdocs/media/rb/css/common.css
	reviewboard/htdocs/media/rb/js/common.js
	reviewboard/htdocs/media/rb/js/reviews.js
	reviewboard/templates/reviews/review_detail.html

Screenshots:

-	Floating bottom
-	On the screen
-	Floating top

Change Summary:

Updated the description of the review request.

Description:

~		This update adds a class 'float_me' that can be used to float elements at the top or bottom of the screen if they are scrolled off-screen.
	~	This update adds a class 'float-element' that can be used to float elements at the top or bottom of the screen if they are scrolled off-screen.

~		It might be useful to instead float all elements matching '.banners > .banner', possibly adding a setting somewhere so users can disable this.
	~	If you don't want an element to float everywhere on the screen you can add the 'float-element-container' class to an element wrapping the 'float-element' and it will only float while it is within the container.
-
-		Adding an 'onclick' event that will move the view back to where the floating element lives might be nice.

Change Summary:

Updated the floating elements to maintain their size while floating and to always be on top (z-index:999).

Diff:

Revision 3 (+59 -1)

Show changes

	reviewboard/htdocs/media/rb/css/common.css
	reviewboard/htdocs/media/rb/js/common.js
	reviewboard/htdocs/media/rb/js/reviews.js
	reviewboard/templates/reviews/review_detail.html

Screenshots:

-	Above screen, but outside of box (hidden)
-	Floating within box