Opened 13 years ago

Closed 13 years ago

Last modified 13 years ago

#1811 closed Enhancement (fixed)

Validation XHTML of Web Interface

Reported by: hiro Owned by: Gimp
Priority: Low Milestone: 1.51
Component: Web Client Version: 1.50
Severity: Minor Keywords: xhtml, validation, web.
Cc:

Description

Code of index.html is not valid for http://validator.w3.org/ They are somes errors to pass.

The Search Field can be rewrite like this : <input type="text" id="torrent_search" name="Filter"/> But I don't know the result... (search function always)

The torrent list view can be rewrite, if you add an <li> in <ul>.

The preference form can be rewrite, if you add an empty parametre : action=""

Attachments (2)

index.html (14.9 KB) - added by hiro 13 years ago.
Valid index.html code
index.2.html (15.2 KB) - added by godsyn 13 years ago.
xhtml 1.0 trans compliant index.html

Download all attachments as: .zip

Change History (19)

Changed 13 years ago by hiro

Valid index.html code

comment:1 Changed 13 years ago by hiro

  • Priority changed from Normal to Low

comment:2 Changed 13 years ago by hiro

  • Milestone changed from 1.50 to None Set

comment:3 Changed 13 years ago by duncanbeevers

  • Resolution set to wontfix
  • Status changed from new to closed

comment:4 Changed 13 years ago by duncanbeevers

Perhaps we should change the doctype to reflect the elements used.

comment:5 in reply to: ↑ description Changed 13 years ago by godsyn

  • Milestone None Set deleted
  • Resolution wontfix deleted
  • Severity changed from Normal to Minor
  • Status changed from closed to reopened
  • Version changed from 1.42+ to 1.50+

I've provided a fix for the latest nightly. Note: I've added extra separators around the "delete w/files" options to prevent accidental clicking.

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Transmission Web Interface</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="Private" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <link href="./images/favicon.ico" rel="icon" /> <link href="./images/favicon.png" rel="shortcut icon" /> <link rel="apple-touch-icon" href="./images/webclip-icon.png"/> <script type="text/javascript" src="./javascript/jquery/jquery.min.js"></script> <link media="only screen and (max-device-width: 480px)" href="./stylesheets/iphone.css" type= "text/css" rel="stylesheet" /> <link media="screen and (min-device-width: 481px)" href="./stylesheets/common.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="./javascript/jquery/jquery.transmenu.min.js"></script> <script type="text/javascript" src="./javascript/jquery/jquery.contextmenu.min.js"></script> <script type="text/javascript" src="./javascript/menu.js"></script> <script type="text/javascript" src="./javascript/jquery/jquery.dimensions.min.js"></script> <script type="text/javascript" src="./javascript/jquery/jquery.form.min.js"></script> <script type="text/javascript" src="./javascript/jquery/json.min.js"></script> <script type="text/javascript" src="./javascript/common.js"></script> <script type="text/javascript" src="./javascript/transmission.remote.js"></script> <script type="text/javascript" src="./javascript/transmission.js"></script> <script type="text/javascript" src="./javascript/torrent.js"></script> <script type="text/javascript" src="./javascript/dialog.js"></script>

</head> <body id="transmission_body">

<div class="torrent_global_menu">

<ul>

<li id="open"><div id="open_link"><div class="toolbar_image"></div>Open</div></li> <li id="remove" class="disabled"><div id="remove_link"><div class="toolbar_image"></div>Remove</div></li> <li class="divider">&nbsp;</li> <li id="removedata" class="disabled"><div id="removedata_link"><div class="toolbar_image"></div>Remove Data</div></li> <li class="divider">&nbsp;</li> <li id="pause_selected" class="disabled"><div id="pause_selected_link"><div class="toolbar_image"></div>Pause</div></li> <li id="resume_selected" class="disabled"><div id="resume_selected_link"><div class="toolbar_image"></div>Resume</div></li> <li class="divider">&nbsp;</li> <li id="pause_all" class="disabled"><div id="pause_all_link"><div class="toolbar_image"></div>Pause All</div></li> <li id="resume_all" class="disabled"><div id="resume_all_link"><div class="toolbar_image"></div>Resume All</div></li> <li id="inspector"><div id="inspector_link"><div class="toolbar_image"></div>Inspector</div></li> <li id="filter"><div id="filter_toggle_link"><div class="toolbar_image"></div>Filter</div></li>

