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
No Linters Available
No Unit Test Coverage
Build Status
Buildable 6020
Build 8273: tox-on-jenkinsJenkins
Build 8272: arc lint + arc unit

Event Timeline

kalpitk created this revision.May 27 2019, 9:16 PM
kalpitk updated this revision to Diff 5001.May 28 2019, 3:16 PM
  • Redesign mobile directory view
kalpitk retitled this revision from [WIP] Make DataTables responsive to Make DataTables responsive.May 28 2019, 8:28 PM
anlambert requested changes to this revision.May 29 2019, 12:15 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
kalpitk updated this revision to Diff 5026.May 29 2019, 9:13 PM
  • update more datatables
kalpitk updated this revision to Diff 5027.May 29 2019, 9:16 PM
  • add width 100% to api table
kalpitk edited the summary of this revision. (Show Details)May 29 2019, 9:19 PM
kalpitk marked 2 inline comments as done.May 30 2019, 1:18 PM

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

kalpitk updated this revision to Diff 5051.Jun 4 2019, 12:24 PM
  • Remove div-item css
anlambert requested changes to this revision.Jun 4 2019, 2:49 PM

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 updated this revision to Diff 5065.Jun 4 2019, 8:00 PM
kalpitk marked 3 inline comments as done.
  • Made required changes

@anlambert made all the changes.


with the new commit hiding on xs screens.

anlambert accepted this revision.EditedJun 5 2019, 11:10 AM

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
kalpitk updated this revision to Diff 5069.Jun 5 2019, 11:29 AM

Rebase with master and squash reordered commits

kalpitk updated this revision to Diff 5073.Jun 5 2019, 11:44 AM

Rebase with master

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.