Add a responsive mode for datagrids.
Review Request #7247 — Created April 24, 2015 and submitted
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. |
david | |
Missing var statement for i. |
brennie | |
Do we need the extra set of parens? |
brennie | |
Shouldn't this function take an event argument so we can do event.preventDefault() instead of this? |
brennie | |
// single line comment? |
david | |
This can just use .append('<td/>') (no $()) |
david |
- Change Summary:
-
- Added a missing
var
and a missing semicolon. - Removed some unnecessary parens.
- Added a missing
- Commit:
-
8cd43c64e3254de48a7881992c4b18e5ac81dbad6bfdecd135240d8ace6a88f96c232c605d8b358d
-
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
- Change Summary:
-
- Changed a multi-line comment to a single line.
- Appended an element without wrapping it in a jQuery element.
- Commit:
-
6bfdecd135240d8ace6a88f96c232c605d8b358de6ffb7cd853f4d99e577442ce5cbff815ce35d21
-
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