github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-08-21 05:43:32 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

WebUI: Limit window sizes to viewport size

Browse source 
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.
This commit is contained in:
Thomas Piccirello 2025-07-06 11:58:07 -04:00 • committed by GitHub
commit 0e0b1d0962
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 49 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/webui/www/private/scripts/mocha-init.js
View file

@ -42,7 +42,9 @@ window.qBittorrent ??= {};
window.qBittorrent.Dialog ??= (() => { window.qBittorrent.Dialog ??= (() => {
const exports = () => { const exports = () => {
return { return {
baseModalOptions: baseModalOptions baseModalOptions: baseModalOptions,
limitWidthToViewport: limitWidthToViewport,
limitHeightToViewport: limitHeightToViewport
}; };
}; };
@ -68,6 +70,13 @@ window.qBittorrent.Dialog ??= (() => {
deepFreezeSafe(obj); 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), { const baseModalOptions = Object.assign(Object.create(null), {
addClass: "modalDialog", addClass: "modalDialog",
collapsible: false, collapsible: false,
@ -86,7 +95,7 @@ window.qBittorrent.Dialog ??= (() => {
left: 5 left: 5
}, },
resizable: true, resizable: true,
width: 480, width: limitWidthToViewport(480),
onCloseComplete: () => { onCloseComplete: () => {
// make sure overlay is properly hidden upon modal closing // make sure overlay is properly hidden upon modal closing
document.getElementById("modalOverlay").style.display = "none"; document.getElementById("modalOverlay").style.display = "none";
@ -156,11 +165,15 @@ const initializeWindows = () => {
LocalPreferences.set(`window_${windowId}_height`, size.y); 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); 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); return LocalPreferences.get(`window_${windowId}_height`, defaultValue);
}; };
@ -325,7 +338,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 424, width: window.qBittorrent.Dialog.limitWidthToViewport(424),
height: 100 height: 100
}); });
}; };
@ -351,7 +364,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 424, width: window.qBittorrent.Dialog.limitWidthToViewport(424),
height: 100 height: 100
}); });
}; };
@ -397,7 +410,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 424, width: window.qBittorrent.Dialog.limitWidthToViewport(424),
height: 220 height: 220
}); });
}; };
@ -473,7 +486,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 424, width: window.qBittorrent.Dialog.limitWidthToViewport(424),
height: 100 height: 100
}); });
}; };
@ -520,7 +533,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 424, width: window.qBittorrent.Dialog.limitWidthToViewport(424),
height: 100 height: 100
}); });
}; };
@ -703,7 +716,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 400, width: window.qBittorrent.Dialog.limitWidthToViewport(400),
height: 130 height: 130
}); });
}; };
@ -733,7 +746,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 400, width: window.qBittorrent.Dialog.limitWidthToViewport(400),
height: 100 height: 100
}); });
}; };
@ -868,7 +881,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 400, width: window.qBittorrent.Dialog.limitWidthToViewport(400),
height: 150 height: 150
}); });
}; };
@ -909,7 +922,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 400, width: window.qBittorrent.Dialog.limitWidthToViewport(400),
height: 150 height: 150
}); });
}; };
@ -931,7 +944,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 400, width: window.qBittorrent.Dialog.limitWidthToViewport(400),
height: 150 height: 150
}); });
}; };
@ -954,7 +967,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 400, width: window.qBittorrent.Dialog.limitWidthToViewport(400),
height: 150 height: 150
}); });
}; };
@ -1017,7 +1030,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 250, width: window.qBittorrent.Dialog.limitWidthToViewport(250),
height: 100 height: 100
}); });
}; };
@ -1064,7 +1077,7 @@ const initializeWindows = () => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 250, width: window.qBittorrent.Dialog.limitWidthToViewport(250),
height: 100 height: 100
}); });
updateMainData(); updateMainData();
@ -1117,7 +1130,7 @@ const initializeWindows = () => {
resizable: true, resizable: true,
maximizable: false, maximizable: false,
padding: 10, padding: 10,
width: 424, width: window.qBittorrent.Dialog.limitWidthToViewport(424),
height: 100, height: 100,
onCloseComplete: () => { onCloseComplete: () => {
updateMainData(); updateMainData();

2
src/webui/www/private/scripts/prop-files.js
View file

@ -503,7 +503,7 @@ window.qBittorrent.PropFiles ??= (() => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 400, width: window.qBittorrent.Dialog.limitWidthToViewport(400),
height: 100 height: 100
}); });
}; };

2
src/webui/www/private/scripts/prop-peers.js
View file

@ -145,7 +145,7 @@ window.qBittorrent.PropPeers ??= (() => {
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 350, width: window.qBittorrent.Dialog.limitWidthToViewport(350),
height: 260 height: 260
}); });
}, },

4
src/webui/www/private/scripts/prop-trackers.js
View file

