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

(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

This commit is contained in:
Jordan Lee 2011-11-14 01:44:11 +00:00
parent 93708228e2
commit 37bd984302
5 changed files with 57 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/index.html
View File

@ -47,7 +47,7 @@
</div>
<div id="statusbar">
<div id='filter-select'>
<div id='filter'>
Show
<select id="filter-mode">
<option value="all">All</option>
@ -58,12 +58,11 @@
<option value="finished">Finished</option>
</select>
<select id="filter-tracker"></select>
<input type="search" id="torrent_search" placeholder="Filter" />
&mdash;
<span id="filter-count">&nbsp;</span>
</div>
<input type="search" id="torrent_search" placeholder="Filter" />
<div id='filter-button'></div>
<div id='speed-info'>
<div id='speed-dn-container'>
<div id='speed-dn-icon'></div>

37
web/style/transmission/common.css
View File

@ -303,10 +303,20 @@ div#toolbar {
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb); }
#statusbar #filter {
float: left;
margin-left: 5px; }
#statusbar #filter input#torrent_search {
height: 18px;
width: 100px;
border: 1px solid black;
border-radius: 4px; }
#statusbar #filter input#torrent_search.blur {
color: #999; }
#statusbar #speed-info {
float: right;
margin-top: 5px;
margin-left: 45%;
text-align: left; }
margin-right: 10px; }
#statusbar #speed-info * {
display: inline-block; }
#statusbar #speed-info #speed-up-icon {
@ -318,27 +328,8 @@ div#toolbar {
width: 8px;
height: 8px;
background: url("images/arrow-down.png") bottom no-repeat; }
#statusbar #speed-info #speed-up-container {
display: none; }
#statusbar #speed-info #speed-up-container.active {
display: inline; }
#statusbar #speed-info #speed-dn-container {
display: none; }
#statusbar #speed-info #speed-dn-container.active {
display: inline; }
#statusbar #filter-select {
float: left;
margin-left: 5px; }
#statusbar input#torrent_search {
float: right;
height: 15px;
width: 100px;
border: solid 0 #fff;
padding: 2px;
margin: 4px 5px 0 0;
border-radius: 5px; }
#statusbar input#torrent_search.blur {
color: #999; }
#statusbar #speed-info #speed-up-container, #statusbar #speed-info #speed-dn-container {
display: inline; }
/***
****

47
web/style/transmission/common.scss
View File

@ -199,11 +199,25 @@ $statusbar-gradient-bottom: #bbb;
position: relative;
@include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
#filter
{
float: left;
margin-left: 5px;
input#torrent_search {
height: 18px;
width: 100px;
border: 1px solid black;
border-radius: 4px;
&.blur { color: #999; }
}
}
#speed-info
{
float: right;
margin-top: 5px;
margin-left: 45%;
text-align: left;
margin-right: 10px;
* {
display: inline-block;
@ -222,33 +236,8 @@ $statusbar-gradient-bottom: #bbb;
background: url('images/arrow-down.png') bottom no-repeat;
}
#speed-up-container {
display: none;
&.active { display: inline; }
}
#speed-dn-container {
display: none;
&.active { display: inline; }
}
}
#filter-select {
float: left;
margin-left: 5px;
}
input#torrent_search {
float: right;
height: 15px;
width: 100px;
border: solid 0 #fff;
padding: 2px;
margin: 4px 5px 0 0;
border-radius: 5px;
&.blur {
color: #999;
#speed-up-container, #speed-dn-container {
display: inline;
}
}
}

88
web/style/transmission/mobile.css
View File

@ -82,8 +82,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/toolbar-folder.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat;
margin-left: 4px; }
@ -101,8 +99,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/toolbar-folder.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-remove {
@ -123,8 +119,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/toolbar-close.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-remove:active, div#toolbar > div#toolbar-remove.selected {
@ -141,8 +135,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-close.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/toolbar-close.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-start {
@ -163,8 +155,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/toolbar-start.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat;
margin-left: 20px; }
@ -182,8 +172,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-start.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/toolbar-start.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-pause {
@ -204,8 +192,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/toolbar-pause.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-pause:active, div#toolbar > div#toolbar-pause.selected {
@ -222,8 +208,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/toolbar-pause.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-select {
@ -242,8 +226,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/toolbar-pointer.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat;
margin-left: 20px; }
@ -261,8 +243,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/toolbar-pointer.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > div#toolbar-inspector {
@ -281,8 +261,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat;
float: right;
@ -301,8 +279,6 @@ div#toolbar {
/* IE10 */
background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/toolbar-info.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#toolbar > *.disabled {
@ -326,10 +302,15 @@ div#toolbar {
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb); }
#statusbar #filter {
float: left;
margin-left: 5px; }
#statusbar #filter input#torrent_search {
display: none; }
#statusbar #speed-info {
float: right;
margin-top: 5px;
margin-left: 45%;
text-align: left; }
margin-right: 10px; }
#statusbar #speed-info * {
display: inline-block; }
#statusbar #speed-info #speed-up-icon {
@ -341,19 +322,8 @@ div#toolbar {
width: 8px;
height: 8px;
background: url("images/arrow-down.png") bottom no-repeat; }
#statusbar #speed-info #speed-up-container {
display: none; }
#statusbar #speed-info #speed-up-container.active {
display: inline; }
#statusbar #speed-info #speed-dn-container {
display: none; }
#statusbar #speed-info #speed-dn-container.active {
display: inline; }
#statusbar #filter-select {
float: left;
margin-left: 5px; }
#statusbar input#torrent_search {
display: none; }
#statusbar #speed-info #speed-up-container, #statusbar #speed-info #speed-dn-container {
display: inline; }
/***
****
@ -623,8 +593,6 @@ div#torrent_inspector {
/* IE10 */
background-image: url("images/inspector-info.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/inspector-info.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat;
border-left-width: 1px; }
@ -642,8 +610,6 @@ div#torrent_inspector {
/* IE10 */
background-image: url("images/inspector-info.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/inspector-info.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers {
@ -660,8 +626,6 @@ div#torrent_inspector {
/* IE10 */
background-image: url("images/inspector-peers.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/inspector-peers.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers.selected {
@ -678,8 +642,6 @@ div#torrent_inspector {
/* IE10 */
background-image: url("images/inspector-peers.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/inspector-peers.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers {
@ -696,8 +658,6 @@ div#torrent_inspector {
/* IE10 */
background-image: url("images/inspector-trackers.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/inspector-trackers.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers.selected {
@ -714,8 +674,6 @@ div#torrent_inspector {
/* IE10 */
background-image: url("images/inspector-trackers.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/inspector-trackers.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files {
@ -736,8 +694,6 @@ div#torrent_inspector {
/* IE10 */
background-image: url("images/inspector-files.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/inspector-files.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files.selected {
@ -754,8 +710,6 @@ div#torrent_inspector {
/* IE10 */
background-image: url("images/inspector-files.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/inspector-files.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div#torrent_inspector #inspector_header {
@ -925,8 +879,6 @@ div.file-priority-radiobox {
/* IE10 */
background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8);
/* Opera 11.10+ */
background-image: url("images/file-priority-low.png"), linear-gradient(top, #f1f1f1, #c8c8c8);
/* W3C */
background-position: center;
background-repeat: no-repeat;
border-right-width: 0px; }
@ -944,8 +896,6 @@ div.file-priority-radiobox {
/* IE10 */
background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #d7d7ff, #f5f5ff);
/* Opera 11.10+ */
background-image: url("images/file-priority-low.png"), linear-gradient(top, #d7d7ff, #f5f5ff);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div.file-priority-radiobox > div.normal {
@ -962,8 +912,6 @@ div.file-priority-radiobox {
/* IE10 */
background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8);
/* Opera 11.10+ */
background-image: url("images/file-priority-normal.png"), linear-gradient(top, #f1f1f1, #c8c8c8);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div.file-priority-radiobox > div.normal:active, div.file-priority-radiobox > div.normal.selected {
@ -980,8 +928,6 @@ div.file-priority-radiobox {
/* IE10 */
background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #d7d7ff, #f5f5ff);
/* Opera 11.10+ */
background-image: url("images/file-priority-normal.png"), linear-gradient(top, #d7d7ff, #f5f5ff);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div.file-priority-radiobox > div.high {
@ -1002,8 +948,6 @@ div.file-priority-radiobox {
/* IE10 */
background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8);
/* Opera 11.10+ */
background-image: url("images/file-priority-high.png"), linear-gradient(top, #f1f1f1, #c8c8c8);
/* W3C */
background-position: center;
background-repeat: no-repeat;
border-left-width: 0px; }
@ -1021,8 +965,6 @@ div.file-priority-radiobox {
/* IE10 */
background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #d7d7ff, #f5f5ff);
/* Opera 11.10+ */
background-image: url("images/file-priority-high.png"), linear-gradient(top, #d7d7ff, #f5f5ff);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
@ -1074,8 +1016,6 @@ div.torrent_footer {
/* IE10 */
background-image: url("images/wrench.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/wrench.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div.torrent_footer #prefs-button:active, div.torrent_footer #prefs-button.selected {
@ -1092,8 +1032,6 @@ div.torrent_footer {
/* IE10 */
background-image: url("images/wrench.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/wrench.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div.torrent_footer #turtle-button {
@ -1112,8 +1050,6 @@ div.torrent_footer {
/* IE10 */
background-image: url("images/turtle.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/turtle.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div.torrent_footer #turtle-button:active, div.torrent_footer #turtle-button.selected {
@ -1130,8 +1066,6 @@ div.torrent_footer {
/* IE10 */
background-image: url("images/turtle.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/turtle.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div.torrent_footer #compact-button {
@ -1150,8 +1084,6 @@ div.torrent_footer {
/* IE10 */
background-image: url("images/compact.png"), -o-linear-gradient(top, white, #bbbbbb);
/* Opera 11.10+ */
background-image: url("images/compact.png"), linear-gradient(top, white, #bbbbbb);
/* W3C */
background-position: center;
background-repeat: no-repeat; }
div.torrent_footer #compact-button:active, div.torrent_footer #compact-button.selected {
@ -1168,8 +1100,6 @@ div.torrent_footer {
/* IE10 */
background-image: url("images/compact.png"), -o-linear-gradient(top, #cdcdff, white);
/* Opera 11.10+ */
background-image: url("images/compact.png"), linear-gradient(top, #cdcdff, white);
/* W3C */
background-position: center;
background-repeat: no-repeat; }

34
web/style/transmission/mobile.scss
View File

@ -16,7 +16,6 @@
background-image: url($src), -moz-linear-gradient(top, $topColor, $bottomColor); /* FF3.6+ */
background-image: url($src), -ms-linear-gradient(top, $topColor, $bottomColor); /* IE10 */
background-image: url($src), -o-linear-gradient(top, $topColor, $bottomColor); /* Opera 11.10+ */
background-image: url($src), linear-gradient(top, $topColor, $bottomColor); /* W3C */
background-position: center;
background-repeat: no-repeat;
}
@ -192,11 +191,21 @@ $statusbar-gradient-bottom: #bbb;
position: relative;
@include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
#filter
{
float: left;
margin-left: 5px;
input#torrent_search {
display: none;
}
}
#speed-info
{
float: right;
margin-top: 5px;
margin-left: 45%;
text-align: left;
margin-right: 10px;
* {
display: inline-block;
@ -215,24 +224,9 @@ $statusbar-gradient-bottom: #bbb;
background: url('images/arrow-down.png') bottom no-repeat;
}
#speed-up-container {
display: none;
&.active { display: inline; }
#speed-up-container, #speed-dn-container {
display: inline;
}
#speed-dn-container {
display: none;
&.active { display: inline; }
}
}
#filter-select {
float: left;
margin-left: 5px;
}
input#torrent_search {
display: none;
}
}