Skip to content

Commit

Permalink
Replace responsive DataTables behaviour with floating scrolling bar (#…
Browse files Browse the repository at this point in the history
…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
chrisvanrun and jmsmkn authored Dec 6, 2024
1 parent 20f5e28 commit 98de0ee
Show file tree
Hide file tree
Showing 41 changed files with 61 additions and 1,921 deletions.
38 changes: 7 additions & 31 deletions amass.lock
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"lock_version": "1.0",
"content_hash": "sha256:0a7943db0d3b15f7feaa43639b886c458726c259b578c501c832af80c1c46d34",
"content_hash": "sha256:745a7a8d083ae88fa0420aa15309a4498d5c306e2d78547fd614451b650292a1",
"dependencies": [
{
"name": "@github/markdown-toolbar-element",
Expand Down Expand Up @@ -519,41 +519,17 @@
"maps": []
},
{
"name": "datatables.net-responsive",
"version": "2.2.9",
"name": "floating-scroll",
"version": "3.2.0",
"provider": "unpkg",
"assets": [
{
"name": "js/dataTables.responsive.js",
"sri": "sha384-eY9M0GbvpniuOcFCVB7On6oTCecP/MaxuJZhhsKhE/hESC989j4Tnk2FaA8NZ8qc"
"name": "dist/jquery.floatingscroll.css",
"sri": "sha384-IhiSZ9rydjTj1D6ZswgB2pCL8hba3n2U7ljG1A0IOaLieaahZNTCTyBEkTECkPaL"
},
{
"name": "js/dataTables.responsive.min.js",
"sri": "sha384-ziUH70yXeghwn7LIJvtjobzpllxs+w4FJL4/ssbFYWoYof46CveVyQ+GCaR1eTXj"
}
],
"maps": []
},
{
"name": "datatables.net-responsive-bs4",
"version": "2.2.9",
"provider": "unpkg",
"assets": [
{
"name": "css/responsive.bootstrap4.css",
"sri": "sha384-FG1U1mmuc4wFohqjCo1SISm217nX0ImWshs+Wu6nFbi/Me23QK9QnZM9ffbOi0N7"
},
{
"name": "css/responsive.bootstrap4.min.css",
"sri": "sha384-lePQI47qegn3yPIKwMvp5YLKtqliO3UWhA8XdAuPyDLLD41HBbdLmNHXco/IMAok"
},
{
"name": "js/responsive.bootstrap4.js",
"sri": "sha384-+u4gb6q8N/RnCi1rp9KpC+RNKEySqC0ASHSScqmY/C7vZnrJYM7hKPnl+Og6AKCK"
},
{
"name": "js/responsive.bootstrap4.min.js",
"sri": "sha384-iqV3x/YAPev0L8Y35rZF1e8LuilKG+h0gtjkpS6dr6HFEZ139n6Q8YcFQ3kZfKu/"
"name": "dist/jquery.floatingscroll.min.js",
"sri": "sha384-gS4dgnfbPsSGHw07CtiuYGt7z8RfOScrwZbvmFGEVblveZgbTwScK+29f9wBreQV"
}
],
"maps": []
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<h2>Permission Requests for {{ algorithm.title }}</h2>

<div class="table-responsive">
<table class="table table-hover table-borderless table-sm" id="usersTable">
<table class="table table-hover table-borderless table-sm w-100" id="usersTable">
<thead class="thead-light">
<tr>
<th>Created</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h2>API Tokens</h2>
</p>

<div class="table-responsive">
<table class="table table-hover table-borderless">
<table class="table table-hover table-borderless w-100">
<thead class="thead-light">
<tr>
<th>Token</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<h2>Permission Requests for {{ archive.title }}</h2>

<div class="table-responsive">
<table class="table table-hover table-borderless table-sm" id="usersTable">
<table class="table table-hover table-borderless table-sm w-100" id="usersTable">
<thead class="thead-light">
<tr>
<th>Created</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<h3 class="mb-3">Challenge Cost Overview</h3>

<div class="table-responsive">
<table class="table table-hover table-borderless table-sm" id="challengeCostsOverviewTable">
<table class="table table-hover table-borderless table-sm w-100" id="challengeCostsOverviewTable">
<thead class="thead-light">
<tr>
<th>Challenge</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
{% block content %}
<h2>{% if not perms.challenges.change_challengerequest %}Your{% endif %} Challenge Requests</h2>
<div class="table-responsive">
<table class="table table-hover table-borderless table-sm" id="challengeRequestsTable">
<table class="table table-hover table-borderless table-sm w-100" id="challengeRequestsTable">
<thead class="thead-light">
<tr>
<th class="datatables-non-sortable"></th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ <h2>{{ object_type|title }} {{ list_type|title }} Options</h2>
</p>

<div class="table-responsive">
<table class="table table-hover table-borderless table-sm" id="interfacesTable">
<table class="table table-hover table-borderless table-sm w-100" id="interfacesTable">
<thead class="thead-light">
<tr>
<th>Title</th>
Expand Down
8 changes: 8 additions & 0 deletions app/grandchallenge/core/static/js/datatables.defaults.mjs
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();
});

This file was deleted.

This file was deleted.

This file was deleted.

Loading

0 comments on commit 98de0ee

Please sign in to comment.