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 ??= (() => {
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();

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

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

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

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

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

@ -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();

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

@ -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();

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

@ -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);
}),

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,
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
});
};

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

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