Changeset 6662


Ignore:
Timestamp:
Aug 29, 2008, 5:57:53 PM (13 years ago)
Author:
charles
Message:

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

Location:
trunk/web
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/web/index.html

    r6495 r6662  
    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                                        <strong>Transfer Information</strong>
     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                                        <strong>Created By</strong>
     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                                        <strong>Activity</strong>
     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                                        <strong>Peers</strong>
     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               
  • trunk/web/javascript/transmission.js

    r6648 r6662  
    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 );
     
    898934                var ti = '#torrent_inspector_';
    899935                $(ti+'name')[0].innerHTML            = name;
    900                 $(ti+'size')[0].innerHTML            = Math.formatBytes( total_size );
     936                $(ti+'size')[0].innerHTML            = torrents.length ? Math.formatBytes( total_size ) : 'N/A';
    901937                $(ti+'tracker')[0].innerHTML         = total_tracker;
    902938                $(ti+'hash')[0].innerHTML            = hash;
    903939                $(ti+'state')[0].innerHTML           = total_state;
    904                 $(ti+'download_speed')[0].innerHTML  = Math.formatBytes( total_download_speed ) + '/s';
    905                 $(ti+'upload_speed')[0].innerHTML    = Math.formatBytes( total_upload_speed ) + '/s';
    906                 $(ti+'uploaded')[0].innerHTML        = Math.formatBytes( total_upload );
    907                 $(ti+'downloaded')[0].innerHTML      = Math.formatBytes( total_download );
    908                 $(ti+'ratio')[0].innerHTML           = Math.ratio( total_upload, total_download );
    909                 $(ti+'total_seeders')[0].innerHTML   = total_seeders;
    910                 $(ti+'total_leechers')[0].innerHTML  = total_leechers;
    911                 $(ti+'swarm_speed')[0].innerHTML     = Math.formatBytes(total_swarm_speed) + '/s';
    912                 $(ti+'have')[0].innerHTML            = Math.formatBytes(total_completed) + ' (' + Math.formatBytes(total_verified) + ' verified)';
    913                 $(ti+'upload_to')[0].innerHTML       = total_upload_peers;
    914                 $(ti+'download_from')[0].innerHTML   = total_download_peers;
     940                $(ti+'download_speed')[0].innerHTML  = torrents.length ? Math.formatBytes( total_download_speed ) + '/s' : 'N/A';
     941                $(ti+'upload_speed')[0].innerHTML    = torrents.length ? Math.formatBytes( total_upload_speed ) + '/s' : 'N/A';
     942                $(ti+'uploaded')[0].innerHTML        = torrents.length ? Math.formatBytes( total_upload ) : 'N/A';
     943                $(ti+'downloaded')[0].innerHTML      = torrents.length ? Math.formatBytes( total_download ) : 'N/A';
     944                $(ti+'ratio')[0].innerHTML           = torrents.length ? Math.ratio( total_upload, total_download ) : 'N/A';
     945                $(ti+'total_seeders')[0].innerHTML   = torrents.length ? total_seeders : 'N/A';
     946                $(ti+'total_leechers')[0].innerHTML  = torrents.length ? total_leechers : 'N/A';
     947                $(ti+'swarm_speed')[0].innerHTML     = torrents.length ? Math.formatBytes(total_swarm_speed) + '/s' : 'N/A';
     948                $(ti+'have')[0].innerHTML            = torrents.length ? Math.formatBytes(total_completed) + ' (' + Math.formatBytes(total_verified) + ' verified)' : 'N/A';
     949                $(ti+'upload_to')[0].innerHTML       = torrents.length ? total_upload_peers : 'N/A';
     950                $(ti+'download_from')[0].innerHTML   = torrents.length ? total_download_peers : 'N/A';
    915951                $(ti+'secure')[0].innerHTML          = private_string;
    916952                $(ti+'creator_date')[0].innerHTML    = date_created;
    917                 $(ti+'progress')[0].innerHTML        = Math.ratio( sizeDone*100, sizeWhenDone ) + '%';
    918                 $(ti+'comment')[0].innerHTML      = comment ;
    919                 $(ti+'creator')[0].innerHTML      = creator ;
    920                 $(ti+'error')[0].innerHTML                = error ;
     953                $(ti+'progress')[0].innerHTML        = torrents.length ? Math.ratio( sizeDone*100, sizeWhenDone ) + '%' : 'N/A';
     954                $(ti+'comment')[0].innerHTML         = comment;
     955                $(ti+'creator')[0].innerHTML         = creator;
     956                $(ti+'error')[0].innerHTML           = error;
    921957        },
    922958   
  • trunk/web/stylesheets/common.css

    r6509 r6662  
    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 {
     496}
     497
     498div#torrent_inspector #torrent_inspector_name {
    500499        font-size: 1.3em;
    501500        margin: 0;
     
    504503}
    505504
    506 div#torrent_inspector span#torrent_inspector_size {
     505div#torrent_inspector #torrent_inspector_size {
    507506        font-size: 1.2em;
    508507        margin: 3;
     
    511510}
    512511
    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;
    521         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;
     512div#inspector_header {
    531513        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;
     514        padding-top: 10px;
     515        padding-left: 10px;
     516        padding-right: 10px;
     517}
     518
     519div#inspector_tabs {
     520        margin: 0 auto;
     521        padding-top: 10px;
     522        width: 140px;
     523}
     524
     525.inspector_tab {
     526        float: left;
     527        background: transparent url('../images/buttons/tab_backgrounds.png') left -1px repeat-x;
     528        border: 1px solid #888;
     529        margin: 0px 1px;
     530        padding: 3px 15px; /* 3px == ((bg image height - fg image height) / 2) */
     531        cursor: pointer;
     532}
     533
     534#inspector_tabs > .selected {
     535        background-position: left -26px;
     536}
     537
     538.inspector_container {
     539        padding-top: 10px;
     540        padding-bottom: 5px;
     541        margin: 5px 10px;
     542}
     543
     544.inspector_group {
     545        border-top: 1px solid #888;
     546        margin: 8px 0px;
     547        padding: 8px 0px;
     548}
     549
     550.inspector_group_label {
    549551        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;
     552}
     553.inspector_row {
     554        display: table-row;
     555}
     556.inspector_row > .inspector_label {
     557        display: table-cell;
     558        padding-left: 10px;
     559}
     560.inspector_row > div {
     561        padding-top: 10px;
     562        padding-left: 10px;
     563        word-wrap: break-word;
    584564}
    585565
Note: See TracChangeset for help on using the changeset viewer.