diff --git a/package.json b/package.json --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "clipboard": "^2.0.4", "d3": "^5.9.2", "datatables.net-bs4": "^1.10.19", + "datatables.net-responsive-bs4": "^2.2.3", "dompurify": "^1.0.10", "elementsfrompoint-polyfill": "^1.0.0", "font-awesome": "^4.7.0", diff --git a/swh/web/assets/src/bundles/browse/browse.css b/swh/web/assets/src/bundles/browse/browse.css --- a/swh/web/assets/src/bundles/browse/browse.css +++ b/swh/web/assets/src/bundles/browse/browse.css @@ -131,6 +131,13 @@ min-width: 250px; } +.div-item { + border-top: 1px solid lightgrey; + display: block; + overflow-wrap: break-word; + padding: 15px 10px 15px 20px; +} + @media screen and (max-width: 600px) { .swh-corner-ribbon { line-height: 30px; diff --git a/swh/web/assets/src/bundles/browse/origin-save.js b/swh/web/assets/src/bundles/browse/origin-save.js --- a/swh/web/assets/src/bundles/browse/origin-save.js +++ b/swh/web/assets/src/bundles/browse/origin-save.js @@ -81,12 +81,13 @@ return date.toLocaleString(); } return data; - } + }, + responsivePriority: 3 }, { data: 'origin_type', - name: 'origin_type' - + name: 'origin_type', + responsivePriority: 4 }, { data: 'origin_url', @@ -97,11 +98,13 @@ return `${sanitizedURL}`; } return data; - } + }, + responsivePriority: 1 }, { data: 'save_request_status', - name: 'status' + name: 'status', + responsivePriority: 5 }, { data: 'save_task_status', @@ -115,12 +118,14 @@ return `${data}`; } return data; - } + }, + responsivePriority: 2 } ], scrollY: '50vh', scrollCollapse: true, - order: [[0, 'desc']] + order: [[0, 'desc']], + responsive: true }); $('#swh-origin-save-requests-list-tab').on('shown.bs.tab', () => { diff --git a/swh/web/assets/src/bundles/vendors/index.js b/swh/web/assets/src/bundles/vendors/index.js --- a/swh/web/assets/src/bundles/vendors/index.js +++ b/swh/web/assets/src/bundles/vendors/index.js @@ -27,6 +27,7 @@ // jquery datatables import 'datatables.net'; import 'datatables.net-bs4'; +import 'datatables.net-responsive-bs4'; import 'datatables.net-bs4/css/dataTables.bootstrap4.css'; import './datatables.css'; diff --git a/swh/web/templates/includes/directory-display.html b/swh/web/templates/includes/directory-display.html --- a/swh/web/templates/includes/directory-display.html +++ b/swh/web/templates/includes/directory-display.html @@ -8,7 +8,7 @@ {% if snapshot_context and snapshot_context.is_empty %} {% include "includes/empty-snapshot.html" %} {% elif dirs|length > 0 or files|length > 0 %} -