github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-08-14 02:27:09 -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). Every window has been tested for compatibility.
This commit is contained in:
Thomas Piccirello 2025-06-24 21:49:27 -07:00
commit fff8c687ff
No known key found for this signature in database
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

@ -192,7 +192,7 @@ window.qBittorrent.PropTrackers ??= (() => {
closable: true,
paddingVertical: 0,
paddingHorizontal: 0,
width: 500,
width: window.qBittorrent.Dialog.limitWidthToViewport(500),
height: 260,
onCloseComplete: () => {
updateData();
@ -217,7 +217,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
});
};