Changeset 13091


Ignore:
Timestamp:
Nov 14, 2011, 1:44:11 AM (11 years ago)
Author:
jordan
Message:

(trunk web) followup to r13087 that makes the filterbar grouping a little nicer. Also use livings124's suggestion of always showing the up/down speeds even when they are zero

Location:
trunk/web
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/web/index.html

    r13087 r13091  
    4848
    4949                <div id="statusbar">
    50                         <div id='filter-select'>
     50                        <div id='filter'>
    5151                                Show
    5252                                <select id="filter-mode">
    … …  
    5959                                </select>
    6060                                <select id="filter-tracker"></select>
     61                                <input type="search" id="torrent_search" placeholder="Filter" />
    6162                                &mdash;
    6263                                <span id="filter-count">&nbsp;</span>
    6364                        </div>
    6465
    65                         <input type="search" id="torrent_search" placeholder="Filter" />
    66                         <div id='filter-button'></div>
    6766                        <div id='speed-info'>
    6867                                <div id='speed-dn-container'>

  • trunk/web/style/transmission/common.css

    r13089 r13091  
    304304  background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    305305  background-image: linear-gradient(top, #dddddd, #bbbbbb); }
     306  #statusbar #filter {
     307    float: left;
     308    margin-left: 5px; }
     309    #statusbar #filter input#torrent_search {
     310      height: 18px;
     311      width: 100px;
     312      border: 1px solid black;
     313      border-radius: 4px; }
     314      #statusbar #filter input#torrent_search.blur {
     315        color: #999; }
    306316  #statusbar #speed-info {
     317    float: right;
    307318    margin-top: 5px;
    308     margin-left: 45%;
    309     text-align: left; }
     319    margin-right: 10px; }
    310320    #statusbar #speed-info * {
    311321      display: inline-block; }
    … …  
    319329      height: 8px;
    320330      background: url("images/arrow-down.png") bottom no-repeat; }
    321     #statusbar #speed-info #speed-up-container {
    322       display: none; }
    323       #statusbar #speed-info #speed-up-container.active {
    324         display: inline; }
    325     #statusbar #speed-info #speed-dn-container {
    326       display: none; }
    327       #statusbar #speed-info #speed-dn-container.active {
    328         display: inline; }
    329   #statusbar #filter-select {
    330     float: left;
    331     margin-left: 5px; }
    332   #statusbar input#torrent_search {
    333     float: right;
    334     height: 15px;
    335     width: 100px;
    336     border: solid 0 #fff;
    337     padding: 2px;
    338     margin: 4px 5px 0 0;
    339     border-radius: 5px; }
    340     #statusbar input#torrent_search.blur {
    341       color: #999; }
     331    #statusbar #speed-info #speed-up-container, #statusbar #speed-info #speed-dn-container {
     332      display: inline; }
    342333
    343334/***

  • trunk/web/style/transmission/common.scss

    r13089 r13091  
    200200        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
    201201
     202        #filter
     203        {
     204                float: left;
     205                margin-left: 5px;
     206
     207                input#torrent_search {
     208                        height: 18px;
     209                        width: 100px;
     210                        border: 1px solid black;
     211                        border-radius: 4px;
     212                        &.blur { color: #999; }
     213                }
     214        }
     215
    202216        #speed-info
    203217        {
     218                float: right;
    204219                margin-top: 5px;
    205                 margin-left: 45%;
    206                 text-align: left;
     220                margin-right: 10px;
    207221
    208222                * {
    … …  
    223237                }
    224238
    225                 #speed-up-container {
    226                         display: none;
    227                         &.active { display: inline; }
    228                 }
    229 
    230                 #speed-dn-container {
    231                         display: none;
    232                         &.active { display: inline; }
    233                 }
    234         }
    235 
    236         #filter-select {
    237                 float: left;
    238                 margin-left: 5px;
    239         }
    240 
    241         input#torrent_search {
    242                 float: right;
    243                 height: 15px;
    244                 width: 100px;
    245                 border: solid 0 #fff;
    246                 padding: 2px;
    247                 margin: 4px 5px 0 0;
    248                 border-radius: 5px;
    249 
    250                 &.blur {
    251                         color: #999;
     239                #speed-up-container, #speed-dn-container {
     240                        display: inline;
    252241                }
    253242        }

  • trunk/web/style/transmission/mobile.css

    r13087 r13091  
    8383    background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, white, #bbbbbb);
    8484    /* Opera 11.10+ */
    85     background-image: url("images/toolbar-folder.png"), linear-gradient(top, white, #bbbbbb);
    86     /* W3C */
    8785    background-position: center;
    8886    background-repeat: no-repeat;
    … …  
    102100      background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, #cdcdff, white);
    103101      /* Opera 11.10+ */
    104       background-image: url("images/toolbar-folder.png"), linear-gradient(top, #cdcdff, white);
    105       /* W3C */
    106102      background-position: center;
    107103      background-repeat: no-repeat; }
    … …  
    124120    background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, white, #bbbbbb);
    125121    /* Opera 11.10+ */
    126     background-image: url("images/toolbar-close.png"), linear-gradient(top, white, #bbbbbb);
    127     /* W3C */
    128122    background-position: center;
    129123    background-repeat: no-repeat; }
    … …  
    142136      background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, #cdcdff, white);
    143137      /* Opera 11.10+ */
    144       background-image: url("images/toolbar-close.png"), linear-gradient(top, #cdcdff, white);
    145       /* W3C */
    146138      background-position: center;
    147139      background-repeat: no-repeat; }
    … …  
    164156    background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, white, #bbbbbb);
    165157    /* Opera 11.10+ */
    166     background-image: url("images/toolbar-start.png"), linear-gradient(top, white, #bbbbbb);
    167     /* W3C */
    168158    background-position: center;
    169159    background-repeat: no-repeat;
    … …  
    183173      background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, #cdcdff, white);
    184174      /* Opera 11.10+ */
    185       background-image: url("images/toolbar-start.png"), linear-gradient(top, #cdcdff, white);
    186       /* W3C */
    187175      background-position: center;
    188176      background-repeat: no-repeat; }
    … …  
    205193    background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, white, #bbbbbb);
    206194    /* Opera 11.10+ */
    207     background-image: url("images/toolbar-pause.png"), linear-gradient(top, white, #bbbbbb);
    208     /* W3C */
    209195    background-position: center;
    210196    background-repeat: no-repeat; }
    … …  
    223209      background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, #cdcdff, white);
    224210      /* Opera 11.10+ */
    225       background-image: url("images/toolbar-pause.png"), linear-gradient(top, #cdcdff, white);
    226       /* W3C */
    227211      background-position: center;
    228212      background-repeat: no-repeat; }
    … …  
    243227    background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, white, #bbbbbb);
    244228    /* Opera 11.10+ */
    245     background-image: url("images/toolbar-pointer.png"), linear-gradient(top, white, #bbbbbb);
    246     /* W3C */
    247229    background-position: center;
    248230    background-repeat: no-repeat;
    … …  
    262244      background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #cdcdff, white);
    263245      /* Opera 11.10+ */
    264       background-image: url("images/toolbar-pointer.png"), linear-gradient(top, #cdcdff, white);
    265       /* W3C */
    266246      background-position: center;
    267247      background-repeat: no-repeat; }
    … …  
    282262    background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb);
    283263    /* Opera 11.10+ */
    284     background-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb);
    285     /* W3C */
    286264    background-position: center;
    287265    background-repeat: no-repeat;
    … …  
    302280      background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #cdcdff, white);
    303281      /* Opera 11.10+ */
    304       background-image: url("images/toolbar-info.png"), linear-gradient(top, #cdcdff, white);
    305       /* W3C */
    306282      background-position: center;
    307283      background-repeat: no-repeat; }
    … …  
    327303  background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    328304  background-image: linear-gradient(top, #dddddd, #bbbbbb); }
     305  #statusbar #filter {
     306    float: left;
     307    margin-left: 5px; }
     308    #statusbar #filter input#torrent_search {
     309      display: none; }
    329310  #statusbar #speed-info {
     311    float: right;
    330312    margin-top: 5px;
    331     margin-left: 45%;
    332     text-align: left; }
     313    margin-right: 10px; }
    333314    #statusbar #speed-info * {
    334315      display: inline-block; }
    … …  
    342323      height: 8px;
    343324      background: url("images/arrow-down.png") bottom no-repeat; }
    344     #statusbar #speed-info #speed-up-container {
    345       display: none; }
    346       #statusbar #speed-info #speed-up-container.active {
    347         display: inline; }
    348     #statusbar #speed-info #speed-dn-container {
    349       display: none; }
    350       #statusbar #speed-info #speed-dn-container.active {
    351         display: inline; }
    352   #statusbar #filter-select {
    353     float: left;
    354     margin-left: 5px; }
    355   #statusbar input#torrent_search {
    356     display: none; }
     325    #statusbar #speed-info #speed-up-container, #statusbar #speed-info #speed-dn-container {
     326      display: inline; }
    357327
    358328/***
    … …  
    624594        background-image: url("images/inspector-info.png"), -o-linear-gradient(top, white, #bbbbbb);
    625595        /* Opera 11.10+ */
    626         background-image: url("images/inspector-info.png"), linear-gradient(top, white, #bbbbbb);
    627         /* W3C */
    628596        background-position: center;
    629597        background-repeat: no-repeat;
    … …  
    643611          background-image: url("images/inspector-info.png"), -o-linear-gradient(top, #cdcdff, white);
    644612          /* Opera 11.10+ */
    645           background-image: url("images/inspector-info.png"), linear-gradient(top, #cdcdff, white);
    646           /* W3C */
    647613          background-position: center;
    648614          background-repeat: no-repeat; }
    … …  
    661627        background-image: url("images/inspector-peers.png"), -o-linear-gradient(top, white, #bbbbbb);
    662628        /* Opera 11.10+ */
    663         background-image: url("images/inspector-peers.png"), linear-gradient(top, white, #bbbbbb);
    664         /* W3C */
    665629        background-position: center;
    666630        background-repeat: no-repeat; }
    … …  
    679643          background-image: url("images/inspector-peers.png"), -o-linear-gradient(top, #cdcdff, white);
    680644          /* Opera 11.10+ */
    681           background-image: url("images/inspector-peers.png"), linear-gradient(top, #cdcdff, white);
    682           /* W3C */
    683645          background-position: center;
    684646          background-repeat: no-repeat; }
    … …  
    697659        background-image: url("images/inspector-trackers.png"), -o-linear-gradient(top, white, #bbbbbb);
    698660        /* Opera 11.10+ */
    699         background-image: url("images/inspector-trackers.png"), linear-gradient(top, white, #bbbbbb);
    700         /* W3C */
    701661        background-position: center;
    702662        background-repeat: no-repeat; }
    … …  
    715675          background-image: url("images/inspector-trackers.png"), -o-linear-gradient(top, #cdcdff, white);
    716676          /* Opera 11.10+ */
    717           background-image: url("images/inspector-trackers.png"), linear-gradient(top, #cdcdff, white);
    718           /* W3C */
    719677          background-position: center;
    720678          background-repeat: no-repeat; }
    … …  
    737695        background-image: url("images/inspector-files.png"), -o-linear-gradient(top, white, #bbbbbb);
    738696        /* Opera 11.10+ */
    739         background-image: url("images/inspector-files.png"), linear-gradient(top, white, #bbbbbb);
    740         /* W3C */
    741697        background-position: center;
    742698        background-repeat: no-repeat; }
    … …  
    755711          background-image: url("images/inspector-files.png"), -o-linear-gradient(top, #cdcdff, white);
    756712          /* Opera 11.10+ */
    757           background-image: url("images/inspector-files.png"), linear-gradient(top, #cdcdff, white);
    758           /* W3C */
    759713          background-position: center;
    760714          background-repeat: no-repeat; }
    … …  
    926880    background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8);
    927881    /* Opera 11.10+ */
    928     background-image: url("images/file-priority-low.png"), linear-gradient(top, #f1f1f1, #c8c8c8);
    929     /* W3C */
    930882    background-position: center;
    931883    background-repeat: no-repeat;
    … …  
    945897      background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #d7d7ff, #f5f5ff);
    946898      /* Opera 11.10+ */
    947       background-image: url("images/file-priority-low.png"), linear-gradient(top, #d7d7ff, #f5f5ff);
    948       /* W3C */
    949899      background-position: center;
    950900      background-repeat: no-repeat; }
    … …  
    963913    background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8);
    964914    /* Opera 11.10+ */
    965     background-image: url("images/file-priority-normal.png"), linear-gradient(top, #f1f1f1, #c8c8c8);
    966     /* W3C */
    967915    background-position: center;
    968916    background-repeat: no-repeat; }
    … …  
    981929      background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #d7d7ff, #f5f5ff);
    982930      /* Opera 11.10+ */
    983       background-image: url("images/file-priority-normal.png"), linear-gradient(top, #d7d7ff, #f5f5ff);
    984       /* W3C */
    985931      background-position: center;
    986932      background-repeat: no-repeat; }
    … …  
    1003949    background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8);
    1004950    /* Opera 11.10+ */
    1005     background-image: url("images/file-priority-high.png"), linear-gradient(top, #f1f1f1, #c8c8c8);
    1006     /* W3C */
    1007951    background-position: center;
    1008952    background-repeat: no-repeat;
    … …  
    1022966      background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #d7d7ff, #f5f5ff);
    1023967      /* Opera 11.10+ */
    1024       background-image: url("images/file-priority-high.png"), linear-gradient(top, #d7d7ff, #f5f5ff);
    1025       /* W3C */
    1026968      background-position: center;
    1027969      background-repeat: no-repeat; }
    … …  
    10751017    background-image: url("images/wrench.png"), -o-linear-gradient(top, white, #bbbbbb);
    10761018    /* Opera 11.10+ */
    1077     background-image: url("images/wrench.png"), linear-gradient(top, white, #bbbbbb);
    1078     /* W3C */
    10791019    background-position: center;
    10801020    background-repeat: no-repeat; }
    … …  
    10931033      background-image: url("images/wrench.png"), -o-linear-gradient(top, #cdcdff, white);
    10941034      /* Opera 11.10+ */
    1095       background-image: url("images/wrench.png"), linear-gradient(top, #cdcdff, white);
    1096       /* W3C */
    10971035      background-position: center;
    10981036      background-repeat: no-repeat; }
    … …  
    11131051    background-image: url("images/turtle.png"), -o-linear-gradient(top, white, #bbbbbb);
    11141052    /* Opera 11.10+ */
    1115     background-image: url("images/turtle.png"), linear-gradient(top, white, #bbbbbb);
    1116     /* W3C */
    11171053    background-position: center;
    11181054    background-repeat: no-repeat; }
    … …  
    11311067      background-image: url("images/turtle.png"), -o-linear-gradient(top, #cdcdff, white);
    11321068      /* Opera 11.10+ */
    1133       background-image: url("images/turtle.png"), linear-gradient(top, #cdcdff, white);
    1134       /* W3C */
    11351069      background-position: center;
    11361070      background-repeat: no-repeat; }
    … …  
    11511085    background-image: url("images/compact.png"), -o-linear-gradient(top, white, #bbbbbb);
    11521086    /* Opera 11.10+ */
    1153     background-image: url("images/compact.png"), linear-gradient(top, white, #bbbbbb);
    1154     /* W3C */
    11551087    background-position: center;
    11561088    background-repeat: no-repeat; }
    … …  
    11691101      background-image: url("images/compact.png"), -o-linear-gradient(top, #cdcdff, white);
    11701102      /* Opera 11.10+ */
    1171       background-image: url("images/compact.png"), linear-gradient(top, #cdcdff, white);
    1172       /* W3C */
    11731103      background-position: center;
    11741104      background-repeat: no-repeat; }

  • trunk/web/style/transmission/mobile.scss

    r13087 r13091  
    1717        background-image: url($src), -ms-linear-gradient(top, $topColor, $bottomColor); /* IE10 */
    1818        background-image: url($src), -o-linear-gradient(top, $topColor, $bottomColor); /* Opera 11.10+ */
    19         background-image: url($src), linear-gradient(top, $topColor, $bottomColor); /* W3C */
    2019        background-position: center;
    2120        background-repeat: no-repeat;
    … …  
    193192        @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
    194193
     194        #filter
     195        {
     196                float: left;
     197                margin-left: 5px;
     198
     199                input#torrent_search {
     200                        display: none;
     201                }
     202        }
     203
    195204        #speed-info
    196205        {
     206                float: right;
    197207                margin-top: 5px;
    198                 margin-left: 45%;
    199                 text-align: left;
     208                margin-right: 10px;
    200209
    201210                * {
    … …  
    216225                }
    217226
    218                 #speed-up-container {
    219                         display: none;
    220                         &.active { display: inline; }
    221                 }
    222 
    223                 #speed-dn-container {
    224                         display: none;
    225                         &.active { display: inline; }
    226                 }
    227         }
    228 
    229         #filter-select {
    230                 float: left;
    231                 margin-left: 5px;
    232         }
    233 
    234         input#torrent_search {
    235                 display: none;
     227                #speed-up-container, #speed-dn-container {
     228                        display: inline;
     229                }
    236230        }
    237231}
Note: See TracChangeset for help on using the changeset viewer.