From dc30b9c2ec038a727770b92dec5e1b7843fd5108 Mon Sep 17 00:00:00 2001 From: Thomas Piccirello <8296030+Piccirello@users.noreply.github.com> Date: Sun, 3 Nov 2024 00:11:30 -0700 Subject: [PATCH] WebUI: Improve table overflow handling This PR relies on flexbox to ensure all WebUI tables are the correct height without overflowing. Table headers are now always visible and JS-based dynamic resizing is no longer needed. PR #21652. --- src/webui/www/private/css/Layout.css | 1 + src/webui/www/private/css/dynamicTable.css | 13 +++++++ src/webui/www/private/css/style.css | 8 +++++ src/webui/www/private/rename_files.html | 2 +- src/webui/www/private/scripts/dynamicTable.js | 27 -------------- src/webui/www/private/scripts/search.js | 20 +++++------ src/webui/www/private/views/log.html | 9 +++-- src/webui/www/private/views/rss.html | 36 ++++++++----------- src/webui/www/private/views/search.html | 22 ++++++------ 9 files changed, 65 insertions(+), 73 deletions(-) diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css index bdb540c0c..fb940cbf1 100644 --- a/src/webui/www/private/css/Layout.css +++ b/src/webui/www/private/css/Layout.css @@ -246,6 +246,7 @@ li.divider { } .pad { + height: 100%; padding: 8px; } diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css index 8cebbcbcc..86e3072df 100644 --- a/src/webui/www/private/css/dynamicTable.css +++ b/src/webui/www/private/css/dynamicTable.css @@ -32,6 +32,11 @@ vertical-align: middle; } +#transferList #transferList_pad { + /* override for default mocha inline style */ + display: flex !important; +} + tr.dynamicTableHeader { cursor: pointer; } @@ -82,7 +87,14 @@ tr.dynamicTableHeader { padding-left: 25px; } +div:has(> div.dynamicTableFixedHeaderDiv):not(.invisible) { + display: flex; + flex-direction: column; + height: 100%; +} + .dynamicTableFixedHeaderDiv { + flex-shrink: 0; overflow: hidden; } @@ -92,6 +104,7 @@ tr.dynamicTableHeader { } .dynamicTableDiv { + flex-grow: 1; overflow: auto; } diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index dec15e1d3..3c5447598 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -270,6 +270,14 @@ a.propButton img { overflow: hidden auto; } +.propertiesTabContent { + height: 100%; + + > div { + height: 100%; + } +} + /* context menu specific */ .contextMenu { diff --git a/src/webui/www/private/rename_files.html b/src/webui/www/private/rename_files.html index 77abd6520..0e3de25b1 100644 --- a/src/webui/www/private/rename_files.html +++ b/src/webui/www/private/rename_files.html @@ -452,7 +452,7 @@ -
+
diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js index d2558f0f6..a505d274d 100644 --- a/src/webui/www/private/scripts/dynamicTable.js +++ b/src/webui/www/private/scripts/dynamicTable.js @@ -100,33 +100,6 @@ window.qBittorrent.DynamicTable ??= (() => { tableDiv.addEventListener("scroll", () => { tableElement.style.left = `${-tableDiv.scrollLeft}px`; }); - - // if the table exists within a panel - const parentPanel = tableDiv.getParent(".panel"); - if (parentPanel) { - const resizeFn = (entries) => { - const panel = entries[0].target; - let h = panel.getBoundingClientRect().height - tableFixedHeaderDiv.getBoundingClientRect().height; - tableDiv.style.height = `${h}px`; - - // Workaround due to inaccurate calculation of elements heights by browser - let n = 2; - - // is panel vertical scrollbar visible or does panel content not fit? - while (((panel.clientWidth !== panel.offsetWidth) || (panel.clientHeight !== panel.scrollHeight)) && (n > 0)) { - --n; - h -= 0.5; - tableDiv.style.height = `${h}px`; - } - }; - - const resizeDebouncer = window.qBittorrent.Misc.createDebounceHandler(100, (entries) => { - resizeFn(entries); - }); - - const resizeObserver = new ResizeObserver(resizeDebouncer); - resizeObserver.observe(parentPanel, { box: "border-box" }); - } }, setupHeaderEvents: function() { diff --git a/src/webui/www/private/scripts/search.js b/src/webui/www/private/scripts/search.js index 6080e9be0..eb29a5dc1 100644 --- a/src/webui/www/private/scripts/search.js +++ b/src/webui/www/private/scripts/search.js @@ -205,10 +205,10 @@ window.qBittorrent.Search ??= (() => { // unhide the results elements if (numSearchTabs() >= 1) { - $("searchResultsNoSearches").style.display = "none"; - $("searchResultsFilters").style.display = "block"; - $("searchResultsTableContainer").style.display = "block"; - $("searchTabsToolbar").style.display = "block"; + $("searchResultsNoSearches").classList.add("invisible"); + $("searchResultsFilters").classList.remove("invisible"); + $("searchResultsTableContainer").classList.remove("invisible"); + $("searchTabsToolbar").classList.remove("invisible"); } // select new tab @@ -271,10 +271,10 @@ window.qBittorrent.Search ??= (() => { $("numSearchResultsVisible").textContent = 0; $("numSearchResultsTotal").textContent = 0; - $("searchResultsNoSearches").style.display = "block"; - $("searchResultsFilters").style.display = "none"; - $("searchResultsTableContainer").style.display = "none"; - $("searchTabsToolbar").style.display = "none"; + $("searchResultsNoSearches").classList.remove("invisible"); + $("searchResultsFilters").classList.add("invisible"); + $("searchResultsTableContainer").classList.add("invisible"); + $("searchTabsToolbar").classList.add("invisible"); } else if (isTabSelected && newTabToSelect) { setActiveTab(newTabToSelect); @@ -670,9 +670,9 @@ window.qBittorrent.Search ??= (() => { const searchPluginsEmpty = (searchPlugins.length === 0); if (!searchPluginsEmpty) { - $("searchResultsNoPlugins").style.display = "none"; + $("searchResultsNoPlugins").classList.add("invisible"); if (numSearchTabs() === 0) - $("searchResultsNoSearches").style.display = "block"; + $("searchResultsNoSearches").classList.remove("invisible"); // sort plugins alphabetically const allPlugins = searchPlugins.sort((left, right) => { diff --git a/src/webui/www/private/views/log.html b/src/webui/www/private/views/log.html index b3521e5e1..da5471502 100644 --- a/src/webui/www/private/views/log.html +++ b/src/webui/www/private/views/log.html @@ -1,5 +1,6 @@