Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Convert list views to table structure to fix alignment issues #1031
This PR introduces the new ListViewTable and ListViewTableRow components, which match the props interface for the pf3 ListView and ListViewItem, respectively. The ListViewTable converts the floating-divs HTML structure of the ListView into table HTML, to properly align its items as real columns.
Because this breaks responsiveness on mobile viewport sizes, it is only used at desktop window size, and smaller windows will fall back to the original ListView implementation (which is possible because of the matching props interface). The BreakJS-based layout listener (which I wouldn't have added, but is already used elsewhere in pf3) swaps the two render implementations out automatically on window resize.
This PR converts the Plans Not Started and Plans Complete/Archived list views to use the new structure. In separate PRs, I'll convert the Plan Details list view, and also convert the Plans In Progress card view to this kind of list view.
I also worked out some CSS quirks, and in general slimmed down some of the margin/padding in these list view items, in anticipation of the higher-density list view items we'll need for warm migration.
I pushed another commit to abstract the scheduled time info item into a component shared by the not started list and the completed list, to satisfy codeclimate. But, codeclimate now has a problem with the propTypes being too similar to other propTypes lists, I guess? Except the lists don't even have the same props. I think this is invalid.
Reading up on codeclimate, it looks like it's possible to mark certain issues as