• 
      

    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)