Improve positioning and scrolling of datagrid menus.

Review Request #7213 — Created April 16, 2015 and submitted

Information

Djblets
release-0.9.x
79915af...

Reviewers

The datagrid menu placement was pretty imprecise, and didn't work very
well when auto-fitting the datagrid. The menu would go off the page and
couldn't be scrolled, and it also just didn't line up very well with the
right-hand side of the datagrid on all browsers. Along with all that, it
was pretty crowded and ugly.

A lot of the problems were due to a less-than-optimal calculation
combined with fractional pixels for the containers.

We now rely on CSS positioning to dock the menu on the right-hand side.
To work around any borders in the datagrid, the menu has been moved into
the datagrid-main div.

The height is set when we auto-fit, ensuring that it doesn't grow beyond
the confines of the table body.

The CSS rules have been updated to allow for scrolling within the menu,
and to give enough breathing room for the scrollbar (to avoid any issues
with a vertical scrollbar overlapping content, triggering a horizontal
scrollbar).

Some ugliness has also been cleaned up in the display. Namely, there's a
few more pixels of breathing room between entries, and they no longer
wrap (allowing the menu to widen to fit the contents appropriately).

Tested the menu and all previous off-by-one issues we had in Chrome,
Firefox, and Safari on Retina and non-Retina displays.

Tested the Dashboard, All Review Requests, and Users pages in Review Board.

Description From Last Updated

Can we include spaces after the : and ; characters in the inline style?

daviddavid

Are ems the right choice here? What happens when the browser is zoomed in?

daviddavid
reviewbot
  1. Tool: PEP8 Style Checker
    Ignored Files:
        djblets/datagrid/templates/datagrid/listview.html
        djblets/static/djblets/css/datagrid.less
        djblets/static/djblets/js/datagrid.js
    
    
    
    Tool: Pyflakes
    Ignored Files:
        djblets/datagrid/templates/datagrid/listview.html
        djblets/static/djblets/css/datagrid.less
        djblets/static/djblets/js/datagrid.js
    
    
  2. 
      
chipx86
reviewbot
  1. Tool: PEP8 Style Checker
    Ignored Files:
        djblets/datagrid/templates/datagrid/listview.html
        djblets/static/djblets/css/datagrid.less
        djblets/static/djblets/js/datagrid.js
    
    
    
    Tool: Pyflakes
    Ignored Files:
        djblets/datagrid/templates/datagrid/listview.html
        djblets/static/djblets/css/datagrid.less
        djblets/static/djblets/js/datagrid.js
    
    
  2. 
      
david
  1. 
      
  2. Show all issues

    Can we include spaces after the : and ; characters in the inline style?

  3. Show all issues

    Are ems the right choice here? What happens when the browser is zoomed in?

    1. The relative size looks fine. Not too big, right amount of spacing considering you're zooming in.

      When switching to pixels, it's not much different, since it zooms pixels as well.

  4. 
      
chipx86
reviewbot
  1. Tool: PEP8 Style Checker
    Ignored Files:
        djblets/datagrid/templates/datagrid/listview.html
        djblets/static/djblets/css/datagrid.less
        djblets/static/djblets/js/datagrid.js
    
    
    
    Tool: Pyflakes
    Ignored Files:
        djblets/datagrid/templates/datagrid/listview.html
        djblets/static/djblets/css/datagrid.less
        djblets/static/djblets/js/datagrid.js
    
    
  2. 
      
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-0.9.x (119d1b4)