Replace WebUI Options fixed-width labels

This allows the labels to auto-expand based on the language used, and also removes unnecessary whitespace. Additionally, this results in a look more consistent with the GUI which right-aligns labels.
This commit is contained in:
Thomas Piccirello
2018-10-16 00:15:15 -04:00
parent 99ca872011
commit 66e3be1579
5 changed files with 369 additions and 193 deletions

View File

@@ -18,52 +18,98 @@
<h2 class="vcenter">QBT_TR(Download Torrents from their URLs or Magnet links)QBT_TR[CONTEXT=HttpServer]</h2>
<textarea id="urls" rows="10" name="urls"></textarea>
<p>QBT_TR(Only one link per line)QBT_TR[CONTEXT=HttpServer]</p>
<fieldset class="settings" style="border: 0; text-align: left;">
<div class="formRow" style="margin-top: 6px;">
<label for="savepath" class="leftLabelLarge">QBT_TR(Save files to location:)QBT_TR[CONTEXT=HttpServer]</label>
<input type="text" id="savepath" name="savepath" style="width: 16em;" />
</div>
<div class="formRow">
<label for="cookie" class="leftLabelLarge">QBT_TR(Cookie:)QBT_TR[CONTEXT=HttpServer]</label>
<input type="text" id="cookie" name="cookie" style="width: 16em;" />
</div>
<div class="formRow">
<label for="rename" class="leftLabelLarge">QBT_TR(Rename torrent)QBT_TR[CONTEXT=HttpServer]</label>
<input type="text" id="rename" name="rename" style="width: 16em;" />
</div>
<div class="formRow">
<label for="category" class="leftLabelLarge">QBT_TR(Category:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
<input type="text" id="category" name="category" style="width: 16em;" />
</div>
<div class="formRow">
<label for="start_torrent" class="leftLabelLarge">QBT_TR(Start torrent)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
<input type="checkbox" id="start_torrent" checked="checked" />
<input type="hidden" id="add_paused" name="paused" value="false" readonly />
</div>
<div class="formRow">
<label for="skip_checking" class="leftLabelLarge">QBT_TR(Skip hash check)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
<input type="checkbox" id="skip_checking" name="skip_checking" value="true" />
</div>
<div class="formRow">
<label for="root_folder" class="leftLabelLarge">QBT_TR(Create subfolder)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
<input type="checkbox" id="root_folder" name="root_folder" value="true" checked="checked" />
</div>
<div class="formRow">
<label for="sequentialDownload" class="leftLabelLarge">QBT_TR(Download in sequential order)QBT_TR[CONTEXT=TransferListWidget]</label>
<input type="checkbox" id="sequentialDownload" name="sequentialDownload" value="true" />
</div>
<div class="formRow">
<label for="firstLastPiecePrio" class="leftLabelLarge">QBT_TR(Download first and last pieces first)QBT_TR[CONTEXT=TransferListWidget]</label>
<input type="checkbox" id="firstLastPiecePrio" name="firstLastPiecePrio" value="true" />
</div>
<div class="formRow">
<label for="dlLimit" class="leftLabelLarge">QBT_TR(Limit download rate)QBT_TR[CONTEXT=HttpServer]</label>
<input type="text" id="dlLimit" name="dlLimit" style="width: 16em;" placeholder="Bytes/s" />
</div>
<div class="formRow">
<label for="upLimit" class="leftLabelLarge">QBT_TR(Limit upload rate)QBT_TR[CONTEXT=HttpServer]</label>
<input type="text" id="upLimit" name="upLimit" style="width: 16em;" placeholder="Bytes/s" />
</div>
<fieldset class="settings" style="border: 0; text-align: left; margin-top: 6px;">
<table style="margin: auto;">
<tr>
<td>
<label for="savepath">QBT_TR(Save files to location:)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="savepath" name="savepath" style="width: 16em;" />
</td>
</tr>
<tr>
<td>
<label for="cookie">QBT_TR(Cookie:)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="cookie" name="cookie" style="width: 16em;" />
</td>
</tr>
<tr>
<td>
<label for="rename">QBT_TR(Rename torrent)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="rename" name="rename" style="width: 16em;" />
</td>
</tr>
<tr>
<td>
<label for="category">QBT_TR(Category:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<input type="text" id="category" name="category" style="width: 16em;" />
</td>
</tr>
<tr>
<td>
<label for="start_torrent">QBT_TR(Start torrent)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<input type="checkbox" id="start_torrent" checked="checked" />
<input type="hidden" id="add_paused" name="paused" value="false" readonly />
</td>
</tr>
<tr>
<td>
<label for="skip_checking">QBT_TR(Skip hash check)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<input type="checkbox" id="skip_checking" name="skip_checking" value="true" />
</td>
</tr>
<tr>
<td>
<label for="root_folder">QBT_TR(Create subfolder)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<input type="checkbox" id="root_folder" name="root_folder" value="true" checked="checked" />
</td>
</tr>
<tr>
<td>
<label for="sequentialDownload">QBT_TR(Download in sequential order)QBT_TR[CONTEXT=TransferListWidget]</label>
</td>
<td>
<input type="checkbox" id="sequentialDownload" name="sequentialDownload" value="true" />
</td>
</tr>
<tr>
<td>
<label for="firstLastPiecePrio">QBT_TR(Download first and last pieces first)QBT_TR[CONTEXT=TransferListWidget]</label>
</td>
<td>
<input type="checkbox" id="firstLastPiecePrio" name="firstLastPiecePrio" value="true" />
</td>
</tr>
<tr>
<td>
<label for="dlLimit">QBT_TR(Limit download rate)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="dlLimit" name="dlLimit" style="width: 16em;" placeholder="Bytes/s" />
</td>
</tr>
<tr>
<td>
<label for="upLimit">QBT_TR(Limit upload rate)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="upLimit" name="upLimit" style="width: 16em;" placeholder="Bytes/s" />
</td>
</tr>
</table>
<div id="submitbutton" style="margin-top: 12px; text-align: center;">
<button type="submit" id="submitButton">QBT_TR(Download)QBT_TR[CONTEXT=downloadFromURL]</button>
</div>