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.
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

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

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

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

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

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

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

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

View file

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