mirror/transmission
1
0
Fork 0
mirror of https://github.com/transmission/transmission synced 2025-03-13 15:39:01 +00:00
Code Issues Releases Wiki Activity

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

Browse source
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>
<div id="torrent_inspector" style="display:none;"> <div id="torrent_inspector" style="display:none;">
<ul class="torrent_inspector_tabs"> <div id="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> <div class="inspector_tab selected" id="inspector_tab_info"><a href="#info"><img src="images/buttons/info_general.png" alt="Information"/></a></div>
<li><a href="#activity" id="inspector_tab_activity" class="inspector_tab"><img src="images/buttons/info_activity.png" alt="Activity"/></a></li> <div class="inspector_tab" id="inspector_tab_activity"><a href="#activity"><img src="images/buttons/info_activity.png" alt="Activity"/></a></div>
</ul>
<div class="torrent_inspector_header">
<h1 id="torrent_inspector_name">No Selection</h1>
<span id="torrent_inspector_size">0 B</span>
</div> </div>
<div class="torrent_inspector_section" id="inspector_tab_info_container"> <div id="inspector_header">
<h2>Transfer Information</h2> <h1 id="torrent_inspector_name"></h1>
<label>Tracker:</label> <span id="torrent_inspector_size"></span>
<div id="torrent_inspector_tracker">N/A</div> </div>
<label>Hash:</label>
<div id="torrent_inspector_hash">N/A</div> <div class="inspector_container" id="inspector_tab_info_container">
<label>Secure:</label> <div class="inspector_group">
<div id="torrent_inspector_secure">N/A</div> <strong>Transfer Information</strong>
<label>Comment:</label> <div class="inspector_row">
<div id="torrent_inspector_comment">N/A</div> <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> <div class="inspector_group">
<label>Creator:</label> <strong>Created By</strong>
<div id="torrent_inspector_creator">N/A</div> <div class="inspector_row">
<label>Date:</label> <div class="inspector_label">Creator:</div>
<div id="torrent_inspector_creator_date">N/A</div> <div id="torrent_inspector_creator">N/A</div>
</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"> <div style="display:none;" class="inspector_container" id="inspector_tab_activity_container">
<h2>Activity</h2>
<label>State:</label> <div class="inspector_group">
<div id="torrent_inspector_state">N/A</div> <strong>Activity</strong>
<label>Progress:</label> <div class="inspector_row">
<div id="torrent_inspector_progress">N/A</div> <div class="inspector_label">State:</div>
<label>Have:</label> <div id="torrent_inspector_state">N/A</div>
<div id="torrent_inspector_have">N/A</div> </div>
<label>Downloaded:</label> <div class="inspector_row">
<div id="torrent_inspector_downloaded">N/A</div> <div class="inspector_label">Progress:</div>
<label>Uploaded:</label> <div id="torrent_inspector_progress">N/A</div>
<div id="torrent_inspector_uploaded">N/A</div> </div>
<label>Ratio:</label> <div class="inspector_row">
<div id="torrent_inspector_ratio">N/A</div> <div class="inspector_label">Have:</div>
<label>Swarm Rate:</label> <div id="torrent_inspector_have">N/A</div>
<div id="torrent_inspector_swarm_speed">N/A</div> </div>
<label>Error:</label> <div class="inspector_row">
<div id="torrent_inspector_error">N/A</div> <div class="inspector_label">Downloaded:</div>
<label>DL Speed:</label> <div id="torrent_inspector_downloaded">N/A</div>
<div id="torrent_inspector_download_speed">N/A</div> </div>
<label>UL Speed:</label> <div class="inspector_row">
<div id="torrent_inspector_upload_speed">N/A</div> <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> <div class="inspector_group">
<label>UL To:</label> <strong>Peers</strong>
<div id="torrent_inspector_upload_to">N/A</div> <div class="inspector_row">
<label>DL From:</label> <div class="inspector_label">UL To:</div>
<div id="torrent_inspector_download_from">N/A</div> <div id="torrent_inspector_upload_to">N/A</div>
<label>Total Seeders:</label> </div>
<div id="torrent_inspector_total_seeders">N/A</div> <div class="inspector_row">
<label>Total Leechers:</label> <div class="inspector_label">DL From:</div>
<div id="torrent_inspector_total_leechers">N/A</div> <div id="torrent_inspector_download_from">N/A</div>
</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>
<div id="torrent_container"> <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_peers = 0;
var total_upload_speed = 0; var total_upload_speed = 0;
var total_verified = 0; var total_verified = 0;
var na = 'N/A';
switch( torrents.length ) { if( torrents.length == 0 )
case 0: name = 'No Selection'; break; {
case 1: name = torrents[0].name(); break; var ti = '#torrent_inspector_';
default: name = torrents.length+' Transfers Selected'; break; 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 ) if( torrents.length == 1 )
{ {
var t = torrents[0]; var t = torrents[0];
error = t._error_message ? t._error_message : ''; if( t._error_message )
comment = t._comment ? t._comment : ''; {
creator = t._creator ? t._creator : ''; error = t._error_message ;
}
if( t._comment)
{
comment = t._comment ;
}
if( t._creator )
{
creator = t._creator ;
}
hash = t.hash(); hash = t.hash();
date_created = Math.formatTimestamp( t._creator_date ); date_created = Math.formatTimestamp( t._creator_date );
} }
@ -897,27 +933,27 @@ Transmission.prototype =
var ti = '#torrent_inspector_'; var ti = '#torrent_inspector_';
$(ti+'name')[0].innerHTML = name; $(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+'tracker')[0].innerHTML = total_tracker;
$(ti+'hash')[0].innerHTML = hash; $(ti+'hash')[0].innerHTML = hash;
$(ti+'state')[0].innerHTML = total_state; $(ti+'state')[0].innerHTML = total_state;
$(ti+'download_speed')[0].innerHTML = Math.formatBytes( total_download_speed ) + '/s'; $(ti+'download_speed')[0].innerHTML = torrents.length ? Math.formatBytes( total_download_speed ) + '/s' : 'N/A';
$(ti+'upload_speed')[0].innerHTML = Math.formatBytes( total_upload_speed ) + '/s'; $(ti+'upload_speed')[0].innerHTML = torrents.length ? Math.formatBytes( total_upload_speed ) + '/s' : 'N/A';
$(ti+'uploaded')[0].innerHTML = Math.formatBytes( total_upload ); $(ti+'uploaded')[0].innerHTML = torrents.length ? Math.formatBytes( total_upload ) : 'N/A';
$(ti+'downloaded')[0].innerHTML = Math.formatBytes( total_download ); $(ti+'downloaded')[0].innerHTML = torrents.length ? Math.formatBytes( total_download ) : 'N/A';
$(ti+'ratio')[0].innerHTML = Math.ratio( total_upload, total_download ); $(ti+'ratio')[0].innerHTML = torrents.length ? Math.ratio( total_upload, total_download ) : 'N/A';
$(ti+'total_seeders')[0].innerHTML = total_seeders; $(ti+'total_seeders')[0].innerHTML = torrents.length ? total_seeders : 'N/A';
$(ti+'total_leechers')[0].innerHTML = total_leechers; $(ti+'total_leechers')[0].innerHTML = torrents.length ? total_leechers : 'N/A';
$(ti+'swarm_speed')[0].innerHTML = Math.formatBytes(total_swarm_speed) + '/s'; $(ti+'swarm_speed')[0].innerHTML = torrents.length ? Math.formatBytes(total_swarm_speed) + '/s' : 'N/A';
$(ti+'have')[0].innerHTML = Math.formatBytes(total_completed) + ' (' + Math.formatBytes(total_verified) + ' verified)'; $(ti+'have')[0].innerHTML = torrents.length ? Math.formatBytes(total_completed) + ' (' + Math.formatBytes(total_verified) + ' verified)' : 'N/A';
$(ti+'upload_to')[0].innerHTML = total_upload_peers; $(ti+'upload_to')[0].innerHTML = torrents.length ? total_upload_peers : 'N/A';
$(ti+'download_from')[0].innerHTML = total_download_peers; $(ti+'download_from')[0].innerHTML = torrents.length ? total_download_peers : 'N/A';
$(ti+'secure')[0].innerHTML = private_string; $(ti+'secure')[0].innerHTML = private_string;
$(ti+'creator_date')[0].innerHTML = date_created; $(ti+'creator_date')[0].innerHTML = date_created;
$(ti+'progress')[0].innerHTML = Math.ratio( sizeDone*100, sizeWhenDone ) + '%'; $(ti+'progress')[0].innerHTML = torrents.length ? Math.ratio( sizeDone*100, sizeWhenDone ) + '%' : 'N/A';
$(ti+'comment')[0].innerHTML = comment ; $(ti+'comment')[0].innerHTML = comment;
$(ti+'creator')[0].innerHTML = creator ; $(ti+'creator')[0].innerHTML = creator;
$(ti+'error')[0].innerHTML = error ; $(ti+'error')[0].innerHTML = error;
}, },
/* /*

110
web/stylesheets/common.css
View file

@ -45,7 +45,7 @@ div.torrent_global_menu {
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
border-bottom: 1px solid #444; border-bottom: 1px solid #888;
z-index: 3; z-index: 3;
overflow: hidden; overflow: hidden;
-moz-user-select: none; -moz-user-select: none;
@ -192,7 +192,7 @@ div.torrent_global_details {
background: #ddd url('../images/graphics/filter_bar.png') repeat-x left -51px; background: #ddd url('../images/graphics/filter_bar.png') repeat-x left -51px;
font-size: 1.1em; font-size: 1.1em;
font-weight: normal; font-weight: normal;
border-bottom: 1px solid #777; border-bottom: 1px solid #888;
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -236,7 +236,7 @@ div#torrent_filter_bar {
margin: 0; margin: 0;
height: 24px; height: 24px;
background: #ddd url('../images/graphics/filter_bar.png') repeat-x bottom left; background: #ddd url('../images/graphics/filter_bar.png') repeat-x bottom left;
border-bottom: 1px solid #777; border-bottom: 1px solid #888;
position: fixed; position: fixed;
left: 0; left: 0;
right: 0px; right: 0px;
@ -486,101 +486,81 @@ li.torrent a:active div.torrent_resume {
div#torrent_inspector { div#torrent_inspector {
position: fixed; position: fixed;
top: 97px; top: 97px;
right: 0px;
bottom: 22px; bottom: 22px;
right: 0px;
width: 350px; width: 350px;
background-color: #ddd; background-color: #ddd;
border-left: #888 1px solid; border-left: 1px solid #888;
z-index: 2; z-index: 2;
text-align: left; text-align: left;
font-size: 1.1em;
} }
div#torrent_inspector h1#torrent_inspector_name { div#torrent_inspector #torrent_inspector_name {
font-size: 1.3em; font-size: 1.3em;
margin: 0; margin: 0;
word-wrap: break-word; word-wrap: break-word;
overflow: hidden; overflow: hidden;
} }
div#torrent_inspector span#torrent_inspector_size { div#torrent_inspector #torrent_inspector_size {
font-size: 1.2em; font-size: 1.2em;
margin: 3; margin: 3;
display: block; display: block;
padding-top: 2px; padding-top: 2px;
} }
div.torrent_inspector_header { div#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;
clear: both; 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; float: left;
list-style-type: none; background: transparent url('../images/buttons/tab_backgrounds.png') left -1px repeat-x;
} border: 1px solid #888;
margin: 0px 1px;
div#torrent_inspector ul.torrent_inspector_tabs li a { padding: 3px 15px; /* 3px == ((bg image height - fg image height) / 2) */
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;
cursor: pointer; cursor: pointer;
} }
div#torrent_inspector ul.torrent_inspector_tabs li a.selected { #inspector_tabs > .selected {
background-position: left bottom; background-position: left -26px;
} }
div#torrent_inspector div.torrent_inspector_section h2 { .inspector_container {
border-top: 1px solid #aaa; padding-top: 10px;
font-size: 1.1em; padding-bottom: 5px;
margin: 5px 0 0; margin: 5px 10px;
padding: 5px 5px 5px;
} }
div.torrent_inspector_section { .inspector_group {
padding: 5px; border-top: 1px solid #888;
margin: 8px 0px;
padding: 8px 0px;
} }
div#torrent_inspector div.torrent_inspector_section label { .inspector_group_label {
margin-left: 15px; font-weight: bold;
width: 90px;
display: block;
float: left;
} }
.inspector_row {
div#torrent_inspector div.torrent_inspector_section div { display: table-row;
height: 17px; }
width: 215px; .inspector_row > .inspector_label {
overflow: hidden; display: table-cell;
white-space: nowrap; padding-left: 10px;
text-overflow: ellipsis; }
-o-text-overflow: ellipsis; .inspector_row > div {
padding-top: 10px;
padding-left: 10px;
word-wrap: break-word;
} }
/*-------------------------------------- /*--------------------------------------