</ul>

</div>

<div class="torrent_global_details">

<div id="torrent_global_transfer">0 Transfers</div> <div id="torrent_global_upload">0 B/s</div> <div id="torrent_global_download">0 B/s</div>

</div>

<div id="torrent_filter_bar">

<ul>

<li><a href="#all" id="filter_all_link" class="active">All</a></li> <li><a href="#downloading" id="filter_downloading_link">Downloading</a></li> <li><a href="#seeding" id="filter_seeding_link">Seeding</a></li> <li><a href="#paused" id="filter_paused_link">Paused</a></li>

</ul> <input type="text" id="torrent_search" name="Filter"/>

</div> <div id="torrent_inspector" style="display:none;">

<div id="inspector_tabs">

<div class="inspector_tab selected" id="inspector_tab_info"><a href="#info"><img src="images/buttons/info_general.png" alt="Information"/></a></div> <div class="inspector_tab" id="inspector_tab_activity"><a href="#activity"><img src="images/buttons/info_activity.png" alt="Activity"/></a></div>

</div>

<div id="inspector_header">

<h1 id="torrent_inspector_name"></h1> <span id="torrent_inspector_size"></span>

</div>

<div class="inspector_container" id="inspector_tab_info_container">

<div class="inspector_group">

<div class="inspector_group_label">Information</div> <div class="inspector_row">

<div class="inspector_label">Tracker:</div> <div id="torrent_inspector_tracker"></div>

</div> <div class="inspector_row">

<div class="inspector_label">Hash:</div> <div id="torrent_inspector_hash"></div>

</div> <div class="inspector_row">

<div class="inspector_label">Secure:</div> <div id="torrent_inspector_secure"></div>

</div> <div class="inspector_row">

<div class="inspector_label">Comment:</div> <div id="torrent_inspector_comment"></div>

</div>

</div><!-- class="inspector_group"-->

<div class="inspector_group">

<div class="inspector_group_label">Created By</div> <div class="inspector_row">

<div class="inspector_label">Creator:</div> <div id="torrent_inspector_creator">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">Date:</div> <div id="torrent_inspector_creator_date">N/A</div>

</div>

</div><!-- class="inspector_group"-->

</div><!-- id="inspector_tab_info_container" -->

<div style="display:none;" class="inspector_container" id="inspector_tab_activity_container">

<div class="inspector_group">

<div class="inspector_group_label">Activity</div> <div class="inspector_row">

<div class="inspector_label">State:</div> <div id="torrent_inspector_state">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">Progress:</div> <div id="torrent_inspector_progress">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">Have:</div> <div id="torrent_inspector_have">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">Downloaded:</div> <div id="torrent_inspector_downloaded">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">Uploaded:</div> <div id="torrent_inspector_uploaded">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">Ratio:</div> <div id="torrent_inspector_ratio">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">Swarm Rate:</div> <div id="torrent_inspector_swarm_speed">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">Error:</div> <div id="torrent_inspector_error">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">DL Speed:</div> <div id="torrent_inspector_download_speed">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">UL Speed:</div> <div id="torrent_inspector_upload_speed">N/A</div>

</div>

</div><!-- class="inspector_group"-->

<div class="inspector_group">

<div class="inspector_group_label">Peers</div> <div class="inspector_row">

<div class="inspector_label">UL To:</div> <div id="torrent_inspector_upload_to">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">DL From:</div> <div id="torrent_inspector_download_from">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">Total Seeders:</div> <div id="torrent_inspector_total_seeders">N/A</div>

</div> <div class="inspector_row">

<div class="inspector_label">Total Leechers:</div> <div id="torrent_inspector_total_leechers">N/A</div>

</div>

</div><!-- class="inspector_group"-->

</div><!-- id="inspector_tab_activity_container" -->

</div>

<div id="torrent_container">

<ul class="torrent_list" id="torrent_list"><li></li></ul>

</div>

<div class="dialog_container" id="dialog_container" style="display:none;">

<div class="dialog_top_bar"></div> <div class="dialog_window">

<img src="images/graphics/logo.png" alt="Transmission Logo" /> <h2 class="dialog_heading" id="dialog_heading"></h2> <div class="dialog_message" id="dialog_message"></div> <a href="#confirm" id="dialog_confirm_button">Confirm</a> <a href="#cancel" id="dialog_cancel_button">Cancel</a>

