• 
      

    Add a responsive mode for datagrids.

    Review Request #7247 — Created April 24, 2015 and submitted

    Information

    Djblets
    release-0.9.x
    e6ffb7c...

    Reviewers

    When a datagrid is rendered on a small (<= 720px) screen, it now goes
    into responsive mode. In this mode, the contents of the datagrid become
    more vertical.
    
    Each column that represents text or other complex data moves to its own
    row. The column headers disappear, and instead move to the left-hand
    side of the content on that row.
    
    Each row is styled to appear as if it's all part of one big row. The
    even/odd classes remain, and other classes are added to help properly
    with border placement.
    
    Columns that consist solely of icons continue to stay grouped together,
    occupying the top row.
    
    To get this layout, we have to do some work on the table. We run through
    a copy of the datagrid's table, changing the layout of the contents, and
    set that as the displayed table. The old one is preserved so we can
    switch back to it if the window resizes large enough to go back into the
    traditional mode.
    
    Editing columns continues to work properly, as does reloading. However,
    columns cannot be reordered in this mode.
    
    In order to make clicking/tapping work better in this mode, we finally
    have logic to allow clicking anywhere in the row to navigate to the
    URL associated with that row. There's event handlers in place to ensure
    that clicking a checkbox or some other item within the row will not
    inadvertently go to the wrong URL, or prevent existing functionality
    (like multi-row selection) from working.

    Tested in responsive mode on Chrome, with a small window, and on the iPhone
    in both portrait and landscape modes.

    On all datagrids, the information was presented properly in a vertical mode.
    I could tap anywhere to navigate to the review request, and I could also
    toggle stars and checkboxes without navigating pages.

    Editing columns in this mode worked properly.

    Resizing kept all the page contents in the proper position. Going in and out
    of responsive mode presented the correct views, without information loss
    or any visual distortion.

    Tested with a variety of columns. There's some cleanup we may want to do
    for, say, the age-related columns, but that can be tackled separately.


    Description From Last Updated

    This looks pretty low-res.

    daviddavid

    Missing var statement for i.

    brenniebrennie

    Do we need the extra set of parens?

    brenniebrennie

    Shouldn't this function take an event argument so we can do event.preventDefault() instead of this?

    brenniebrennie

    // single line comment?

    daviddavid

    This can just use .append('<td/>') (no $())

    daviddavid
    reviewbot
    1. Tool: Pyflakes
      Processed Files:
          djblets/datagrid/grids.py
      
      Ignored Files:
          djblets/datagrid/templates/datagrid/listview.html
          djblets/static/djblets/css/datagrid.less
          djblets/datagrid/templates/datagrid/column_header.html
          djblets/static/djblets/js/datagrid.js
      
      
      
      Tool: PEP8 Style Checker
      Processed Files:
          djblets/datagrid/grids.py
      
      Ignored Files:
          djblets/datagrid/templates/datagrid/listview.html
          djblets/static/djblets/css/datagrid.less
          djblets/datagrid/templates/datagrid/column_header.html
          djblets/static/djblets/js/datagrid.js
      
      
    2. 
        
    brennie
    1. 
        
    2. djblets/static/djblets/js/datagrid.js (Diff revision 1)
       
       
      Show all issues

      Missing var statement for i.

    3. djblets/static/djblets/js/datagrid.js (Diff revision 1)
       
       
       
       
       
       
       
      Show all issues

      Do we need the extra set of parens?

      1. Oops, nope. This changed quite a bit as I was developing it. Those parens came along for the ride.

    4. djblets/static/djblets/js/datagrid.js (Diff revision 1)
       
       
      Show all issues

      Shouldn't this function take an event argument so we can do event.preventDefault() instead of this?

      1. Either one works. preventDefault is great when you're dealing with logic that may end up breaking (raise an exception, or some other error), and you want to be sure the event stops here if it breaks. In this case, we want to both prevent the default and stop propagation, and there's minimal chance of something going wrong (unless window is missing or jQuery is flat-out broken). So, return false is suitable here.

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

      This looks pretty low-res.

      1. Hmm, sure does. I'll try to figure that out..

      2. This turns out to be due to us having no mechanism to re-attach gravatars when a datagrid auto-reloads or when editing columns. These screenshots were taken after reloads. I'll fix it separately, since it's not related to the work done in this change.

    3. djblets/static/djblets/js/datagrid.js (Diff revision 2)
       
       
       
       
      Show all issues

      // single line comment?

    4. djblets/static/djblets/js/datagrid.js (Diff revision 2)
       
       
      Show all issues

      This can just use .append('<td/>') (no $())

    5. 
        
    chipx86
    reviewbot
    1. Tool: Pyflakes
      Processed Files:
          djblets/datagrid/grids.py
      
      Ignored Files:
          djblets/datagrid/templates/datagrid/listview.html
          djblets/static/djblets/css/datagrid.less
          djblets/datagrid/templates/datagrid/column_header.html
          djblets/static/djblets/js/datagrid.js
      
      
      
      Tool: PEP8 Style Checker
      Processed Files:
          djblets/datagrid/grids.py
      
      Ignored Files:
          djblets/datagrid/templates/datagrid/listview.html
          djblets/static/djblets/css/datagrid.less
          djblets/datagrid/templates/datagrid/column_header.html
          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 (3b11b5c)