diff --git a/client/source/sass/components/_action-bar.scss b/client/source/sass/components/_action-bar.scss
index 7ecfc8f6..770b21b2 100644
--- a/client/source/sass/components/_action-bar.scss
+++ b/client/source/sass/components/_action-bar.scss
@@ -2,7 +2,7 @@ $action-bar--background: transparent;
$action-bar--foreground: #1b1a1c;
$action-bar--group--border: rgba(#7a8080, 0.15);
-$action--foreground: #909799;
+$action--foreground: #8899a8;
$action--foreground--hover: $blue;
$action--background--hover: rgba(#333e4a, 0.05);
$action--border--hover: rgba(#333e4a, 0.15);
diff --git a/client/source/sass/components/_client-stats.scss b/client/source/sass/components/_client-stats.scss
index d851573e..58971e47 100644
--- a/client/source/sass/components/_client-stats.scss
+++ b/client/source/sass/components/_client-stats.scss
@@ -105,40 +105,6 @@ $client-stats--limits--icon--hover: $blue;
}
}
-.client-stat {
-
- &--limits {
- background: none;
- border: none;
- color: $client-stats--limits--foreground;
- display: block;
- outline: none;
- padding: 10px 15px;
- font-size: 0.85em;
- text-align: left;
- transition: color 0.25s;
- vertical-align: middle;
- width: 100%;
-
- .icon {
- display: inline-block;
- fill: $client-stats--limits--foreground;
- margin: -2px 5px 0 0;
- transition: fill 0.25s;
- vertical-align: middle;
- width: 14.5px;
- }
-
- &:hover {
- color: $client-stats--limits--icon--hover;
-
- .icon {
- fill: $client-stats--limits--icon--hover;
- }
- }
- }
-}
-
.client-stat {
position: relative;
diff --git a/client/source/sass/components/_sidebar.scss b/client/source/sass/components/_sidebar.scss
index 1322dcec..22627958 100644
--- a/client/source/sass/components/_sidebar.scss
+++ b/client/source/sass/components/_sidebar.scss
@@ -6,12 +6,11 @@ $sidebar-filter--foreground--header: rgba($sidebar-filter--foreground, 0.5);
$sidebar-filter--foreground--active: $blue;
$sidebar-filter--foreground--hover: lighten($sidebar-filter--foreground, 15%);
-$sidebar--icon-button--fill: $sidebar--foreground;
+$sidebar--icon-button--fill: rgba($sidebar--foreground, 0.7);
$sidebar--icon-button--fill--hover: $blue;
-$sidebar--icon-button--foreground: $sidebar--foreground;
+$sidebar--icon-button--foreground: rgba($sidebar--foreground, 0.7);
$sidebar--icon-button--foreground--hover: $blue;
-
.application {
&__sidebar {
@@ -51,7 +50,9 @@ $sidebar--icon-button--foreground--hover: $blue;
color: $sidebar--icon-button--foreground;
cursor: pointer;
display: block;
- line-height: 0;
+ font-size: 0.8em;
+ line-height: 1;
+ padding: 10px;
transition: color 0.25s;
&:hover {
@@ -64,13 +65,15 @@ $sidebar--icon-button--foreground--hover: $blue;
.icon {
fill: $sidebar--icon-button--fill;
- height: 16px;
+ height: 13px;
transition: fill 0.25s;
- width: 16px;
+ position: relative;
+ top: -1px;
+ vertical-align: middle;
+ width: 13px;
}
&--settings {
- padding: 10px 15px;
position: absolute;
right: $spacing-unit * 1/5;
top: $spacing-unit * 1/5;
diff --git a/client/source/sass/components/_torrents.scss b/client/source/sass/components/_torrents.scss
index 1499903b..6cd76db5 100644
--- a/client/source/sass/components/_torrents.scss
+++ b/client/source/sass/components/_torrents.scss
@@ -142,7 +142,7 @@ $torrent--background--error: #e95779;
&--primary {
color: $torrent--primary--foreground;
- flex: 4;
+ flex: 1 1 auto;
line-height: 1.3;
white-space: nowrap;
@@ -165,27 +165,19 @@ $torrent--background--error: #e95779;
&--secondary {
color: $torrent--secondary--foreground;
- flex: 0 0 210px;
+ flex: 0 0 auto;
font-size: 0.75em;
- min-width: 265px;
+ margin-right: $spacing-unit * 2/5;
text-align: right;
white-space: nowrap;
vertical-align: baseline;
- li {
- display: inline-block;
- font-weight: 500;
- margin-right: 5px;
- text-align: left;
- white-space: nowrap;
+ &:last-child {
+ margin-right: 0;
+ }
- .unit {
- font-weight: 400;
- }
-
- &:last-child {
- margin-right: 0;
- }
+ .unit {
+ font-weight: 400;
}
.is-stopped & {
@@ -274,16 +266,15 @@ $torrent--background--error: #e95779;
width: 55px;
}
+ &--ratio {
+ width: 50px;
+ }
+
&--seeds {
width: 55px;
}
- &--eta {
- width: 70px;
- }
-
&--speed {
- width: 65px;
&--download,
&--upload {
@@ -310,10 +301,6 @@ $torrent--background--error: #e95779;
color: $blue;
}
}
-
- &--ratio {
- width: 50px;
- }
}
}
diff --git a/client/source/scripts/components/sidebar/SettingsButton.js b/client/source/scripts/components/sidebar/SettingsButton.js
index 4f70c3c2..9b0cb7af 100644
--- a/client/source/scripts/components/sidebar/SettingsButton.js
+++ b/client/source/scripts/components/sidebar/SettingsButton.js
@@ -16,7 +16,7 @@ class SettingsButton extends React.Component {
return (
-
+ Settings
);
}
diff --git a/client/source/scripts/components/sidebar/SpeedLimitDropdown.js b/client/source/scripts/components/sidebar/SpeedLimitDropdown.js
index 5643fa01..25b8e769 100644
--- a/client/source/scripts/components/sidebar/SpeedLimitDropdown.js
+++ b/client/source/scripts/components/sidebar/SpeedLimitDropdown.js
@@ -57,7 +57,7 @@ class SpeedLimitDropdown extends React.Component {
getDropdownHeader() {
return (
-
+
Speed Limits
);
@@ -144,7 +144,6 @@ class SpeedLimitDropdown extends React.Component {
}
render() {
- // return hi;
return (
0 || uploadRate.value > 0;
+ let wasAddedRecently = (Date.now() - added.getTime()) < 1000 * 60 * 10; // Was added in the last 10 minutes.
+
+ if (isActivelyDownloading) {
+ secondaryDetails.push(
+
+
+ {eta}
+
+ );
+ }
+
+ if (isActivelyDownloading || wasAddedRecently) {
+ secondaryDetails.push(
+
+
+ {downloadRate.value}
+ {downloadRate.unit}
+ ,
+
+
+ {uploadRate.value}
+ {uploadRate.unit}
+
+ );
+ }
+
return (
@@ -66,28 +97,7 @@ export default class Torrent extends React.Component {
{torrent.name}
-
-
- -
-
- {eta}
-
- -
-
- {downloadRate.value}
- {downloadRate.unit}
-
- -
-
- {uploadRate.value}
- {uploadRate.unit}
-
- -
-
- {ratio}
-
-
-
+ {secondaryDetails}
-
@@ -103,6 +113,10 @@ export default class Torrent extends React.Component {
{uploadTotal.value}
{uploadTotal.unit}
+ -
+
+ {ratio}
+
-
{totalSize.value}