Changeset 6755


Ignore:
Timestamp:
Sep 16, 2008, 4:43:19 PM (13 years ago)
Author:
charles
Message:

(clutch 1.3x) backport #1240 (r6662 r6663): "inspector's layout is broken on firefox"

Location:
branches/1.3x/web
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • branches/1.3x/web/index.html

    r6542 r6755  
    5757                <div id="torrent_inspector" style="display:none;">
    5858                       
    59                         <ul class="torrent_inspector_tabs">
    60                                 <li><a href="#info" id="inspector_tab_info" class="inspector_tab selected"><img src="images/buttons/info_general.png" alt="Information"/></a></li>
    61                                 <li><a href="#activity" id="inspector_tab_activity" class="inspector_tab"><img src="images/buttons/info_activity.png" alt="Activity"/></a></li>
    62                         </ul>
     59                        <div id="inspector_tabs">
     60                                <div class="inspector_tab selected" id="inspector_tab_info"><a href="#info"><img src="images/buttons/info_general.png" alt="Information"/></a></div>
     61                                <div class="inspector_tab" id="inspector_tab_activity"><a href="#activity"><img src="images/buttons/info_activity.png" alt="Activity"/></a></div>
     62                        </div>
    6363                       
    64                         <div class="torrent_inspector_header">
    65                                 <h1 id="torrent_inspector_name">No Selection</h1>
    66                                 <span id="torrent_inspector_size">0 B</span>
     64                        <div id="inspector_header">
     65                                <h1 id="torrent_inspector_name"></h1>
     66                                <span id="torrent_inspector_size"></span>
    6767                        </div>
    6868                       
    69                         <div class="torrent_inspector_section" id="inspector_tab_info_container">
    70                                 <h2>Transfer Information</h2>
    71                                 <label>Tracker:</label>
    72                                 <div id="torrent_inspector_tracker">N/A</div>
    73                                 <label>Hash:</label>
    74                                 <div id="torrent_inspector_hash">N/A</div>
    75                                 <label>Secure:</label>
    76                                 <div id="torrent_inspector_secure">N/A</div>
    77                                 <label>Comment:</label>
    78                                 <div id="torrent_inspector_comment">N/A</div>
     69                        <div class="inspector_container" id="inspector_tab_info_container">
     70                                <div class="inspector_group">
     71                                        <div class="inspector_group_label">Information</div>
     72                                        <div class="inspector_row">
     73                                                <div class="inspector_label">Tracker:</div>
     74                                                <div id="torrent_inspector_tracker"></div>
     75                                        </div>
     76                                        <div class="inspector_row">
     77                                                <div class="inspector_label">Hash:</div>
     78                                                <div id="torrent_inspector_hash"></div>
     79                                        </div>
     80                                        <div class="inspector_row">
     81                                                <div class="inspector_label">Secure:</div>
     82                                                <div id="torrent_inspector_secure"></div>
     83                                        </div>
     84                                        <div class="inspector_row">
     85                                                <div class="inspector_label">Comment:</div>
     86                                                <div id="torrent_inspector_comment"></div>
     87                                        </div>
     88                                </div><!-- class="inspector_group"-->
    7989                               
    80                                 <h2>Created By</h2>
    81                                 <label>Creator:</label>
    82                                 <div id="torrent_inspector_creator">N/A</div>
    83                                 <label>Date:</label>
    84                                 <div id="torrent_inspector_creator_date">N/A</div>
    85                         </div>
     90                                <div class="inspector_group">
     91                                        <div class="inspector_group_label">Created By</div>
     92                                        <div class="inspector_row">
     93                                                <div class="inspector_label">Creator:</div>
     94                                                <div id="torrent_inspector_creator">N/A</div>
     95                                        </div>
     96                                        <div class="inspector_row">
     97                                                <div class="inspector_label">Date:</div>
     98                                                <div id="torrent_inspector_creator_date">N/A</div>
     99                                        </div>
     100                                </div><!-- class="inspector_group"-->
     101                        </div><!-- id="inspector_tab_info_container" -->
    86102                       
    87                         <div class="torrent_inspector_section" style="display:none;" id="inspector_tab_activity_container">
    88                                 <h2>Activity</h2>
    89                                 <label>State:</label>
    90                                 <div id="torrent_inspector_state">N/A</div>
    91                                 <label>Progress:</label>
    92                                 <div id="torrent_inspector_progress">N/A</div>
    93                                 <label>Have:</label>
    94                                 <div id="torrent_inspector_have">N/A</div>
    95                                 <label>Downloaded:</label>
    96                                 <div id="torrent_inspector_downloaded">N/A</div>
    97                                 <label>Uploaded:</label>
    98                                 <div id="torrent_inspector_uploaded">N/A</div>
    99                                 <label>Ratio:</label>
    100                                 <div id="torrent_inspector_ratio">N/A</div>
    101                                 <label>Swarm Rate:</label>
    102                                 <div id="torrent_inspector_swarm_speed">N/A</div>
    103                                 <label>Error:</label>
    104                                 <div id="torrent_inspector_error">N/A</div>
    105                                 <label>DL Speed:</label>
    106                                 <div id="torrent_inspector_download_speed">N/A</div>
    107                                 <label>UL Speed:</label>
    108                                 <div id="torrent_inspector_upload_speed">N/A</div>
     103                        <div style="display:none;" class="inspector_container" id="inspector_tab_activity_container">
     104
     105                                <div class="inspector_group">
     106                                        <div class="inspector_group_label">Activity</div>
     107                                        <div class="inspector_row">
     108                                                <div class="inspector_label">State:</div>
     109                                                <div id="torrent_inspector_state">N/A</div>
     110                                        </div>
     111                                        <div class="inspector_row">
     112                                                <div class="inspector_label">Progress:</div>
     113                                                <div id="torrent_inspector_progress">N/A</div>
     114                                        </div>
     115                                        <div class="inspector_row">
     116                                                <div class="inspector_label">Have:</div>
     117                                                <div id="torrent_inspector_have">N/A</div>
     118                                        </div>
     119                                        <div class="inspector_row">
     120                                                <div class="inspector_label">Downloaded:</div>
     121                                                <div id="torrent_inspector_downloaded">N/A</div>
     122                                        </div>
     123                                        <div class="inspector_row">
     124                                                <div class="inspector_label">Uploaded:</div>
     125                                                <div id="torrent_inspector_uploaded">N/A</div>
     126                                        </div>
     127                                        <div class="inspector_row">
     128                                                <div class="inspector_label">Ratio:</div>
     129                                                <div id="torrent_inspector_ratio">N/A</div>
     130                                        </div>
     131                                        <div class="inspector_row">
     132                                                <div class="inspector_label">Swarm Rate:</div>
     133                                                <div id="torrent_inspector_swarm_speed">N/A</div>
     134                                        </div>
     135                                        <div class="inspector_row">
     136                                                <div class="inspector_label">Error:</div>
     137                                                <div id="torrent_inspector_error">N/A</div>
     138                                        </div>
     139                                        <div class="inspector_row">
     140                                                <div class="inspector_label">DL Speed:</div>
     141                                                <div id="torrent_inspector_download_speed">N/A</div>
     142                                        </div>
     143                                        <div class="inspector_row">
     144                                                <div class="inspector_label">UL Speed:</div>
     145                                                <div id="torrent_inspector_upload_speed">N/A</div>
     146                                        </div>
     147                                </div><!-- class="inspector_group"-->
    109148                               
    110                                 <h2>Peers</h2>
    111                                 <label>UL To:</label>
    112                                 <div id="torrent_inspector_upload_to">N/A</div>
    113                                 <label>DL From:</label>
    114                                 <div id="torrent_inspector_download_from">N/A</div>
    115                                 <label>Total Seeders:</label>
    116                                 <div id="torrent_inspector_total_seeders">N/A</div>
    117                                 <label>Total Leechers:</label>
    118                                 <div id="torrent_inspector_total_leechers">N/A</div>
    119                         </div>
     149                                <div class="inspector_group">
     150                                        <div class="inspector_group_label">Peers</div>
     151                                        <div class="inspector_row">
     152                                                <div class="inspector_label">UL To:</div>
     153                                                <div id="torrent_inspector_upload_to">N/A</div>
     154                                        </div>
     155                                        <div class="inspector_row">
     156                                                <div class="inspector_label">DL From:</div>
     157                                                <div id="torrent_inspector_download_from">N/A</div>
     158                                        </div>
     159                                        <div class="inspector_row">
     160                                                <div class="inspector_label">Total Seeders:</div>
     161                                                <div id="torrent_inspector_total_seeders">N/A</div>
     162                                        </div>
     163                                        <div class="inspector_row">
     164                                                <div class="inspector_label">Total Leechers:</div>
     165                                                <div id="torrent_inspector_total_leechers">N/A</div>
     166                                        </div>
     167                                </div><!-- class="inspector_group"-->
     168                        </div><!-- id="inspector_tab_activity_container" -->
    120169                </div>
    121170               
  • branches/1.3x/web/javascript/transmission.js

    r6580 r6755  
    843843                var total_upload_speed = 0;
    844844                var total_verified = 0;
    845 
    846                 switch( torrents.length ) {
    847                         case 0: name = 'No Selection'; break;
    848                         case 1: name = torrents[0].name(); break;
    849                         default: name = torrents.length+' Transfers Selected'; break;
    850                 }
     845                var na = 'N/A';
     846
     847                if( torrents.length == 0 )
     848                {
     849                        var ti = '#torrent_inspector_';
     850                        setInnerHTML( $(ti+'name')[0], 'No Selection' );
     851                        setInnerHTML( $(ti+'size')[0], na );
     852                        setInnerHTML( $(ti+'tracker')[0], na );
     853                        setInnerHTML( $(ti+'hash')[0], na );
     854                        setInnerHTML( $(ti+'state')[0], na );
     855                        setInnerHTML( $(ti+'download_speed')[0], na );
     856                        setInnerHTML( $(ti+'upload_speed')[0], na );
     857                        setInnerHTML( $(ti+'uploaded')[0], na );
     858                        setInnerHTML( $(ti+'downloaded')[0], na );
     859                        setInnerHTML( $(ti+'ratio')[0], na );
     860                        setInnerHTML( $(ti+'total_seeders')[0], na );
     861                        setInnerHTML( $(ti+'total_leechers')[0], na );
     862                        setInnerHTML( $(ti+'swarm_speed')[0], na );
     863                        setInnerHTML( $(ti+'have')[0], na );
     864                        setInnerHTML( $(ti+'upload_to')[0], na );
     865                        setInnerHTML( $(ti+'download_from')[0], na );
     866                        setInnerHTML( $(ti+'secure')[0], na );
     867                        setInnerHTML( $(ti+'creator_date')[0], na );
     868                        setInnerHTML( $(ti+'progress')[0], na );
     869                        setInnerHTML( $(ti+'comment')[0], na );
     870                        setInnerHTML( $(ti+'creator')[0], na );
     871                        setInnerHTML( $(ti+'error')[0], na );
     872                        return;
     873                }
     874
     875                name = torrents.length == 1
     876                        ? torrents[0].name()
     877                        : torrents.length+' Transfers Selected';
    851878
    852879                if( torrents.length == 1 )
    853880                {
    854881                        var t = torrents[0];
    855                         error = t._error_message ? t._error_message : '';
    856                         comment = t._comment ? t._comment : '';
    857                         creator = t._creator ? t._creator : '';
     882                        if( t._error_message )
     883                        {
     884                                error = t._error_message ;
     885                        }
     886                        if( t._comment)
     887                        {
     888                                comment = t._comment ;
     889                        }
     890                        if( t._creator )
     891                        {
     892                                creator = t._creator ;
     893                        }
    858894                        hash = t.hash();
    859895                        date_created = Math.formatTimestamp( t._creator_date );
     
    896932                var ti = '#torrent_inspector_';
    897933                $(ti+'name')[0].innerHTML            = name;
    898                 $(ti+'size')[0].innerHTML            = Math.formatBytes( total_size );
     934                $(ti+'size')[0].innerHTML            = torrents.length ? Math.formatBytes( total_size ) : 'N/A';
    899935                $(ti+'tracker')[0].innerHTML         = total_tracker;
    900936                $(ti+'hash')[0].innerHTML            = hash;
    901937                $(ti+'state')[0].innerHTML           = total_state;
    902                 $(ti+'download_speed')[0].innerHTML  = Math.formatBytes( total_download_speed ) + '/s';
    903                 $(ti+'upload_speed')[0].innerHTML    = Math.formatBytes( total_upload_speed ) + '/s';
    904                 $(ti+'uploaded')[0].innerHTML        = Math.formatBytes( total_upload );
    905                 $(ti+'downloaded')[0].innerHTML      = Math.formatBytes( total_download );
    906                 $(ti+'ratio')[0].innerHTML           = Math.ratio( total_upload, total_download );
    907                 $(ti+'total_seeders')[0].innerHTML   = total_seeders;
    908                 $(ti+'total_leechers')[0].innerHTML  = total_leechers;
    909                 $(ti+'swarm_speed')[0].innerHTML     = Math.formatBytes(total_swarm_speed) + '/s';
    910                 $(ti+'have')[0].innerHTML            = Math.formatBytes(total_completed) + ' (' + Math.formatBytes(total_verified) + ' verified)';
    911                 $(ti+'upload_to')[0].innerHTML       = total_upload_peers;
    912                 $(ti+'download_from')[0].innerHTML   = total_download_peers;
     938                $(ti+'download_speed')[0].innerHTML  = torrents.length ? Math.formatBytes( total_download_speed ) + '/s' : 'N/A';
     939                $(ti+'upload_speed')[0].innerHTML    = torrents.length ? Math.formatBytes( total_upload_speed ) + '/s' : 'N/A';
     940                $(ti+'uploaded')[0].innerHTML        = torrents.length ? Math.formatBytes( total_upload ) : 'N/A';
     941                $(ti+'downloaded')[0].innerHTML      = torrents.length ? Math.formatBytes( total_download ) : 'N/A';
     942                $(ti+'ratio')[0].innerHTML           = torrents.length ? Math.ratio( total_upload, total_download ) : 'N/A';
     943                $(ti+'total_seeders')[0].innerHTML   = torrents.length ? total_seeders : 'N/A';
     944                $(ti+'total_leechers')[0].innerHTML  = torrents.length ? total_leechers : 'N/A';
     945                $(ti+'swarm_speed')[0].innerHTML     = torrents.length ? Math.formatBytes(total_swarm_speed) + '/s' : 'N/A';
     946                $(ti+'have')[0].innerHTML            = torrents.length ? Math.formatBytes(total_completed) + ' (' + Math.formatBytes(total_verified) + ' verified)' : 'N/A';
     947                $(ti+'upload_to')[0].innerHTML       = torrents.length ? total_upload_peers : 'N/A';
     948                $(ti+'download_from')[0].innerHTML   = torrents.length ? total_download_peers : 'N/A';
    913949                $(ti+'secure')[0].innerHTML          = private_string;
    914950                $(ti+'creator_date')[0].innerHTML    = date_created;
    915                 $(ti+'progress')[0].innerHTML        = Math.ratio( sizeDone*100, sizeWhenDone ) + '%';
    916                 $(ti+'comment')[0].innerHTML      = comment ;
    917                 $(ti+'creator')[0].innerHTML      = creator ;
    918                 $(ti+'error')[0].innerHTML                = error ;
     951                $(ti+'progress')[0].innerHTML        = torrents.length ? Math.ratio( sizeDone*100, sizeWhenDone ) + '%' : 'N/A';
     952                $(ti+'comment')[0].innerHTML         = comment;
     953                $(ti+'creator')[0].innerHTML         = creator;
     954                $(ti+'error')[0].innerHTML           = error;
    919955        },
    920956   
  • branches/1.3x/web/stylesheets/common.css

    r6542 r6755  
    4646        right: 0;
    4747        top: 0;
    48         border-bottom: 1px solid #444;
     48        border-bottom: 1px solid #888;
    4949        z-index: 3;
    5050        overflow: hidden;
     
    193193        font-size: 1.1em;
    194194        font-weight: normal;
    195         border-bottom: 1px solid #777;
     195        border-bottom: 1px solid #888;
    196196        position: fixed;
    197197        left: 0;
     
    237237        height: 24px;
    238238        background: #ddd url('../images/graphics/filter_bar.png') repeat-x bottom left;
    239         border-bottom: 1px solid #777;
     239        border-bottom: 1px solid #888;
    240240        position: fixed;
    241241        left: 0;
     
    487487        position: fixed;
    488488        top: 97px;
     489        bottom: 22px;
    489490        right: 0px;
    490         bottom: 22px;
    491491        width: 350px;
    492492        background-color: #ddd;
    493         border-left: #888 1px solid;
     493        border-left: 1px solid #888;
    494494        z-index: 2;
    495495        text-align: left;
    496         font-size: 1.1em;
    497 }
    498 
    499 div#torrent_inspector h1#torrent_inspector_name {
    500         font-size: 1.3em;
    501         margin: 0;
    502         word-wrap: break-word;
     496}
     497div#torrent_inspector #torrent_inspector_name {
     498        margin: 0;
    503499        overflow: hidden;
    504500}
    505 
    506 div#torrent_inspector span#torrent_inspector_size {
     501div#torrent_inspector #torrent_inspector_size {
    507502        font-size: 1.2em;
    508503        margin: 3;
     
    510505        padding-top: 2px;
    511506}
    512 
    513 div.torrent_inspector_header {
    514         padding: 5px 10px 0;
    515 }
    516 
    517 div#torrent_inspector ul.torrent_inspector_tabs {
    518         margin: 0 0 0 113px; /* Center tabs */
    519         padding: 0;
    520         display: block;
     507div#inspector_header {
     508        clear: both;
     509        padding-top: 10px;
     510        padding-left: 10px;
     511        padding-right: 10px;
     512}
     513div#inspector_tabs {
     514        margin: 0 auto;
     515        padding-top: 10px;
     516        width: 140px;
     517}
     518.inspector_tab {
     519        float: left;
     520        background: transparent url('../images/buttons/tab_backgrounds.png') left -1px repeat-x;
     521        border: 1px solid #888;
     522        margin: 0px 1px;
     523        padding: 3px 15px; /* 3px == ((bg image height - fg image height) / 2) */
     524        cursor: pointer;
     525}
     526#inspector_tabs > .selected {
     527        background-position: left -26px; /* the highlighted part of the image */
     528}
     529.inspector_container {
     530        margin: 10px;
     531        width: 330px; /* inspector_width==350 - ((margin==10)*2) */
     532}
     533.inspector_group {
     534        display: table;
    521535        width: 100%;
    522 }
    523 
    524 /* Force anything after the menu to display on a new line -
    525    looks like overkill, maybe an easier way to do this */
    526 div#torrent_inspector ul.torrent_inspector_tabs:after {
    527         content: ".";
    528         display: block;
    529         height: 0;
    530         font-size: 0;
    531         clear: both;
    532         visibility: hidden;
    533 }
    534 
    535 div#torrent_inspector ul.torrent_inspector_tabs li {
    536         float: left;
    537         list-style-type: none;
    538 }
    539 
    540 div#torrent_inspector ul.torrent_inspector_tabs li a {
    541         display: block;
    542         margin: 10px -1px 3px 0; /* Collapse horizontal borders */
    543         padding: 4px;
    544         background: transparent url('../images/buttons/tab_backgrounds.png') left top repeat-x;
    545         border-left: 1px solid #787878;
    546         border-right: 1px solid #787878;
    547         width: 50px;
    548         text-align: center;
     536        border-top: 1px solid #888;
     537        margin: 10px 0px;
     538        padding: 10px 0px;
     539}
     540.inspector_group_label {
     541        display: table-header-group;
    549542        font-weight: bold;
    550         text-decoration: none;
    551         color: #323232;
    552         cursor: pointer;
    553 }
    554 
    555 div#torrent_inspector ul.torrent_inspector_tabs li a.selected {
    556         background-position: left bottom;
    557 }
    558 
    559 div#torrent_inspector div.torrent_inspector_section h2 {
    560         border-top: 1px solid #aaa;
    561         font-size: 1.1em;
    562         margin: 5px 0 0;
    563         padding: 5px 5px 5px;
    564 }
    565 
    566 div.torrent_inspector_section {
    567         padding: 5px;
    568 }
    569 
    570 div#torrent_inspector div.torrent_inspector_section label {
    571         margin-left: 15px;
    572         width: 90px;
    573         display: block;
    574         float: left;
    575 }
    576 
    577 div#torrent_inspector div.torrent_inspector_section div {
    578         height: 17px;
    579         width: 215px;
    580         overflow: hidden;
    581         white-space: nowrap;
    582         text-overflow: ellipsis;
    583         -o-text-overflow: ellipsis;
     543}
     544.inspector_row {
     545        display: table-row;
     546}
     547.inspector_row > .inspector_label {
     548        display: table-cell;
     549        width: 100px; /* this + the next 230 == inspector_container_with */
     550}
     551.inspector_row > div {
     552        display: table-cell;
     553        padding-top: 10px;
     554        width: 230px; /* inspector_container_width==330 - inspector_label_width==100 */
    584555}
    585556
Note: See TracChangeset for help on using the changeset viewer.