Page MenuHomeSoftware Heritage

Make DataTables responsive

Authored by kalpitk on May 27 2019, 9:16 PM.



Related T1477

Update of Deposit Admin Table is pending.

Diff Detail

rDWAPPS Web applications
Automatic diff as part of commit; lint not applicable.
Automatic diff as part of commit; unit tests not applicable.

Event Timeline

  • Redesign mobile directory view
kalpitk retitled this revision from [WIP] Make DataTables responsive to Make DataTables responsive.May 28 2019, 8:28 PM
anlambert added a subscriber: anlambert.

Nice improvements but that diff is not landable as is (see my inline comments).

Also, you should handle the responsive layout for the tables in the admin interface and the one listing api endpoints.


you can remove that dependency


you can remove this import


I would prefer the approach of hiding the mode and size columns according to the screen size instead of duplicating some template code here.

Plus the icon for directories is not the right one and the icon colors are not the same for small screens.

This revision now requires changes to proceed.May 29 2019, 12:15 PM
  • add width 100% to api table

Only admin deposit table is left. I am not sure about what priority order should I keep for the columns.

Still some improvements to bring.

After reading the documentation of responsive DataTables, I think the responsive settings
(including columns priority) should be added directly in the HTML templates instead of using Javascript.

In the files templates/browse/origin-save.html and templates/admin/origin-save.html, can you rename the table headers to the following:

  • Request date -> Date
  • Origin type -> Type
  • Origin url -> Url
  • Request status -> Request
  • Save task status -> Status

This will make the headers look nicer on small screen devices.

Plus some inline comments to process.


You need to explicitly import the responsive CSS after the base bs4 one using:

import '';

Otherwise, webpack will not process it and the responsive stylesheets will not be part of the produced CSS bundles.


Can you remove the Status column here ? There is no more interest to keep it today.


We should hide the Size column too on small screens

This revision now requires changes to proceed.Jun 4 2019, 2:49 PM
kalpitk marked 3 inline comments as done.
  • Made required changes

@anlambert made all the changes.


with the new commit hiding on xs screens.

Let's land this ! Please rebase and squash the commits before pushing.

This revision is now accepted and ready to land.Jun 5 2019, 11:10 AM

Rebase with master and squash reordered commits

This revision was landed with ongoing or failed builds.Jun 5 2019, 11:44 AM
This revision was automatically updated to reflect the committed changes.