From 0e0b1d0962707579b36b1f4d31e7e4f448fdcdaf Mon Sep 17 00:00:00 2001 From: Thomas Piccirello <8296030+Piccirello@users.noreply.github.com> Date: Sun, 6 Jul 2025 11:58:07 -0400 Subject: [PATCH] WebUI: Limit window sizes to viewport size This change makes the WebUI easier to use on small screens (e.g. mobile). In cases where the window's default size is larger than the user's screen, the window will be resized appropriate (see example below). Every window has been tested for compatibility. The only windows that don't support this are the multi file rename window and the RSS Downloader window. Closes #19813. PR #22919. --- src/webui/www/private/scripts/mocha-init.js | 49 ++++++++++++------- src/webui/www/private/scripts/prop-files.js | 2 +- src/webui/www/private/scripts/prop-peers.js | 2 +- .../www/private/scripts/prop-trackers.js | 4 +- .../www/private/scripts/prop-webseeds.js | 4 +- src/webui/www/private/views/rss.html | 14 +++--- .../www/private/views/rssDownloader.html | 8 +-- .../www/private/views/searchplugins.html | 2 +- 8 files changed, 49 insertions(+), 36 deletions(-) diff --git a/src/webui/www/private/scripts/mocha-init.js b/src/webui/www/private/scripts/mocha-init.js index 9e358f442..ec9edffe7 100644 --- a/src/webui/www/private/scripts/mocha-init.js +++ b/src/webui/www/private/scripts/mocha-init.js @@ -42,7 +42,9 @@ window.qBittorrent ??= {}; window.qBittorrent.Dialog ??= (() => { const exports = () => { return { - baseModalOptions: baseModalOptions + baseModalOptions: baseModalOptions, + limitWidthToViewport: limitWidthToViewport, + limitHeightToViewport: limitHeightToViewport }; }; @@ -68,6 +70,13 @@ window.qBittorrent.Dialog ??= (() => { deepFreezeSafe(obj); }; + const limitWidthToViewport = (width) => { + return Math.min(width, window.innerWidth - 20); + }; + const limitHeightToViewport = (height) => { + return Math.min(height, window.innerHeight - 75); + }; + const baseModalOptions = Object.assign(Object.create(null), { addClass: "modalDialog", collapsible: false, @@ -86,7 +95,7 @@ window.qBittorrent.Dialog ??= (() => { left: 5 }, resizable: true, - width: 480, + width: limitWidthToViewport(480), onCloseComplete: () => { // make sure overlay is properly hidden upon modal closing document.getElementById("modalOverlay").style.display = "none"; @@ -156,11 +165,15 @@ const initializeWindows = () => { LocalPreferences.set(`window_${windowId}_height`, size.y); }; - loadWindowWidth = (windowId, defaultValue) => { + loadWindowWidth = (windowId, defaultValue, limitToViewportWidth = true) => { + if (limitToViewportWidth) + defaultValue = window.qBittorrent.Dialog.limitWidthToViewport(defaultValue); return LocalPreferences.get(`window_${windowId}_width`, defaultValue); }; - loadWindowHeight = (windowId, defaultValue) => { + loadWindowHeight = (windowId, defaultValue, limitToViewportHeight = true) => { + if (limitToViewportHeight) + defaultValue = window.qBittorrent.Dialog.limitHeightToViewport(defaultValue); return LocalPreferences.get(`window_${windowId}_height`, defaultValue); }; @@ -325,7 +338,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 424, + width: window.qBittorrent.Dialog.limitWidthToViewport(424), height: 100 }); }; @@ -351,7 +364,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 424, + width: window.qBittorrent.Dialog.limitWidthToViewport(424), height: 100 }); }; @@ -397,7 +410,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 424, + width: window.qBittorrent.Dialog.limitWidthToViewport(424), height: 220 }); }; @@ -473,7 +486,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 424, + width: window.qBittorrent.Dialog.limitWidthToViewport(424), height: 100 }); }; @@ -520,7 +533,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 424, + width: window.qBittorrent.Dialog.limitWidthToViewport(424), height: 100 }); }; @@ -703,7 +716,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 400, + width: window.qBittorrent.Dialog.limitWidthToViewport(400), height: 130 }); }; @@ -733,7 +746,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 400, + width: window.qBittorrent.Dialog.limitWidthToViewport(400), height: 100 }); }; @@ -868,7 +881,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 400, + width: window.qBittorrent.Dialog.limitWidthToViewport(400), height: 150 }); }; @@ -909,7 +922,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 400, + width: window.qBittorrent.Dialog.limitWidthToViewport(400), height: 150 }); }; @@ -931,7 +944,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 400, + width: window.qBittorrent.Dialog.limitWidthToViewport(400), height: 150 }); }; @@ -954,7 +967,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 400, + width: window.qBittorrent.Dialog.limitWidthToViewport(400), height: 150 }); }; @@ -1017,7 +1030,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 250, + width: window.qBittorrent.Dialog.limitWidthToViewport(250), height: 100 }); }; @@ -1064,7 +1077,7 @@ const initializeWindows = () => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 250, + width: window.qBittorrent.Dialog.limitWidthToViewport(250), height: 100 }); updateMainData(); @@ -1117,7 +1130,7 @@ const initializeWindows = () => { resizable: true, maximizable: false, padding: 10, - width: 424, + width: window.qBittorrent.Dialog.limitWidthToViewport(424), height: 100, onCloseComplete: () => { updateMainData(); diff --git a/src/webui/www/private/scripts/prop-files.js b/src/webui/www/private/scripts/prop-files.js index b0242a9aa..238c94431 100644 --- a/src/webui/www/private/scripts/prop-files.js +++ b/src/webui/www/private/scripts/prop-files.js @@ -503,7 +503,7 @@ window.qBittorrent.PropFiles ??= (() => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 400, + width: window.qBittorrent.Dialog.limitWidthToViewport(400), height: 100 }); }; diff --git a/src/webui/www/private/scripts/prop-peers.js b/src/webui/www/private/scripts/prop-peers.js index 9b0cf541d..c318b49b4 100644 --- a/src/webui/www/private/scripts/prop-peers.js +++ b/src/webui/www/private/scripts/prop-peers.js @@ -145,7 +145,7 @@ window.qBittorrent.PropPeers ??= (() => { maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 350, + width: window.qBittorrent.Dialog.limitWidthToViewport(350), height: 260 }); }, diff --git a/src/webui/www/private/scripts/prop-trackers.js b/src/webui/www/private/scripts/prop-trackers.js index 945688aef..079a61673 100644 --- a/src/webui/www/private/scripts/prop-trackers.js +++ b/src/webui/www/private/scripts/prop-trackers.js @@ -197,7 +197,7 @@ window.qBittorrent.PropTrackers ??= (() => { closable: true, paddingVertical: 0, paddingHorizontal: 0, - width: 500, + width: window.qBittorrent.Dialog.limitWidthToViewport(500), height: 260, onCloseComplete: () => { updateData(); @@ -222,7 +222,7 @@ window.qBittorrent.PropTrackers ??= (() => { closable: true, paddingVertical: 0, paddingHorizontal: 0, - width: 500, + width: window.qBittorrent.Dialog.limitWidthToViewport(500), height: 150, onCloseComplete: () => { updateData(); diff --git a/src/webui/www/private/scripts/prop-webseeds.js b/src/webui/www/private/scripts/prop-webseeds.js index 3b756cfb5..5b60e94d1 100644 --- a/src/webui/www/private/scripts/prop-webseeds.js +++ b/src/webui/www/private/scripts/prop-webseeds.js @@ -159,7 +159,7 @@ window.qBittorrent.PropWebseeds ??= (() => { closable: true, paddingVertical: 0, paddingHorizontal: 0, - width: 500, + width: window.qBittorrent.Dialog.limitWidthToViewport(500), height: 260, onCloseComplete: () => { updateData(); @@ -188,7 +188,7 @@ window.qBittorrent.PropWebseeds ??= (() => { closable: true, paddingVertical: 0, paddingHorizontal: 0, - width: 500, + width: window.qBittorrent.Dialog.limitWidthToViewport(500), height: 150, onCloseComplete: () => { updateData(); diff --git a/src/webui/www/private/views/rss.html b/src/webui/www/private/views/rss.html index cd264b130..61122a048 100644 --- a/src/webui/www/private/views/rss.html +++ b/src/webui/www/private/views/rss.html @@ -349,7 +349,7 @@ scrollbars: false, resizable: false, maximizable: false, - width: 350, + width: window.qBittorrent.Dialog.limitWidthToViewport(350), height: 100 }); }; @@ -377,7 +377,7 @@ scrollbars: false, resizable: false, maximizable: false, - width: 350, + width: window.qBittorrent.Dialog.limitWidthToViewport(350), height: 100 }); }; @@ -791,7 +791,7 @@ scrollbars: false, resizable: false, maximizable: false, - width: 350, + width: window.qBittorrent.Dialog.limitWidthToViewport(350), height: 100 }); }; @@ -811,7 +811,7 @@ scrollbars: false, resizable: false, maximizable: false, - width: 350, + width: window.qBittorrent.Dialog.limitWidthToViewport(350), height: 100 }); }; @@ -827,7 +827,7 @@ scrollbars: false, resizable: false, maximizable: false, - width: 350, + width: window.qBittorrent.Dialog.limitWidthToViewport(350), height: 70 }); }; @@ -947,8 +947,8 @@ loadMethod: "xhr", contentURL: "views/rssDownloader.html", maximizable: false, - width: loadWindowWidth(id, 800), - height: loadWindowHeight(id, 650), + width: loadWindowWidth(id, 800, false), + height: loadWindowHeight(id, 650, false), onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => { saveWindowSize(id); }), diff --git a/src/webui/www/private/views/rssDownloader.html b/src/webui/www/private/views/rssDownloader.html index 5cde50e5a..9fabdc9e7 100644 --- a/src/webui/www/private/views/rssDownloader.html +++ b/src/webui/www/private/views/rssDownloader.html @@ -536,7 +536,7 @@ Supports the formats: S01E01, 1x1, 2017.12.31 and 31.12.2017 (Date formats also scrollbars: false, resizable: false, maximizable: false, - width: 350, + width: window.qBittorrent.Dialog.limitWidthToViewport(350), height: 100 }); }; @@ -551,7 +551,7 @@ Supports the formats: S01E01, 1x1, 2017.12.31 and 31.12.2017 (Date formats also scrollbars: false, resizable: false, maximizable: false, - width: 350, + width: window.qBittorrent.Dialog.limitWidthToViewport(350), height: 100 }); }; @@ -574,7 +574,7 @@ Supports the formats: S01E01, 1x1, 2017.12.31 and 31.12.2017 (Date formats also scrollbars: false, resizable: false, maximizable: false, - width: 360, + width: window.qBittorrent.Dialog.limitWidthToViewport(360), height: 90 }); }; @@ -590,7 +590,7 @@ Supports the formats: S01E01, 1x1, 2017.12.31 and 31.12.2017 (Date formats also scrollbars: false, resizable: false, maximizable: false, - width: 350, + width: window.qBittorrent.Dialog.limitWidthToViewport(350), height: 85 }); }; diff --git a/src/webui/www/private/views/searchplugins.html b/src/webui/www/private/views/searchplugins.html index 768b605fc..770ebedc0 100644 --- a/src/webui/www/private/views/searchplugins.html +++ b/src/webui/www/private/views/searchplugins.html @@ -124,7 +124,7 @@ maximizable: false, paddingVertical: 0, paddingHorizontal: 0, - width: 500, + width: window.qBittorrent.Dialog.limitWidthToViewport(500), height: 120 }); };