Web UI: Cosmetic improvements to preferences

src/webui/css/style.css

@@ -1,8 +1,8 @@
 /* Reset */
 
-ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,object,iframe { margin: 0; padding: 0; }
+/*ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,object,iframe { margin: 0; padding: 0; }*/
 a img,:link img,:visited img { border: none; }
-table { border-collapse: collapse; border-spacing: 0; }
+/*table { border-collapse: collapse; border-spacing: 0; }*/
 :focus { outline: none; }
 
 /* Structure */
@@ -294,7 +294,7 @@ fieldset.settings {
 	border-radius: 8px;
 	-webkit-border-radius: 8px;
 	-moz-border-radius: 8px;
-	padding: 4px;
+	padding: 4px 4px 4px 10px;
 }
 
 fieldset.settings legend {
@@ -302,3 +302,38 @@ fieldset.settings legend {
 	padding: 4px;
   font-weight: bold;
 }
+
+fieldset.settings label {
+  padding: 2px;
+}
+
+fieldset.settings .leftLabelSmall {
+  width: 5em;
+  float: left;
+  text-align: right;
+  margin-right: 0.5em;
+  display: block;
+}
+
+fieldset.settings .leftLabelLarge {
+  width: 14em;
+  float: left;
+  text-align: right;
+  margin-right: 0.5em;
+  display: block;
+}
+
+div.formRow {
+  clear: left;
+  display: block;
+}
+
+ul.filterList {
+  margin: 0 0 0 16px;
+  padding-left: 0;
+}
+
+ul.filterList li {
+  padding-top: 2px
+}
+

src/webui/html/filters.html

@@ -1,4 +1,4 @@
-				<ul>
+				<ul class="filterList">
 					<li id="all_filter"><a href="#" onclick="setFilter('all');"><img src="images/skin/filterall.png"/>_(All)</a></li>
 					<li id="downloading_filter"><a href="#" onclick="setFilter('downloading');"><img src="images/skin/downloading.png"/>_(Downloading)</a></li>
 					<li id="completed_filter"><a href="#" onclick="setFilter('completed');"><img src="images/skin/uploading.png"/>_(Completed)</a></li>

src/webui/html/preferences_content.html

@@ -1,174 +1,177 @@
 <div id="ConnectionTab" class="PrefTab">
 <fieldset class="settings">
   <legend>_(Listening Port)</legend>
-  <div style="padding-left: 30px;">
+  <label for="port_value">_(Port used for incoming connections:)</label>
-  _(Port used for incoming connections:)
+  <input type="text" id="port_value" style="width: 4em;"/><br/>
-  <input type="text" id="port_value" style="width: 4em;"/>
+  <input type="checkbox" id="upnp_checkbox"/>
-  <br/>
+  <label for="upnp_checkbox">_(Use UPnP / NAT-PMP port forwarding from my router)</label>
-  <table>
-  <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="upnp_checkbox" style="margin-bottom: -2px;"/></td><td>_(Use UPnP / NAT-PMP port forwarding from my router)</td>
-  </tr>
-  </table>
-  </div>
 </fieldset>
 <fieldset class="settings">
   <legend>_(Connections Limits)</legend>
-  <div style="padding-left: 30px;">
   <table>
   <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="max_connec_checkbox" onClick="updateMaxConnecEnabled();"/></td><td style="padding-right: 3px;">_(Global maximum number of connections:)</td><td><input type="text" id="max_connec_value" style="width: 4em;"/></td>
+  <td>
+    <input type="checkbox" id="max_connec_checkbox" onClick="updateMaxConnecEnabled();"/>
+    <label for="max_connec_checkbox">_(Global maximum number of connections:)</label>
+  </td>
+  <td><input type="text" id="max_connec_value" style="width: 4em;"/></td>
   </tr>
   <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="max_connec_per_torrent_checkbox" onClick="updateMaxConnecPerTorrentEnabled();" style="margin-bottom: -2px;"/></td><td style="padding-right: 3px;">_(Maximum number of connections per torrent:)</td><td><input type="text" id="max_connec_per_torrent_value" style="width: 4em;"/></td>
+  <td>
+    <input type="checkbox" id="max_connec_per_torrent_checkbox" onClick="updateMaxConnecPerTorrentEnabled();"/>
+    <label for="max_connec_per_torrent_checkbox">_(Maximum number of connections per torrent:)</label>
+  </td>
+  <td><input type="text" id="max_connec_per_torrent_value" style="width: 4em;"/></td>
   </tr>
   <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="max_uploads_per_torrent_checkbox" onClick="updateMaxUploadsPerTorrentEnabled();" style="margin-bottom: -2px;"/></td><td style="padding-right: 3px;">_(Maximum number of upload slots per torrent:)</td><td><input type="text" id="max_uploads_per_torrent_value" style="width: 4em;"/></td>
+  <td>
+    <input type="checkbox" id="max_uploads_per_torrent_checkbox" onClick="updateMaxUploadsPerTorrentEnabled();"/>
+    <label for="max_uploads_per_torrent_checkbox">_(Maximum number of upload slots per torrent:)</label>
+  </td>
+  <td><input type="text" id="max_uploads_per_torrent_value" style="width: 4em;"/></td>
   </tr>
   </table>
-  </div>
 </fieldset>
 <fieldset class="settings">
   <legend>_(Global Rate Limits)</legend>
-  <div style="padding-left: 30px;">
   <table>
   <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="up_limit_checkbox" onClick="updateUpLimitEnabled();"/></td><td style="padding-right: 3px;">_(Upload:)</td><td><input type="text" id="up_limit_value" style="width: 4em;"/>&nbsp;&nbsp;_(KiB/s)</td>
+  <td>
+    <input type="checkbox" id="up_limit_checkbox" onClick="updateUpLimitEnabled();"/>
+    <label for ="up_limit_checkbox">_(Upload:)</label>
+  </td>
+  <td><input type="text" id="up_limit_value" style="width: 4em;"/>&nbsp;&nbsp;_(KiB/s)</td>
   </tr>
   <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="dl_limit_checkbox" onClick="updateDlLimitEnabled();"/></td><td style="padding-right: 3px;">_(Download:)</td><td><input type="text" id="dl_limit_value" style="width: 4em;"/>&nbsp;&nbsp;_(KiB/s)</td>
+  <td>
+    <input type="checkbox" id="dl_limit_checkbox" onClick="updateDlLimitEnabled();"/>
+    <label for="dl_limit_checkbox">_(Download:)</label>
+  </td>
+  <td><input type="text" id="dl_limit_value" style="width: 4em;"/>&nbsp;&nbsp;_(KiB/s)</td>
   </tr>
   </table>
   <fieldset class="settings">
   <legend>_(Options)</legend>
-  <input type="checkbox" id="enable_utp_checkbox"/>&nbsp;&nbsp;_(Enable bandwidth management (uTP))<br/>
+  <input type="checkbox" id="enable_utp_checkbox"/>
-  <input type="checkbox" id="limit_utp_rate_checkbox"/>&nbsp;&nbsp;_(Apply rate limit to uTP connections)<br/>
+  <label for="enable_utp_checkbox">_(Enable bandwidth management (uTP))</label><br/>
-  <input type="checkbox" id="limit_tcp_overhead_checkbox"/>&nbsp;&nbsp;_(Apply rate limit to transport overhead)<br/>
+  <input type="checkbox" id="limit_utp_rate_checkbox"/>
+  <label for="limit_utp_rate_checkbox">_(Apply rate limit to uTP connections)</label><br/>
+  <input type="checkbox" id="limit_tcp_overhead_checkbox"/>
+  <label for="limit_tcp_overhead_checkbox">_(Apply rate limit to transport overhead)</label><br/>
   </fieldset>
-  </div>
 </fieldset>
 </div>
 
 <div id="BittorrentTab" class="PrefTab invisible">
 <fieldset class="settings">
   <legend>_(Privacy)</legend>
-  <div style="padding-left: 30px;">
+  <input type="checkbox" id="dht_checkbox"/>
-  <table>
+  <label for="dht_checkbox">_(Enable DHT (decentralized network) to find more peers)</label><br/>
-  <tr>
+  <input type="checkbox" id="DHTPortDiffThanBT_checkbox" onclick="updateDHTPortSettings();"/>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="dht_checkbox"/></td><td>_(Enable DHT (decentralized network) to find more peers)</td>
+  <label for="DHTPortDiffThanBT_checkbox">_(Use a different port for DHT and BitTorrent)</label><br/>
-  </tr>
+  <label for="DHTPort_txt" style="margin-left: 20px;">_(DHT port:)</label>
-  <tr>
+  <input type="text" id="DHTPort_txt" value="6881"/><br/>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="DHTPortDiffThanBT_checkbox" onclick="updateDHTPortSettings();"/></td><td>_(Use a different port for DHT and BitTorrent)</td>
+  <input type="checkbox" id="pex_checkbox"/>
-  </tr>
+  <label for="pex_checkbox">_(Enable Peer Exchange (PeX) to find more peers)</label><br/>
-  <tr>
+  <input type="checkbox" id="lsd_checkbox"/>
-  <td style="vertical-align: bottom; text-align: right;">_(DHT port:)</td><td><input type="text" id="DHTPort_txt" value="6881"/></td>
+  <label for="lsd_checkbox">_(Enable Local Peer Discovery to find more peers)</label><br/>
-  </tr>
+
-  <tr>
+  <label for="encryption_select">_(Encryption mode:)</label>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="pex_checkbox"/></td><td>_(Enable Peer Exchange (PeX) to find more peers)</td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="lsd_checkbox"/></td><td>_(Enable Local Peer Discovery to find more peers)</td>
-  </tr>
-  </table>
-  _(Encryption mode:)
   <select id="encryption_select">
     <option value="0">_(Prefer encryption)</option>
     <option value="1">_(Require encryption)</option>
     <option value="2">_(Disable encryption)</option>
   </select><br/>
-  <input type="checkbox" id="anonymous_mode_checkbox" onClick="toggleAnonymousMode()"/>&nbsp;&nbsp;_(Enable anonymous mode) (<a href="http://sourceforge.net/apps/mediawiki/qbittorrent/index.php?title=Anonymous_mode">More information</a>)<br/>
+  <input type="checkbox" id="anonymous_mode_checkbox" onClick="toggleAnonymousMode()"/>
-  </div>
+  <label for="anonymous_mode_checkbox">_(Enable anonymous mode) (<a href="http://sourceforge.net/apps/mediawiki/qbittorrent/index.php?title=Anonymous_mode">More information</a>)</label><br/>
 </fieldset>
 </div>
 
 <div id="DownloadsTab" class="PrefTab invisible">
   <fieldset class="settings">
   <legend>_(Hard Disk)</legend>
-  <div style="padding-left: 30px;">
+  <div class="formRow">
-  <table>
+  <label for="savepath_text" class="leftLabelLarge">_(Save files to location:)</label>
-  <tr>
+  <input type="text" id="savepath_text"/>
-  <td style="vertical-align: bottom; text-align: right;">_(Save files to location:)</td><td><input type="text" id="savepath_text"/></td>
+  </div>
-  </tr>
+  <div class="formRow">
-  <tr>
+  <input type="checkbox" id="temppath_checkbox" onclick="updateTempDirEnabled();"/>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="temppath_checkbox" onclick="updateTempDirEnabled();"/></td><td>_(Keep incomplete torrents in:)</td>
+  <label for="temppath_checkbox">_(Keep incomplete torrents in:)</label>
-  </tr>
+  <input type="text" id="temppath_text"/>
-  <tr>
+  </div>
-  <td style="vertical-align: bottom; text-align: right;"></td><td><input type="text" id="temppath_text"/></td>
+  <br/>
-  </tr>
+  _(Automatically add torrents from:)<br/>
-  <tr><td colspan="2">_(Automatically add torrents from:)</td></tr>
+    <table border="1" id="watched_folders_tab">
-  <tr>
-  <td></td>
-  <td>
-    <table style="text-align: center" border="1" id="watched_folders_tab">
     <thead><tr><th>_(Watched Folder)</th><th>_(Download here)</th></tr></thead>
     <tbody></tbody>
     <tfoot><tr><td style="padding-top:4px;"><input type="text" id="new_watch_folder_txt"/></td><td style="padding-top:4px;"><input type="checkbox" id="new_watch_folder_dl" style="padding-left:18px;"/><img src="theme/list-add" alt="Add" style="padding-left:2px;width:16px;cursor:pointer;margin-right:-18px;" onclick="javascript:addWatchFolder();"/></td></tr></tfoot>
-    </table>
+    </table><br/>
-  </td>
+
-  </tr>
+  <input type="checkbox" id="exportdir_checkbox" onclick="updateExportDirEnabled();"/>
-  <tr>
+  <label for="exportdir_checkbox">_(Copy .torrent files to:)</label>&nbsp;&nbsp;
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="exportdir_checkbox" onclick="updateExportDirEnabled();"/></td><td>_(Copy .torrent files to:)</td>
+  <input type="text" id="exportdir_text"/><br/>
-  </tr>
+  <span id="appendexttr">
-  <tr>
+  <input type="checkbox" id="appendext_checkbox"/>
-  <td style="vertical-align: bottom; text-align: right;"></td><td><input type="text" id="exportdir_text"/></td>
+  <label for="appendext_checkbox">_(Append .!qB extension to incomplete files)</label><br/>
-  </tr>
+  </span>
-  <tr id="appendexttr">
+  
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="appendext_checkbox"/></td><td>_(Append .!qB extension to incomplete files)</td>
+  <input type="checkbox" id="preallocateall_checkbox"/>
-  </tr>
+  <label for="preallocateall_checkbox">_(Pre-allocate disk space for all files)</label><br/>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="preallocateall_checkbox"/></td><td>_(Pre-allocate disk space for all files)</td>
-  </tr>
-  </table>
-  </div>
 </fieldset>
+
 <fieldset class="settings">
   <legend>_(Email notification upon download completion)</legend>
-<div style="padding-left: 30px;">
+  <input type="checkbox" id="mail_notification_checkbox" onclick="updateMailNotification();"/>
- <input type="checkbox" id="mail_notification_checkbox" onclick="updateMailNotification();"/> _(Email notification upon download completion)
+  <label for="mail_notification_checkbox">_(Email notification upon download completion)</label><br/>
-  <table>
+  <div class="formRow">
-  <tr>
+  <label for="dest_email_txt" class="leftLabelLarge">_(Destination email:)</label><input type="text" id="dest_email_txt"/>
-  <td style="vertical-align: bottom; text-align: right;">_(Destination email:)</td><td><input type="text" id="dest_email_txt"/></td>
+  </div>
-  </tr>
+  <div class="formRow">
-  <tr>
+  <label for="smtp_server_txt" class="leftLabelLarge">_(SMTP server:)</label><input type="text" id="smtp_server_txt"/>
-  <td style="vertical-align: bottom; text-align: right;">_(SMTP server:)</td><td><input type="text" id="smtp_server_txt"/></td>
+  </div>
-  </tr>
+  <div class="formRow">
-  </table>
+  <input type="checkbox" id="mail_ssl_checkbox"/><label for="mail_ssl_checkbox">_(This server requires a secure connection (SSL))</label>
-  <input type="checkbox" id="mail_ssl_checkbox"/> _(This server requires a secure connection (SSL))<br/>
+  </div>
-  <input type="checkbox" id="mail_auth_checkbox" onclick="updateMailAuthSettings();" />&nbsp;&nbsp;_(Authentication)<br/>
+  <input type="checkbox" id="mail_auth_checkbox" onclick="updateMailAuthSettings();"/><label for="mail_auth_checkbox">_(Authentication)</label><br/>
-    <table>
+    <div class="formRow">
-    <tr><td style="padding-left: 10px;">_(Username:)</td><td><input type="text" id="mail_username_text" /></td></tr>
+    <label for="mail_username_text" class="leftLabelLarge">_(Username:)</label><input type="text" id="mail_username_text"/>
-    <tr><td style="padding-left: 10px;">_(Password:)</td><td><input type="password" id="mail_password_text" /></td></tr>
+    </div>
-    </table>
+    <div class="formRow">
+    <label for="mail_password_text" class="leftLabelLarge">_(Password:)</label><input type="password" id="mail_password_text"/>
     </div>
 </fieldset>
+
 <fieldset class="settings">
   <legend>_(Run an external program on torrent completion)</legend>
-<div style="padding-left: 30px;">
+ <input type="checkbox" id="autorun_checkbox" onclick="updateAutoRun();"/>
- <input type="checkbox" id="autorun_checkbox" onclick="updateAutoRun();"/> _(Run an external program on torrent completion)<br/>
+ <label for="autorun_checkbox">_(Run an external program on torrent completion)</label><br/>
 <input type="text" id="autorunProg_txt" style="width: 400px;"/><br/>
 <i>_(The following parameters are supported:)
 <ul>
 <li>%f: _(Torrent path)</li>
 <li>%n: _(Torrent name)</li>
 </ul></i>
-</div>
 </fieldset>
+
 <fieldset class="settings">
   <legend>_(Torrent Queueing)</legend>
-  <div style="padding-left: 30px;">
+  <input type="checkbox" id="queueing_checkbox" onclick="updateQueuingSystem();"/>
-  <input type="checkbox" id="queueing_checkbox" onclick="updateQueuingSystem();"/> _(Torrent Queueing)
+  <label for="queueing_checkbox">_(Torrent Queueing)</label><br/>
-  <table>
+  <div class="formRow">
-  <tr>
+  <label for="max_active_dl_value" style="margin-left: 20px;" class="leftLabelLarge">_(Maximum active downloads:)</label>
-  <td style="vertical-align: bottom; text-align: right;">_(Maximum active downloads:)</td><td><input type="text" id="max_active_dl_value" style="width: 4em;"/></td>
+  <input type="text" id="max_active_dl_value" style="width: 4em;"/>
-  </tr>
+  </div>
-  <tr>
+  <div class="formRow">
-  <td style="vertical-align: bottom; text-align: right;">_(Maximum active uploads:)</td><td><input type="text" id="max_active_up_value" style="width: 4em;"/></td>
+  <label for="max_active_up_value" style="margin-left: 20px;" class="leftLabelLarge">_(Maximum active uploads:)</label>
-  </tr>
+  <input type="text" id="max_active_up_value" style="width: 4em;"/>
-  <tr>
+  </div>
-  <td style="vertical-align: bottom; text-align: right;">_(Maximum active torrents:)</td><td><input type="text" id="max_active_to_value" style="width: 4em;"/></td>
+  <div class="formRow">
-  </tr>
+  <label for="max_active_to_value" style="margin-left: 20px;" class="leftLabelLarge">_(Maximum active torrents:)</label>
-  </table>
+  <input type="text" id="max_active_to_value" style="width: 4em;"/>
-  <input type="checkbox" id="dont_count_slow_torrents_checkbox"/> _(Do not count slow torrents in these limits)
+  </div>
+  <div class="formRow">
+  <input type="checkbox" id="dont_count_slow_torrents_checkbox"/>
+  <label for="dont_count_slow_torrents_checkbox">_(Do not count slow torrents in these limits)</label>
   </div>
 </fieldset>
 </div>
@@ -176,35 +179,47 @@
 <div id="FilterTab" class="PrefTab invisible">
 <fieldset class="settings">
   <legend>_(IP Filtering)</legend>
-  <div style="padding-left: 30px;">
+  <input type="checkbox" id="ipfilter_enabled_checkbox" onclick="updateFilterSettings();"/>
-  <input type="checkbox" id="ipfilter_enabled_checkbox" onclick="updateFilterSettings();"/> _(IP Filtering)
+  <label for="ipfilter_enabled_checkbox">_(IP Filtering)</label><br/>
-  <table>
+  <label for="ipfilter_text">_(Filter path (.dat, .p2p, .p2b):)</label>
-  <tr>
+  <input type="text" id="ipfilter_text"/>
-  <td style="vertical-align: bottom;">_(Filter path (.dat, .p2p, .p2b):)</td><td><input type="text" id="ipfilter_text"/></td>
-  </tr>
-  </table>
-  </div>
 </fieldset>
 </div>
 
 <div id="ProxyTab" class="PrefTab invisible">
 <fieldset class="settings">
   <legend>_(Proxy Server)</legend>
-  <div style="padding-left: 30px;">
+    <div class="formRow">
-    _(Type:) <select id ="peer_proxy_type_select" onchange="updatePeerProxySettings();">
+    <label for="peer_proxy_type_select" class="leftLabelSmall">_(Type:)</label>
+    <select id ="peer_proxy_type_select" onchange="updatePeerProxySettings();">
       <option value="none">_((None))</option>
       <option value="socks4">_(SOCKS4)</option>
       <option value="socks5">_(SOCKS5)</option>
       <option value="http">_(HTTP)</option>
-    </select>&nbsp;&nbsp;&nbsp;&nbsp;
+    </select>
-    _(Host:) <input type="text" id="peer_proxy_host_text" />&nbsp;&nbsp;&nbsp;&nbsp;
+    </div>
-    _(Port:) <input type="text" id="peer_proxy_port_value" style="width: 4em;"/><br/>
+    <div class="formRow">
-    <input type="checkbox" id="use_peer_proxy_checkbox" />&nbsp;&nbsp;_(Use proxy for peer connections)<br/><br/>
+    <label for="peer_proxy_host_text" class="leftLabelSmall">_(Host:)</label>
-    <input type="checkbox" id="peer_proxy_auth_checkbox" onclick="updatePeerProxyAuthSettings();" />&nbsp;&nbsp;_(Authentication)<br/>
+    <input type="text" id="peer_proxy_host_text" />
-    <table>
+    </div>
-    <tr><td style="padding-left: 10px;">_(Username:)</td><td><input type="text" id="peer_proxy_username_text" /></td></tr>
+    <div class="formRow">
-    <tr><td style="padding-left: 10px;">_(Password:)</td><td><input type="password" id="peer_proxy_password_text" /></td></tr>
+    <label for="peer_proxy_port_value" class="leftLabelSmall">_(Port:)</label>
-    </table>
+    <input type="text" id="peer_proxy_port_value" style="width: 4em;"/>
+    </div>
+    <div class="formRow">
+    <input type="checkbox" id="use_peer_proxy_checkbox"/>
+    <label for="use_peer_proxy_checkbox">_(Use proxy for peer connections)</label>
+    </div>
+    <input type="checkbox" id="peer_proxy_auth_checkbox" onclick="updatePeerProxyAuthSettings();"/>
+    <label for="peer_proxy_auth_checkbox">_(Authentication)</label><br/>
+    
+    <div class="formRow">
+    <label for="peer_proxy_username_text" style="margin-left: 20px;" class="leftLabelSmall">_(Username:)</label>
+    <input type="text" id="peer_proxy_username_text" />
+    </div>
+    <div class="formRow">
+    <label for="peer_proxy_password_text" style="margin-left: 20px;" class="leftLabelSmall">_(Password:)</label>
+    <input type="password" id="peer_proxy_password_text" />
     </div>
 </fieldset>
 </div>
@@ -212,11 +227,7 @@
 <div id="WebUITab" class="PrefTab invisible">
 <fieldset class="settings">
   <legend>_(Language)</legend>
-  <div style="padding-left: 30px;">
+  <label for="locale_select">_(User Interface Language:)</label>
-  <table>
-  <tr>
-  <td style="vertical-align: bottom;">_(User Interface Language:)</td>
-  <td style="padding-right: 3px;">
     <select id="locale_select">
       <option value="en_GB">English</option>
       <option value="fr_FR">Français</option>
@@ -250,61 +261,54 @@
       <option value="zh_TW">中文 (繁體)</option>
       <option value="ko_KR">한글</option>
     </select>
-  </td>
-  </tr>
-  </table>
-  </div>
 </fieldset>
 
 <fieldset class="settings">
   <legend>_(HTTP Server)</legend>
-  <div style="padding-left: 30px;">
+  <label for="webui_port_value">_(Port:)</label><input type="text" id="webui_port_value" style="width: 4em;"/><br/>
-  <table>
+
-  <tr>
+  <input type="checkbox" id="use_https_checkbox" onclick="updateHttpsSettings();" />
-  <td style="vertical-align: bottom;">_(Port:)</td><td style="padding-right: 3px;"><input type="text" id="webui_port_value" style="width: 4em;"/></td>
+  <label for="use_https_checkbox">_(Use HTTPS instead of HTTP)</label><br/>
-  </tr>
+  <div class="formRow">
-  </table>
+  <label for="ssl_key_textarea" style="margin-left: 20px;" class="leftLabelSmall">_(Key:)</label>
-  <input type="checkbox" id="use_https_checkbox" onclick="updateHttpsSettings();" />&nbsp;&nbsp;_(Use HTTPS instead of HTTP)<br/>
+  <textarea id="ssl_key_textarea" rows="5" cols="70"></textarea>
-  <table>
-  <tr><td style="padding-left: 10px;">_(Key:)</td><td><textarea id="ssl_key_textarea" rows="5" cols="70"></textarea></td></tr>
-  <tr><td style="padding-left: 10px;">_(Certificate:)</td><td><textarea id="ssl_cert_textarea" rows="5" cols="70"></textarea></td></tr>
-  </table>
-  <div style="padding-left: 10px;"><a href=http://httpd.apache.org/docs/2.1/ssl/ssl_faq.html#aboutcerts>Information about certificates</a></div>
   </div>
+  <div class="formRow">
+  <label for="ssl_cert_textarea" style="margin-left: 20px;" class="leftLabelSmall">_(Certificate:)</label>
+  <textarea id="ssl_cert_textarea" rows="5" cols="70"></textarea>
+  </div>
+  <div style="padding-left: 10px;"><a href=http://httpd.apache.org/docs/2.1/ssl/ssl_faq.html#aboutcerts>Information about certificates</a></div>
 </fieldset>
+
 <fieldset class="settings">
   <legend>_(Authentication)</legend>
-  <div style="padding-left: 30px;">
+  <div class="formRow">
-  <table>
+  <label for="webui_username_text" class="leftLabelSmall">_(Username:)</label><input type="text" id="webui_username_text" />
-  <tr>
+  </div>
-  <td style="vertical-align: bottom;">_(Username:)</td><td style="padding-right: 3px;"><input type="text" id="webui_username_text" /></td>
+  <div class="formRow">
-  </tr>
+  <label for="webui_password_text" class="leftLabelSmall">_(Password:)</label><input type="password" id="webui_password_text" />
-  <tr>
-  <td style="vertical-align: bottom;">_(Password:)</td><td style="padding-right: 3px;"><input type="password" id="webui_password_text" /></td>
-  </tr>
-  </table>
-  <input type="checkbox" id="bypass_local_auth_checkbox" />&nbsp;&nbsp;_(Bypass authentication for localhost)
   </div>
+
+  <input type="checkbox" id="bypass_local_auth_checkbox" />
+  <label for="bypass_local_auth_checkbox">_(Bypass authentication for localhost)</label>
 </fieldset>
+
 <fieldset class="settings">
-  <legend><input type="checkbox" id="use_dyndns_checkbox" onclick="updateDynDnsSettings();" />&nbsp;&nbsp;_(Update my dynamic domain name)</legend>
+  <legend><input type="checkbox" id="use_dyndns_checkbox" onclick="updateDynDnsSettings();" />
-  <div style="padding-left: 30px;">
+  <label for="use_dyndns_checkbox">_(Update my dynamic domain name)</label></legend>
   <select id="dyndns_select">
     <option value="0">DynDNS</option>
     <option value="1">NO-IP</option>
   </select>
-  <input type="button" value="_(Register)" onclick="registerDynDns();"/><br/>
+  <input type="button" value="_(Register)" onclick="registerDynDns();"/><br/><br/>
-  <table>
+  <div class="formRow">
-    <tr>
+  <label for="dyndns_domain_text" class="leftLabelSmall">_(Domain name:)</label><input type="text" id="dyndns_domain_text"/>
-      <td style="vertical-align: bottom;">_(Domain name:)</td><td style="padding-right: 3px;"><input type="text" id="dyndns_domain_text" /></td>
+  </div>
-    </tr>
+  <div class="formRow">
-    <tr>
+  <label for="dyndns_username_text" class="leftLabelSmall">_(Username:)</label><input type="text" id="dyndns_username_text"/>
-      <td style="vertical-align: bottom;">_(Username:)</td><td style="padding-right: 3px;"><input type="text" id="dyndns_username_text" /></td>
+  </div>
-    </tr>
+  <div class="formRow">
-    <tr>
+  <label for="dyndns_password_text" class="leftLabelSmall">_(Password:)</label><input type="password" id="dyndns_password_text"/>
-      <td style="vertical-align: bottom;">_(Password:)</td><td style="padding-right: 3px;"><input type="password" id="dyndns_password_text" /></td>
-    </tr>
-  </table>
   </div>
 </fieldset>
 </div>

src/webui/html/upload.html

@@ -12,7 +12,6 @@ function hideAll() {
 </script>
 </head>
 <body>
-<br/>
 <iframe id="upload_frame" name="upload_frame" style="width:1px;height:1px;border:0px;" src="javascript:false;"></iframe>
 <center>
 	<h1 class="vcenter"><img class="vcenter" title="Download local torrent" src="theme/list-add"/>_(Download local torrent)</h1>