From 505c42363d7feb2e79764e6b8e0dea642127e4af Mon Sep 17 00:00:00 2001 From: Thomas Piccirello Date: Sun, 20 Oct 2024 12:00:20 -0700 Subject: [PATCH] Fix double scrollbar on WebUI RSS tab All elements are now sized automatically using flexbox. --- src/webui/www/private/views/rss.html | 36 ++++++++++++---------------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/src/webui/www/private/views/rss.html b/src/webui/www/private/views/rss.html index 7c38af2ae03..2fc0cd12fe7 100644 --- a/src/webui/www/private/views/rss.html +++ b/src/webui/www/private/views/rss.html @@ -2,13 +2,18 @@ #rssView { padding: 20px 20px 0 20px; height: calc(100% - 20px); + display: flex; + flex-direction: column; + } + + #rssTopBar { + flex-shrink: 0; } #rssContentView { - display: table; width: 100%; - height: calc(100% - 30px); - vertical-align: top; + flex-grow: 1; + overflow: auto; } #rssFeedFixedHeaderDiv .dynamicTableHeader, @@ -45,6 +50,7 @@ #rightRssColumn { overflow: auto; + height: 100%; } #rssFeedTableDiv, @@ -53,17 +59,21 @@ } #rssTorrentDetailsName { + flex-shrink: 0; background-color: var(--color-background-blue); padding: 0; color: var(--color-text-white); } #rssTorrentDetailsDate { + flex-shrink: 1; background-color: var(--color-background-default); } #rssDetailsView { - height: calc(100vh - 135px); + display: flex; + flex-direction: column; + height: 100%; overflow: auto; } @@ -85,6 +95,7 @@ } #rssDescription { + flex-grow: 2; width: 100%; border: none; } @@ -206,18 +217,6 @@ if (!pref.rss_processing_enabled) $("rssFetchingDisabled").removeClass("invisible"); - // recalculate heights - const nonPageHeight = $("rssTopBar").getBoundingClientRect().height - + $("desktopHeader").getBoundingClientRect().height - + $("desktopFooterWrapper").getBoundingClientRect().height + 20; - $("rssDetailsView").style.height = "calc(100vh - " + nonPageHeight + "px)"; - - const nonTableHeight = nonPageHeight + $("rssFeedFixedHeaderDiv").getBoundingClientRect().height; - $("rssFeedTableDiv").style.height = "calc(100vh - " + nonTableHeight + "px)"; - $("rssArticleTableDiv").style.height = "calc(100vh - " + nonTableHeight + "px)"; - - $("rssContentView").style.height = "calc(100% - " + $("rssTopBar").getBoundingClientRect().height + "px)"; - const rssFeedContextMenu = new window.qBittorrent.ContextMenu.RssFeedContextMenu({ targets: ".rssFeedContextMenuTarget", menu: "rssFeedMenu", @@ -451,11 +450,6 @@ const torrentDescription = document.createRange().createContextualFragment(''); $("rssDetailsView").append(torrentDescription); document.getElementById("rssDescription").srcdoc = '' + article.description + ""; - - // calculate height to fill screen - document.getElementById("rssDescription").style.height = - "calc(100% - " + document.getElementById("rssTorrentDetailsName").offsetHeight + "px - " - + document.getElementById("rssTorrentDetailsDate").offsetHeight + "px - 5px)"; } };