@ -197,7 +197,7 @@ window.qBittorrent.PropTrackers ??= (() => {
closable: true, closable: true,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 500, width: window.qBittorrent.Dialog.limitWidthToViewport(500),
height: 260, height: 260,
onCloseComplete: () => { onCloseComplete: () => {
updateData(); updateData();
@ -222,7 +222,7 @@ window.qBittorrent.PropTrackers ??= (() => {
closable: true, closable: true,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 500, width: window.qBittorrent.Dialog.limitWidthToViewport(500),
height: 150, height: 150,
onCloseComplete: () => { onCloseComplete: () => {
updateData(); updateData();

4
src/webui/www/private/scripts/prop-webseeds.js
View file

@ -159,7 +159,7 @@ window.qBittorrent.PropWebseeds ??= (() => {
closable: true, closable: true,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 500, width: window.qBittorrent.Dialog.limitWidthToViewport(500),
height: 260, height: 260,
onCloseComplete: () => { onCloseComplete: () => {
updateData(); updateData();
@ -188,7 +188,7 @@ window.qBittorrent.PropWebseeds ??= (() => {
closable: true, closable: true,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 500, width: window.qBittorrent.Dialog.limitWidthToViewport(500),
height: 150, height: 150,
onCloseComplete: () => { onCloseComplete: () => {
updateData(); updateData();

14
src/webui/www/private/views/rss.html
View file

@ -349,7 +349,7 @@
scrollbars: false, scrollbars: false,
resizable: false, resizable: false,
maximizable: false, maximizable: false,
width: 350, width: window.qBittorrent.Dialog.limitWidthToViewport(350),
height: 100 height: 100
}); });
}; };
@ -377,7 +377,7 @@
scrollbars: false, scrollbars: false,
resizable: false, resizable: false,
maximizable: false, maximizable: false,
width: 350, width: window.qBittorrent.Dialog.limitWidthToViewport(350),
height: 100 height: 100
}); });
}; };
@ -791,7 +791,7 @@
scrollbars: false, scrollbars: false,
resizable: false, resizable: false,
maximizable: false, maximizable: false,
width: 350, width: window.qBittorrent.Dialog.limitWidthToViewport(350),
height: 100 height: 100
}); });
}; };
@ -811,7 +811,7 @@
scrollbars: false, scrollbars: false,
resizable: false, resizable: false,
maximizable: false, maximizable: false,
width: 350, width: window.qBittorrent.Dialog.limitWidthToViewport(350),
height: 100 height: 100
}); });
}; };
@ -827,7 +827,7 @@
scrollbars: false, scrollbars: false,
resizable: false, resizable: false,
maximizable: false, maximizable: false,
width: 350, width: window.qBittorrent.Dialog.limitWidthToViewport(350),
height: 70 height: 70
}); });
}; };
@ -947,8 +947,8 @@
loadMethod: "xhr", loadMethod: "xhr",
contentURL: "views/rssDownloader.html", contentURL: "views/rssDownloader.html",
maximizable: false, maximizable: false,
width: loadWindowWidth(id, 800), width: loadWindowWidth(id, 800, false),
height: loadWindowHeight(id, 650), height: loadWindowHeight(id, 650, false),
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => { onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id); saveWindowSize(id);
}), }),

8
src/webui/www/private/views/rssDownloader.html
View file

@ -536,7 +536,7 @@ Supports the formats: S01E01, 1x1, 2017.12.31 and 31.12.2017 (Date formats also
scrollbars: false, scrollbars: false,
resizable: false, resizable: false,
maximizable: false, maximizable: false,
width: 350, width: window.qBittorrent.Dialog.limitWidthToViewport(350),
height: 100 height: 100
}); });
}; };
@ -551,7 +551,7 @@ Supports the formats: S01E01, 1x1, 2017.12.31 and 31.12.2017 (Date formats also
scrollbars: false, scrollbars: false,
resizable: false, resizable: false,
maximizable: false, maximizable: false,
width: 350, width: window.qBittorrent.Dialog.limitWidthToViewport(350),
height: 100 height: 100
}); });
}; };
@ -574,7 +574,7 @@ Supports the formats: S01E01, 1x1, 2017.12.31 and 31.12.2017 (Date formats also
scrollbars: false, scrollbars: false,
resizable: false, resizable: false,
maximizable: false, maximizable: false,
width: 360, width: window.qBittorrent.Dialog.limitWidthToViewport(360),
height: 90 height: 90
}); });
}; };
@ -590,7 +590,7 @@ Supports the formats: S01E01, 1x1, 2017.12.31 and 31.12.2017 (Date formats also
scrollbars: false, scrollbars: false,
resizable: false, resizable: false,
maximizable: false, maximizable: false,
width: 350, width: window.qBittorrent.Dialog.limitWidthToViewport(350),
height: 85 height: 85
}); });
}; };

2
src/webui/www/private/views/searchplugins.html
View file

@ -124,7 +124,7 @@
maximizable: false, maximizable: false,
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: 500, width: window.qBittorrent.Dialog.limitWidthToViewport(500),
height: 120 height: 120
}); });
}; };