squidy/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent.git synced 2025-12-17 14:08:03 -06:00
Code Issues Packages Projects Releases Wiki Activity

WebUI: Redesign login form

Browse Source 
Make the Web UI login more mobile friendly.
The main action is moving to a column layout for the logo and form. This way it's easier for mobile to view the page but it doesn't affect the desktop experience much.

Secondary it set the input font size to be default text size, this in turn makes it so the mobile ui doesn't zoom in when you focus the inputs. [You can read more about it here](https://wsform.com/knowledgebase/why-forms-zoom-on-some-mobile-devices-and-browsers-and-how-to-control-it/).

PR #23360.
This commit is contained in:
Marcus Järrud
2025-10-24 18:23:18 +02:00
committed by GitHub
parent a8e9e800b3
commit 60feb3cce2
2 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/webui/www/public/css/login.css
View File

@@ -16,12 +16,23 @@ body {
} }
#main { #main {
align-items: center;
display: flex;
flex-direction: column;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 5em; padding-top: 5em;
text-align: center; text-align: center;
} }
.login-input {
box-sizing: border-box;
font-size: 1rem;
margin: 0.5rem 0;
padding: 0.5rem;
width: 100%;
}
#formplace { #formplace {
padding: 10px; padding: 10px;
text-align: left; text-align: left;
@@ -33,7 +44,9 @@ body {
} }
#loginButton { #loginButton {
float: right; font-size: 1rem;
padding: 0.5rem;
width: 100%;
} }
#logo img { #logo img {

4
src/webui/www/public/index.html
View File

@@ -32,11 +32,11 @@
<form id="loginform"> <form id="loginform">
<div class="row"> <div class="row">
<label for="username">QBT_TR(Username)QBT_TR[CONTEXT=Login]</label><br> <label for="username">QBT_TR(Username)QBT_TR[CONTEXT=Login]</label><br>
<input type="text" id="username" name="username" autocomplete="username" autocapitalize="none" autofocus required> <input type="text" class="login-input" id="username" name="username" autocomplete="username" autocapitalize="none" autofocus required>
</div> </div>
<div class="row"> <div class="row">
<label for="password">QBT_TR(Password)QBT_TR[CONTEXT=Login]</label><br> <label for="password">QBT_TR(Password)QBT_TR[CONTEXT=Login]</label><br>
<input type="password" id="password" name="password" autocomplete="current-password" required> <input type="password" class="login-input" id="password" name="password" autocomplete="current-password" required>
</div> </div>
<div class="row"> <div class="row">
<input type="submit" id="loginButton" value="QBT_TR(Login)QBT_TR[CONTEXT=Login]"> <input type="submit" id="loginButton" value="QBT_TR(Login)QBT_TR[CONTEXT=Login]">