mirror
/
transmission
mirror of https://github.com/transmission/transmission
1
0
Fork 0
Code Issues Releases Wiki Activity

(clutch) #1240: inspector's layout is broken

This commit is contained in:
Charles Kerr 2008-08-29 17:57:53 +00:00
parent c7ace2e5ff
commit f8580d440a
3 changed files with 209 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
web/index.html
View File

@ -56,67 +56,116 @@
</div>
<div id="torrent_inspector" style="display:none;">
<ul class="torrent_inspector_tabs">
<li><a href="#info" id="inspector_tab_info" class="inspector_tab selected"><img src="images/buttons/info_general.png" alt="Information"/></a></li>
<li><a href="#activity" id="inspector_tab_activity" class="inspector_tab"><img src="images/buttons/info_activity.png" alt="Activity"/></a></li>
</ul>
<div class="torrent_inspector_header">
<h1 id="torrent_inspector_name">No Selection</h1>
<span id="torrent_inspector_size">0 B</span>
<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 class="torrent_inspector_section" id="inspector_tab_info_container">
<h2>Transfer Information</h2>
<label>Tracker:</label>
<div id="torrent_inspector_tracker">N/A</div>
<label>Hash:</label>
<div id="torrent_inspector_hash">N/A</div>
<label>Secure:</label>
<div id="torrent_inspector_secure">N/A</div>
<label>Comment:</label>
<div id="torrent_inspector_comment">N/A</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">
<strong>Transfer Information</strong>
<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"-->
<h2>Created By</h2>
<label>Creator:</label>
<div id="torrent_inspector_creator">N/A</div>
<label>Date:</label>
<div id="torrent_inspector_creator_date">N/A</div>
</div>
<div class="inspector_group">
<strong>Created By</strong>
<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 class="torrent_inspector_section" style="display:none;" id="inspector_tab_activity_container">
<h2>Activity</h2>
<label>State:</label>
<div id="torrent_inspector_state">N/A</div>
<label>Progress:</label>
<div id="torrent_inspector_progress">N/A</div>
<label>Have:</label>
<div id="torrent_inspector_have">N/A</div>
<label>Downloaded:</label>
<div id="torrent_inspector_downloaded">N/A</div>
<label>Uploaded:</label>
<div id="torrent_inspector_uploaded">N/A</div>
<label>Ratio:</label>
<div id="torrent_inspector_ratio">N/A</div>
<label>Swarm Rate:</label>
<div id="torrent_inspector_swarm_speed">N/A</div>
<label>Error:</label>
<div id="torrent_inspector_error">N/A</div>
<label>DL Speed:</label>
<div id="torrent_inspector_download_speed">N/A</div>
<label>UL Speed:</label>
<div id="torrent_inspector_upload_speed">N/A</div>
<div style="display:none;" class="inspector_container" id="inspector_tab_activity_container">
<div class="inspector_group">
<strong>Activity</strong>
<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"-->
<h2>Peers</h2>
<label>UL To:</label>
<div id="torrent_inspector_upload_to">N/A</div>
<label>DL From:</label>
<div id="torrent_inspector_download_from">N/A</div>
<label>Total Seeders:</label>
<div id="torrent_inspector_total_seeders">N/A</div>
<label>Total Leechers:</label>
<div id="torrent_inspector_total_leechers">N/A</div>
</div>
<div class="inspector_group">
<strong>Peers</strong>
<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">

82
web/javascript/transmission.js
View File

