-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Replace responsive DataTables behaviour with floating scrolling bar (#…
…3729) Fixes #3028 This PR adds a new JS dependency, `floating-scroll`. This tiny JS package allows a floating scrollbar at the bottom of a viewport instead of the bottom of the element (which is possibly hidden way below). Floating-scroll is applied after the Datatables are initiated. This is done via a generic listener to `init.dt` on the document level: in the same breath, it sets the `scrollX: true` to allow the inner element to overflow and spawn a scrollbar in the first place. Datatables come in two flavours: - Dynamically, initialized via the partial template `datatable.html` (and some Python, JS et cetera) - Statically, by initializing it on a `<table>` directly The new overflow behaviour applies to both. _For the static route_ this entails the scrollbar is properly under the table now instead of under the paging UI. The same holds for the _dynamic route_ but this also has the `responsive` component explicitly removed. ## Visuals ### Current https://github.com/user-attachments/assets/1479346b-69a2-4e51-903a-73e48a87ea7c https://github.com/user-attachments/assets/393d12f0-1513-4800-977e-e70802eaddfb ### New https://github.com/user-attachments/assets/189a9cdd-f42d-4d39-9328-2fb94999d465 https://github.com/user-attachments/assets/393a8f48-68d8-4e28-bdc8-581917f0c3c4 ### Side note Technically, the bootstrap class `"table-responsive"` is now redundant: the element containing the datatable should never overflow—unless perhaps there are a gazillion pages(?). However, since it's generally applied as a wrapping element, removing it here would result in an unneedingly bloated changeset. I first had handy-scroll, but that has a component-only version 2 now... which does not work with dynamic datatables. --------- Co-authored-by: James Meakin <12661555+jmsmkn@users.noreply.github.com>
- Loading branch information
1 parent
20f5e28
commit 98de0ee
Showing
41 changed files
with
61 additions
and
1,921 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
$.extend(true, DataTable.defaults, { | ||
scrollX: true, | ||
}); | ||
|
||
$(document).on("init.dt", () => { | ||
// Set up floating scroll, note that the target class only shows up when scrollX is set to true | ||
$(".dataTables_scrollBody").floatingScroll(); | ||
}); |
185 changes: 0 additions & 185 deletions
185
...hallenge/core/static/vendored/datatables.net-responsive-bs4/css/responsive.bootstrap4.css
This file was deleted.
Oops, something went wrong.
1 change: 0 additions & 1 deletion
1
...enge/core/static/vendored/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css
This file was deleted.
Oops, something went wrong.
85 changes: 0 additions & 85 deletions
85
...dchallenge/core/static/vendored/datatables.net-responsive-bs4/js/responsive.bootstrap4.js
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.