</div> </div>

<div class="dialog_container" id="prefs_container" style="display:none;">

<div class="dialog_top_bar"></div> <div class="dialog_window">

<h2 class="dialog_heading">Preferences</h2> <div id="pref_error"></div> <form action="" id="prefs_form">

<div class="preference download_location">

<label class="category">Add transfers:</label> <div class="formdiv">

<label for="download_location" class="item">Download to:</label> <input type="text" name="download_location" id="download_location"/>

</div> <div class="formdiv checkbox auto_start">

<input type="checkbox" name="auto_start" id="auto_start"/> <label for="auto_start" class="item">Start transfers when added</label>

</div>

</div> <div class="preference port">

<label class="category">Network:</label> <div class="formdiv">

<label for="port" class="item">Incoming TCP Port:</label> <input type="text" id="port" name="port"/>

</div>

</div> <div class="preference encryption">

<label class="category">Encryption:</label> <div class="formdiv checkbox">

<input type="checkbox" name="encryption" id="encryption"/> <label for="encryption" class="item">Ignore unencrypted peers</label>

</div>

</div> <div class="preference limit_total">

<label class="category">Limit total bandwidth:</label> <div class="formdiv checkbox">

<input type="checkbox" name="limit_download" id="limit_download"/> <label for="limit_download" class="item">Download Rate:</label> <input type="text" name="download_rate" id="download_rate"/> <label class="suffix">KB/s</label>

</div> <div class="formdiv checkbox">

<input type="checkbox" name="limit_upload" id="limit_upload"/> <label for="limit_upload" class="item">Upload Rate:</label> <input type="text" name="upload_rate" id="upload_rate"/> <label class="suffix">KB/s</label>

</div>

</div> <div class="preference web_gui">

<label class="category">Web Client:</label> <div class="formdiv">

<label for="refresh_rate" class="item">Refresh Rate:</label> <input type="text" name="refresh_rate" id="refresh_rate"/> <label class="suffix">seconds</label>

</div>

</div> <a href="#save" id="prefs_save_button">Save</a> <a href="#cancel" id="prefs_cancel_button">Cancel</a>

</form>

</div>

</div>

<div class="dialog_container" id="upload_container" style="display:none;">

<div class="dialog_top_bar"></div> <div class="dialog_window">

<img src="images/graphics/logo.png" alt="Transmission Logo" /> <h2 class="dialog_heading">Upload Torrent Files</h2> <form action="#" method="post" id="torrent_upload_form"

enctype="multipart/form-data" target="torrent_upload_frame"> <div class="dialog_message">

<label for="torrent_upload_file">Please select a torrent file to upload:</label>

<input type="file" name="torrent_file" id="torrent_upload_file"/>

<label for="torrent_upload_url">Or enter a URL:</label>

<input type="text" id="torrent_upload_url"/>

</div> <a href="#upload" id="upload_confirm_button">Upload</a> <a href="#cancel" id="upload_cancel_button">Cancel</a>

</form>

</div>

</div> <div class="torrent_footer">

<div id="disk_space_container"></div> <ul id="settings_menu">

<li id="button">&nbsp;

<ul id="footer_super_menu">

<li id="preferences">Preferences</li> <li class="separator"></li> <li>Total Download Rate

<ul id="footer_download_rate_menu">

<li id="unlimited_download_rate">Unlimited</li> <li id="limited_download_rate">Limit (10 KB/s)</li> <li class="separator"></li> <li>5 KB/s</li> <li>10 KB/s</li> <li>20 KB/s</li> <li>30 KB/s</li> <li>40 KB/s</li> <li>50 KB/s</li> <li>75 KB/s</li> <li>100 KB/s</li> <li>150 KB/s</li> <li>200 KB/s</li> <li>250 KB/s</li> <li>500 KB/s</li> <li>750 KB/s</li>

</ul>

</li> <li>Total Upload Rate

<ul id="footer_upload_rate_menu">

<li id="unlimited_upload_rate">Unlimited</li> <li id="limited_upload_rate">Limit (10 KB/s)</li> <li class="separator"></li> <li>5 KB/s</li> <li>10 KB/s</li> <li>20 KB/s</li> <li>30 KB/s</li> <li>40 KB/s</li> <li>50 KB/s</li> <li>75 KB/s</li> <li>100 KB/s</li> <li>150 KB/s</li> <li>200 KB/s</li> <li>250 KB/s</li> <li>500 KB/s</li> <li>750 KB/s</li>