@ -842,19 +842,55 @@ Transmission.prototype =
var total_upload_peers = 0;
var total_upload_speed = 0;
var total_verified = 0;
var na = 'N/A';
switch( torrents.length ) {
case 0: name = 'No Selection'; break;
case 1: name = torrents[0].name(); break;
default: name = torrents.length+' Transfers Selected'; break;
if( torrents.length == 0 )
{
var ti = '#torrent_inspector_';
setInnerHTML( $(ti+'name')[0], 'No Selection' );
setInnerHTML( $(ti+'size')[0], na );
setInnerHTML( $(ti+'tracker')[0], na );
setInnerHTML( $(ti+'hash')[0], na );
setInnerHTML( $(ti+'state')[0], na );
setInnerHTML( $(ti+'download_speed')[0], na );
setInnerHTML( $(ti+'upload_speed')[0], na );
setInnerHTML( $(ti+'uploaded')[0], na );
setInnerHTML( $(ti+'downloaded')[0], na );
setInnerHTML( $(ti+'ratio')[0], na );
setInnerHTML( $(ti+'total_seeders')[0], na );
setInnerHTML( $(ti+'total_leechers')[0], na );
setInnerHTML( $(ti+'swarm_speed')[0], na );
setInnerHTML( $(ti+'have')[0], na );
setInnerHTML( $(ti+'upload_to')[0], na );
setInnerHTML( $(ti+'download_from')[0], na );
setInnerHTML( $(ti+'secure')[0], na );
setInnerHTML( $(ti+'creator_date')[0], na );
setInnerHTML( $(ti+'progress')[0], na );
setInnerHTML( $(ti+'comment')[0], na );
setInnerHTML( $(ti+'creator')[0], na );
setInnerHTML( $(ti+'error')[0], na );
return;
}
name = torrents.length == 1
? torrents[0].name()
: torrents.length+' Transfers Selected';
if( torrents.length == 1 )
{
var t = torrents[0];
error = t._error_message ? t._error_message : '';
comment = t._comment ? t._comment : '';
creator = t._creator ? t._creator : '';
if( t._error_message )
{
error = t._error_message ;
}
if( t._comment)
{
comment = t._comment ;
}
if( t._creator )
{
creator = t._creator ;
}
hash = t.hash();
date_created = Math.formatTimestamp( t._creator_date );
}
@ -897,27 +933,27 @@ Transmission.prototype =
var ti = '#torrent_inspector_';
$(ti+'name')[0].innerHTML = name;
$(ti+'size')[0].innerHTML = Math.formatBytes( total_size );
$(ti+'size')[0].innerHTML = torrents.length ? Math.formatBytes( total_size ) : 'N/A';
$(ti+'tracker')[0].innerHTML = total_tracker;
$(ti+'hash')[0].innerHTML = hash;
$(ti+'state')[0].innerHTML = total_state;
$(ti+'download_speed')[0].innerHTML = Math.formatBytes( total_download_speed ) + '/s';
$(ti+'upload_speed')[0].innerHTML = Math.formatBytes( total_upload_speed ) + '/s';
$(ti+'uploaded')[0].innerHTML = Math.formatBytes( total_upload );
$(ti+'downloaded')[0].innerHTML = Math.formatBytes( total_download );
$(ti+'ratio')[0].innerHTML = Math.ratio( total_upload, total_download );
$(ti+'total_seeders')[0].innerHTML = total_seeders;
$(ti+'total_leechers')[0].innerHTML = total_leechers;
$(ti+'swarm_speed')[0].innerHTML = Math.formatBytes(total_swarm_speed) + '/s';
$(ti+'have')[0].innerHTML = Math.formatBytes(total_completed) + ' (' + Math.formatBytes(total_verified) + ' verified)';
$(ti+'upload_to')[0].innerHTML = total_upload_peers;
$(ti+'download_from')[0].innerHTML = total_download_peers;
$(ti+'download_speed')[0].innerHTML = torrents.length ? Math.formatBytes( total_download_speed ) + '/s' : 'N/A';
$(ti+'upload_speed')[0].innerHTML = torrents.length ? Math.formatBytes( total_upload_speed ) + '/s' : 'N/A';
$(ti+'uploaded')[0].innerHTML = torrents.length ? Math.formatBytes( total_upload ) : 'N/A';
$(ti+'downloaded')[0].innerHTML = torrents.length ? Math.formatBytes( total_download ) : 'N/A';
$(ti+'ratio')[0].innerHTML = torrents.length ? Math.ratio( total_upload, total_download ) : 'N/A';
$(ti+'total_seeders')[0].innerHTML = torrents.length ? total_seeders : 'N/A';
$(ti+'total_leechers')[0].innerHTML = torrents.length ? total_leechers : 'N/A';
$(ti+'swarm_speed')[0].innerHTML = torrents.length ? Math.formatBytes(total_swarm_speed) + '/s' : 'N/A';
$(ti+'have')[0].innerHTML = torrents.length ? Math.formatBytes(total_completed) + ' (' + Math.formatBytes(total_verified) + ' verified)' : 'N/A';
$(ti+'upload_to')[0].innerHTML = torrents.length ? total_upload_peers : 'N/A';
$(ti+'download_from')[0].innerHTML = torrents.length ? total_download_peers : 'N/A';
$(ti+'secure')[0].innerHTML = private_string;
$(ti+'creator_date')[0].innerHTML = date_created;
$(ti+'progress')[0].innerHTML = Math.ratio( sizeDone*100, sizeWhenDone ) + '%';
$(ti+'comment')[0].innerHTML = comment ;
$(ti+'creator')[0].innerHTML = creator ;
$(ti+'error')[0].innerHTML = error ;
$(ti+'progress')[0].innerHTML = torrents.length ? Math.ratio( sizeDone*100, sizeWhenDone ) + '%' : 'N/A';
$(ti+'comment')[0].innerHTML = comment;
$(ti+'creator')[0].innerHTML = creator;
$(ti+'error')[0].innerHTML = error;
},
/*

110
web/stylesheets/common.css
View File

@ -45,7 +45,7 @@ div.torrent_global_menu {
left: 0;
right: 0;
top: 0;
border-bottom: 1px solid #444;
border-bottom: 1px solid #888;
z-index: 3;
overflow: hidden;
-moz-user-select: none;
@ -192,7 +192,7 @@ div.torrent_global_details {
background: #ddd url('../images/graphics/filter_bar.png') repeat-x left -51px;
font-size: 1.1em;
font-weight: normal;
border-bottom: 1px solid #777;
border-bottom: 1px solid #888;
position: fixed;
left: 0;
right: 0;
@ -236,7 +236,7 @@ div#torrent_filter_bar {
margin: 0;
height: 24px;
background: #ddd url('../images/graphics/filter_bar.png') repeat-x bottom left;
border-bottom: 1px solid #777;
border-bottom: 1px solid #888;
position: fixed;
left: 0;
right: 0px;
@ -486,101 +486,81 @@ li.torrent a:active div.torrent_resume {
div#torrent_inspector {
position: fixed;
top: 97px;
right: 0px;
bottom: 22px;
right: 0px;
width: 350px;
background-color: #ddd;
border-left: #888 1px solid;
border-left: 1px solid #888;
z-index: 2;
text-align: left;
font-size: 1.1em;
}
div#torrent_inspector h1#torrent_inspector_name {
div#torrent_inspector #torrent_inspector_name {
font-size: 1.3em;
margin: 0;
word-wrap: break-word;
overflow: hidden;
}
div#torrent_inspector span#torrent_inspector_size {
div#torrent_inspector #torrent_inspector_size {
font-size: 1.2em;
margin: 3;
display: block;
padding-top: 2px;
}
div.torrent_inspector_header {
padding: 5px 10px 0;
}
div#torrent_inspector ul.torrent_inspector_tabs {
margin: 0 0 0 113px; /* Center tabs */
padding: 0;
display: block;
width: 100%;
}
/* Force anything after the menu to display on a new line -
looks like overkill, maybe an easier way to do this */
div#torrent_inspector ul.torrent_inspector_tabs:after {
content: ".";
display: block;
height: 0;
font-size: 0;
div#inspector_header {
clear: both;
visibility: hidden;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
div#torrent_inspector ul.torrent_inspector_tabs li {
div#inspector_tabs {
margin: 0 auto;
padding-top: 10px;
width: 140px;
}
.inspector_tab {
float: left;
list-style-type: none;
}
div#torrent_inspector ul.torrent_inspector_tabs li a {
display: block;
margin: 10px -1px 3px 0; /* Collapse horizontal borders */
padding: 4px;
background: transparent url('../images/buttons/tab_backgrounds.png') left top repeat-x;
border-left: 1px solid #787878;
border-right: 1px solid #787878;
width: 50px;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #323232;
background: transparent url('../images/buttons/tab_backgrounds.png') left -1px repeat-x;
border: 1px solid #888;
margin: 0px 1px;
padding: 3px 15px; /* 3px == ((bg image height - fg image height) / 2) */
cursor: pointer;
}
div#torrent_inspector ul.torrent_inspector_tabs li a.selected {
background-position: left bottom;
#inspector_tabs > .selected {
background-position: left -26px;
}
div#torrent_inspector div.torrent_inspector_section h2 {
border-top: 1px solid #aaa;
font-size: 1.1em;
margin: 5px 0 0;
padding: 5px 5px 5px;
.inspector_container {
padding-top: 10px;
padding-bottom: 5px;
margin: 5px 10px;
}
div.torrent_inspector_section {
padding: 5px;
.inspector_group {
border-top: 1px solid #888;
margin: 8px 0px;
padding: 8px 0px;
}
div#torrent_inspector div.torrent_inspector_section label {
margin-left: 15px;
width: 90px;
display: block;
float: left;
.inspector_group_label {
font-weight: bold;
}
div#torrent_inspector div.torrent_inspector_section div {
height: 17px;
width: 215px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
.inspector_row {
display: table-row;
}
.inspector_row > .inspector_label {
display: table-cell;
padding-left: 10px;
}
.inspector_row > div {
padding-top: 10px;
padding-left: 10px;
word-wrap: break-word;
}
/*--------------------------------------