</ul>

</li> <li class="separator"></li> <li>Sort Transfers By

<ul id="footer_sort_menu">

<li id="sort_by_activity">Activity</li> <li id="sort_by_age">Age</li> <li id="sort_by_name">Name</li> <li id="sort_by_percent_completed">Progress</li> <li id="sort_by_queue_order">Queue Order</li> <li id="sort_by_state">State</li> <li id="sort_by_tracker">Tracker</li> <li class="separator"></li> <li id="reverse_sort_order">Reverse Sort Order</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

<div id="unsupported_browser" style="display:none;">

<div class="dialog_window">

<img class="logo" src="images/graphics/logo.png" alt="Transmission Logo" /> <h2>Sorry, your browser is not supported.</h2> <p>We currently support the following browsers:</p> <a href="http://www.mozilla.com/en-US/firefox/" title="Firefox"><img src="images/graphics/browser_firefox.gif" alt="Firefox" /></a> <a href="http://www.apple.com/safari/" title="Safari"><img src="images/graphics/browser_safari.gif" alt="Safari" /></a> <a href="http://www.opera.com/download/" title="Opera"><img src="images/graphics/browser_opera.gif" alt="Opera" /></a>

</div>

</div>

<div class="contextMenu" id="torrent_context_menu">

<ul>

<li id="context_pause_selected" class="disabled context_pause_selected">Pause Selected</li> <li id="context_resume_selected" class="disabled context_resume_selected">Resume Selected</li> <li id="context_remove">Remove From List...</li> <li class="separator"></li> <li id="context_removedata">Delete Data And Remove From List...</li> <li class="separator"></li> <li id="context_toggle_inspector">Show Inspector</li> <li class="separator"></li> <li id="context_select_all" class="context_select_all">Select All</li> <li id="context_deselect_all" class="context_deselect_all">Deselect All</li>

</ul>

</div>

<iframe name="torrent_upload_frame" id="torrent_upload_frame" src="about:blank" />

</body>

</html>

comment:6 Changed 13 years ago by charles

godsyn: why not attach that as a patch?

Changed 13 years ago by godsyn

xhtml 1.0 trans compliant index.html

comment:7 Changed 13 years ago by godsyn

because I'm a noob. Sorry. Done.

comment:8 Changed 13 years ago by charles

Does the search/filter work in this patch?

The OP said "The Search Field can be rewrite like this (snip) But I don't know the result..."

comment:9 Changed 13 years ago by godsyn

works fine here. Tested on firefox and chrome.

comment:10 Changed 13 years ago by charles

  • Milestone set to 1.51
  • Version changed from 1.50+ to 1.50

comment:11 Changed 13 years ago by charles

  • Resolution set to fixed
  • Status changed from reopened to closed

Committed to 1.5x branch in r7915.

Committed to trunk in r7916.

comment:12 Changed 13 years ago by livings124

  • Resolution fixed deleted
  • Status changed from closed to reopened

Having the filter field be of type "search" was intentional to get the "search filter" look on Safari.

comment:13 Changed 13 years ago by godsyn

This is not standards compliant, and using it is no better than using activeX or marquee (IE and netscape, respectivly). Could this not be achieved via CSS?

comment:14 Changed 13 years ago by livings124

It is supported by Safari and mobile Safari (and any webkit-based browser I would assume). And it is my understanding that it will revert to a standard text field if not supported. No reason to take it out.

comment:15 Changed 13 years ago by charles

<input type="search"> seems to degrade cleanly in both Firefox and Chrome. Also, the Chrome team intends to support this tag at some point.

It would be nice to do this in a standards-compliant way, but the search tag doesn't seem to do any harm except for making the validator unhappy.

comment:16 Changed 13 years ago by charles

  • Resolution set to fixed
  • Status changed from reopened to closed

reinserted input type="search"

1.5x: r7919

trunk: r7920

comment:17 Changed 13 years ago by godsyn

Did some research, and it can be achieved via CSS. All you need is "-webkit-appearance: searchfield;". Adding that line to the CSS should allow the HTML to conform to standards, and allow you to keep your appearance as you prefer.

I believe this is developing into an argument of standards vs. design that has been ongoing since the design of html. I bow out so that you may apply your attention to other, more important, matters.

Note: See TracTickets for help on using tickets.